/** Shopify CDN: Minification failed

Line 16:2 Unexpected "<"
Line 6582:0 Unexpected "<"

**/
/* ==========================================================================
   Volta HYDRATE landing page (page.hydrate-landing)

   Ported verbatim from landing-page/index.html. The only change: every
   background image `url("images/x")` became `var(--lp-img-x)` so the real
   CDN paths can be injected from Liquid. Those variables are defined on
   :root by snippets/lp-hydrate-assets.liquid.
   ========================================================================== */

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <style>
/* ========================================================================
   BASE — resets, tokens, element defaults, keyframes
   ======================================================================== */

:root{
  --page-bg:#eef3f8;
  --page-bridge:#f3f8fc;
  --page-navy:#071b57;
  --page-teal:#0b7aa3;
}

html{
  scroll-behavior:smooth;background:var(--page-bg)
}

body{
  margin:0;
  overflow-x:hidden;
  background:linear-gradient(180deg,#eef3f8 0%,#f7fbff 22%,#eef3f8 100%);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

@keyframes selectedOutcomeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
}

/* ===== alternating full-width section backgrounds + right image alignment ===== */
body{
  background:linear-gradient(180deg,#eef3f8 0%,#f7fbff 22%,#eef3f8 100%) !important;
}

/* ===== Block 2: full-width gray section with matching image fade ===== */
body{
  background:#F1F6FA !important;
}

/* ========================================================================
   SHARED — bands, bridges, section framing, reusable blends
   ======================================================================== */

.page-shell{
  width:100%;overflow:hidden
}

.landing-section{
  scroll-margin-top:18px;
  position:relative;
  isolation:isolate;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}

body.page-enhanced .landing-section:not(.section-visible){
  opacity:.84;
  transform:translateY(16px);
  filter:saturate(.96);
}

body.page-enhanced .landing-section.section-visible{
  opacity:1;
  transform:translateY(0);
  filter:saturate(1);
}

.section-bridge{
  width:min(1400px,100%);
  height:54px;
  margin:-1px auto;
  position:relative;
  z-index:20;
  pointer-events:none;
  background:linear-gradient(180deg,
  rgba(247,251,255,.96) 0%,
  rgba(238,245,250,.98) 42%,
  rgba(242,248,252,.98) 62%,
  rgba(247,251,255,.96) 100%);
}

.section-bridge::after{
  content:"";
  position:absolute;
  left:8%;right:8%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(11,122,163,.10),transparent);
}

@media(prefers-reduced-motion:reduce){
  .landing-section{
    transition:none!important;animation:none!important;transform:none!important
  }
}

/* ===== unified width + full-width section dividers ===== */
.page-shell{
  width:100%;
  overflow-x:hidden;
}

.landing-section{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
  position:relative;
}

.section-bridge{
  width:100% !important;
  max-width:none !important;
  height:42px !important;
  margin:0 !important;
  position:relative;
  z-index:20;
  pointer-events:none;
  background:linear-gradient(
  180deg,
  rgba(247,251,255,.86) 0%,
  rgba(241,247,251,.92) 50%,
  rgba(247,251,255,.86) 100%
  ) !important;
}

.section-bridge::after{
  content:"";
  position:absolute;
  left:0 !important;
  right:0 !important;
  top:50%;
  height:1px;
  transform:translateY(-50%);
  background:linear-gradient(
  90deg,
  rgba(11,122,163,0) 0%,
  rgba(11,122,163,.14) 10%,
  rgba(11,122,163,.20) 50%,
  rgba(11,122,163,.14) 90%,
  rgba(11,122,163,0) 100%
  ) !important;
}

/* make the transition between blocks feel more intentional while scrolling */
.landing-section::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(
  90deg,
  rgba(11,122,163,0) 0%,
  rgba(11,122,163,.08) 14%,
  rgba(11,122,163,.12) 50%,
  rgba(11,122,163,.08) 86%,
  rgba(11,122,163,0) 100%
  );
}

@media (max-width: 720px){
  .landing-section{
    width:100% !important;
    max-width:100% !important;
  }

  .section-bridge{
    height:28px !important;
  }
}

/* make the faint separator simpler now that sections alternate */
.section-bridge{
  width:100% !important;
  max-width:none !important;
  height:1px !important;
  margin:0 !important;
  background:linear-gradient(
  90deg,
  rgba(11,122,163,0) 0%,
  rgba(11,122,163,.10) 12%,
  rgba(11,122,163,.16) 50%,
  rgba(11,122,163,.10) 88%,
  rgba(11,122,163,0) 100%
  ) !important;
}

.section-bridge::after{
  display:none !important;
}

/* ===== reusable 4-sided image blend — currently applied to Block 2 only ===== */
.image-blend{
  --blend-rgb: 241,246,250; /* #F1F6FA */
  position:relative;
  overflow:hidden;
  background:rgb(var(--blend-rgb));
}

.image-blend > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:right center;
}

/*
Four independent overlays:
- left is intentionally the strongest/widest to merge into the copy
- right/top/bottom are softer so the photo still feels natural
*/
.image-blend::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
  /* LEFT */
  linear-gradient(
  90deg,
  rgba(var(--blend-rgb),1) 0%,
  rgba(var(--blend-rgb),.88) 4%,
  rgba(var(--blend-rgb),.58) 9%,
  rgba(var(--blend-rgb),.28) 14%,
  rgba(var(--blend-rgb),.08) 19%,
  rgba(var(--blend-rgb),0) 24%
  ),
  /* RIGHT */
  linear-gradient(
  270deg,
  rgba(var(--blend-rgb),1) 0%,
  rgba(var(--blend-rgb),.90) 5%,
  rgba(var(--blend-rgb),.62) 10%,
  rgba(var(--blend-rgb),.34) 15%,
  rgba(var(--blend-rgb),.12) 20%,
  rgba(var(--blend-rgb),0) 25%
  ),
  /* TOP */
  linear-gradient(
  180deg,
  rgba(var(--blend-rgb),.78) 0%,
  rgba(var(--blend-rgb),.36) 4%,
  rgba(var(--blend-rgb),.10) 8%,
  rgba(var(--blend-rgb),0) 13%
  ),
  /* BOTTOM */
  linear-gradient(
  0deg,
  rgba(var(--blend-rgb),.86) 0%,
  rgba(var(--blend-rgb),.48) 5%,
  rgba(var(--blend-rgb),.16) 10%,
  rgba(var(--blend-rgb),0) 16%
  );
}

@media (max-width:980px){
  .image-blend::after{
    background:
    linear-gradient(
    180deg,
    rgba(var(--blend-rgb),.92) 0%,
    rgba(var(--blend-rgb),.46) 7%,
    rgba(var(--blend-rgb),0) 15%
    ),
    linear-gradient(
    0deg,
    rgba(var(--blend-rgb),.88) 0%,
    rgba(var(--blend-rgb),.38) 7%,
    rgba(var(--blend-rgb),0) 15%
    ),
    linear-gradient(
    90deg,
    rgba(var(--blend-rgb),.60) 0%,
    rgba(var(--blend-rgb),.18) 7%,
    rgba(var(--blend-rgb),0) 14%
    ),
    linear-gradient(
    270deg,
    rgba(var(--blend-rgb),.60) 0%,
    rgba(var(--blend-rgb),.18) 7%,
    rgba(var(--blend-rgb),0) 14%
    );
  }
}

/* ==================================================================
REUSABLE LANDING PAGE SECTION SYSTEM
Full-width color band + centered 1400px block
================================================================== */
.section-band{
  width:100%;
  position:relative;
}

.section-bg-white{
  background:#FFFFFF;
}

.section-bg-gray{
  background:#F1F6FA;
}

/* Every actual block stays centered. The wrapper provides full-width color. */
.section-band > .landing-section{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

/* ==================================================================
REUSABLE FOUR-SIDED IMAGE BLEND
Same fade geometry approved on Block 2.
Only the blend color changes.
================================================================== */
.image-blend-gray{
  --blend-rgb:241,246,250; /* #F1F6FA */
}

.image-blend-white{
  --blend-rgb:255,255,255; /* #FFFFFF */
}

.image-blend{
  position:relative;
  overflow:hidden;
  background:rgb(var(--blend-rgb));
}

.image-blend > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
}

/* Approved fade:
LEFT = short so more image is visible
RIGHT = wider so hard edge disappears
TOP/BOTTOM = subtle blend */
.image-blend::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
  /* LEFT */
  linear-gradient(
  90deg,
  rgba(var(--blend-rgb),1) 0%,
  rgba(var(--blend-rgb),.88) 4%,
  rgba(var(--blend-rgb),.58) 9%,
  rgba(var(--blend-rgb),.28) 14%,
  rgba(var(--blend-rgb),.08) 19%,
  rgba(var(--blend-rgb),0) 24%
  ),
  /* RIGHT */
  linear-gradient(
  270deg,
  rgba(var(--blend-rgb),1) 0%,
  rgba(var(--blend-rgb),.90) 5%,
  rgba(var(--blend-rgb),.62) 10%,
  rgba(var(--blend-rgb),.34) 15%,
  rgba(var(--blend-rgb),.12) 20%,
  rgba(var(--blend-rgb),0) 25%
  ),
  /* TOP */
  linear-gradient(
  180deg,
  rgba(var(--blend-rgb),.78) 0%,
  rgba(var(--blend-rgb),.36) 4%,
  rgba(var(--blend-rgb),.10) 8%,
  rgba(var(--blend-rgb),0) 13%
  ),
  /* BOTTOM */
  linear-gradient(
  0deg,
  rgba(var(--blend-rgb),.86) 0%,
  rgba(var(--blend-rgb),.48) 5%,
  rgba(var(--blend-rgb),.16) 10%,
  rgba(var(--blend-rgb),0) 16%
  ) !important;
}

@media(max-width:980px){
  .image-blend::after{
    background:
    linear-gradient(
    180deg,
    rgba(var(--blend-rgb),.92) 0%,
    rgba(var(--blend-rgb),.46) 7%,
    rgba(var(--blend-rgb),0) 15%
    ),
    linear-gradient(
    0deg,
    rgba(var(--blend-rgb),.88) 0%,
    rgba(var(--blend-rgb),.38) 7%,
    rgba(var(--blend-rgb),0) 15%
    ),
    linear-gradient(
    90deg,
    rgba(var(--blend-rgb),.60) 0%,
    rgba(var(--blend-rgb),.18) 7%,
    rgba(var(--blend-rgb),0) 14%
    ),
    linear-gradient(
    270deg,
    rgba(var(--blend-rgb),.60) 0%,
    rgba(var(--blend-rgb),.18) 7%,
    rgba(var(--blend-rgb),0) 14%
    ) !important;
  }
}

/* --------------------------------------------------------------
BLOCK 2
Restore the approved centered layout.
ONLY the gray background band is full viewport width.
-------------------------------------------------------------- */
.section-band.section-bg-gray{
  width:100%;
  background:#F1F6FA;
}

/* --------------------------------------------------------------
BLOCK 3
Full-width WHITE background band.
Actual Block 3 content remains centered at 1400px.
-------------------------------------------------------------- */
.section-band.section-bg-white{
  width:100%;
  background:#FFFFFF;
}

/* ==================================================================
BLOCK 4 ONLY
Even section = full-width #F1F6FA band.
Block content remains centered at 1400px.
Image uses the same gray blend treatment as Block 2.
================================================================== */
.block-4-band{
  width:100%;
  background:#F1F6FA !important;
}

/* ==================================================================
BLOCK 5 ONLY — ODD SECTION / WHITE
Full-width white band, centered Block 5 content.
================================================================== */
.block-5-band{
  width:100%;
  background:#FFFFFF !important;
}

/* ==================================================================
BLOCK 6 ONLY — full-width gray band + image edge treatment
Band gray is #F1F6FA (241,246,250) to match Block 4. Every fade in
this block must use that exact value or a seam shows at the band.
================================================================== */
.block-6-band{
  width:100%;
  background:#F1F6FA !important;
}

/* ========================================================================
   STICKY CTA — fixed overlay, global (not block-scoped)
   ======================================================================== */

/* STICKY TRY VOLTA HYDRATE CTA */
.volta-sticky-cta{
  position:fixed; z-index:9999; right:22px; bottom:22px;
  display:flex; align-items:center; gap:14px;
  padding:10px 12px 10px 16px;
  border:1px solid rgba(7,27,87,.12);
  border-radius:15px;
  background:rgba(255,255,255,.97);
  box-shadow:0 14px 38px rgba(7,27,87,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(16px);
  transition:opacity .24s ease,transform .24s ease,visibility .24s ease;
}
.volta-sticky-cta.is-visible{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.volta-sticky-cta__product{
  color:#071b57; font-size:14px; line-height:1.1; font-weight:800; white-space:nowrap;
}
.volta-sticky-cta__button{
  min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:0 18px; border-radius:10px;
  background:linear-gradient(180deg,#0f6ca3,#0a5690 38%,#083f80 100%);
  box-shadow:0 8px 18px rgba(8,53,105,.18);
  color:#fff; text-decoration:none;
  font-size:14px; line-height:1; font-weight:800; letter-spacing:.015em;
  text-transform:uppercase; white-space:nowrap;
}
.volta-sticky-cta__button:hover{filter:brightness(1.04)}
.volta-sticky-cta__button:focus-visible,
.volta-sticky-cta__close:focus-visible{
  outline:3px solid rgba(56,168,201,.38); outline-offset:3px;
}
.volta-sticky-cta__close{
  width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center;
  padding:0; border:0; border-radius:50%; background:transparent;
  color:#66758b; cursor:pointer; font-size:16px; line-height:1;
}
.volta-sticky-cta__close:hover{background:#eef4f8;color:#071b57}

@media(max-width:700px){
  body.sticky-volta-visible{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .volta-sticky-cta{
    left:0; right:0; bottom:0; width:100%; min-height:72px; gap:10px;
    padding:10px max(12px,env(safe-area-inset-right))
            calc(10px + env(safe-area-inset-bottom))
            max(12px,env(safe-area-inset-left));
    border-width:1px 0 0; border-radius:0;
    background:rgba(255,255,255,.98);
    box-shadow:0 -8px 28px rgba(7,27,87,.14);
    transform:translateY(100%);
  }
  .volta-sticky-cta.is-visible{transform:translateY(0)}
  .volta-sticky-cta__product{display:none}
  .volta-sticky-cta__button{
    min-height:52px; flex:1 1 auto; width:100%; padding:0 16px; font-size:16px; border-radius:10px;
  }
  .volta-sticky-cta__close{
    width:42px; height:42px; flex-basis:42px; font-size:18px;
  }
}
@media(prefers-reduced-motion:reduce){
  .volta-sticky-cta{transition:none!important}
}

/* ========================================================================
   BLOCK 1
   ======================================================================== */

/* ===== Block 1 source styles ===== */
#block-1{
  --navy:#06184a;
  --blue:#0b4f95;
  --teal:#0b7aa3;
  --aqua:#39a8c9;
  --line:#dbe6f1;
  --muted:#586983;
  --success:#0f7d63;
  --success-bg:#eefaf6;
  --shadow:0 10px 24px rgba(8,31,73,.07);
}

#block-1,
#block-1 *{
  box-sizing:border-box
}

#block-1{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#eef3f8;
  color:#17233b;
}

#block-1{
  width:min(1280px,100%);
  min-height:100vh;
  margin:0 auto;
  background:
  radial-gradient(circle at 100% 0%,rgba(14,95,174,.06),transparent 18rem),
  linear-gradient(135deg,#fff 0%,#f7fbff 100%);
}

#block-1 .content{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:42px 0 46px;
}

#block-1 h1{
  margin:0;
  color:var(--navy);
  font-size:clamp(44px,5vw,68px);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.055em;
}

#block-1 .subhead{
  margin-top:10px;
  color:var(--blue);
  font-size:clamp(24px,2.8vw,36px);
  line-height:1.06;
  font-weight:760;
  letter-spacing:-.035em;
}

#block-1 .list-title{
  margin:22px 0 0;
  color:var(--navy);
  font-size:18px;
  font-weight:800;
}

#block-1 .list-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:start;
}

#block-1 .list-column{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

#block-1 .item{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow);
}

#block-1 .toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

#block-1 .row{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  cursor:pointer;
  user-select:none;
}

#block-1 .check{
  width:26px;
  height:26px;
  border:2px solid #b7c9df;
  border-radius:7px;
  display:grid;
  place-items:center;
  color:transparent;
  background:#fff;
  transition:.18s ease;
}

#block-1 .check svg{
  width:14px;
  height:14px;
  display:block;
}

#block-1 .pain{
  color:var(--navy);
  font-size:16px;
  line-height:1.25;
  font-weight:750;
  letter-spacing:-.015em;
}

#block-1 .expectation{
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 16px 0 54px;
  transition:max-height .22s ease,padding .22s ease,opacity .18s ease;
  background:linear-gradient(180deg,#f8fbfe,#fff);
}

#block-1 .expectation-card{
  display:block;
  width:100%;
  padding:11px 13px;
  border-radius:11px;
  border:1px solid #bee4d9;
  background:var(--success-bg);
  color:var(--success);
  font-size:14px;
  line-height:1.35;
  font-weight:800;
}

#block-1 .toggle:checked + .row .check{
  border-color:var(--success);
  background:var(--success);
  color:#fff;
}

#block-1 .toggle:checked + .row + .expectation{
  max-height:100px;
  opacity:1;
  padding:0 16px 14px 54px;
}

@media (max-width:760px){
  #block-1 .content{
    width:min(100% - 24px,1180px);
    padding:30px 0 34px;
  }

  #block-1 .list-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  #block-1 .list-column{
    gap:10px;
  }

  #block-1 .row{
    padding:13px 14px;
  }

  #block-1 .pain{
    font-size:15px;
  }

  #block-1 .expectation{
    padding-left:52px;
  }

  #block-1 .toggle:checked + .row + .expectation{
    padding-left:52px;
  }
}

#block-1{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

@media (max-width: 720px){
  #block-1{
    width:100% !important;
    max-width:100% !important;
  }
}

/* odd = white, even = gray; background stretched full viewport width */
#block-1{
  background:
  linear-gradient(#ffffff,#ffffff) center / 100vw 100% no-repeat !important;
}

/* ===== Block 1 full-width white background ===== */
#block-1{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:#ffffff !important;
}

#block-1 .content{
  width:min(1180px,calc(100% - 48px)) !important;
  max-width:1180px !important;
  margin:0 auto !important;
}

/* Blocks 1–3 now inherit their background from the full-width band. */
.section-band > #block-1{
  background:transparent !important;
}

/* ========================================================================
   BLOCK 2
   ======================================================================== */

/* ===== Block 2 source styles ===== */
#block-2{
  --navy:#06184a;
  --blue:#0b4f95;
  --blue-2:#0e5fae;
  --teal-blue:#0b7aa3;
  --aqua:#38a8c9;
  --soft:#eef5fc;
  --soft-2:#f7fbff;
  --line:#dbe6f1;
  --ink:#18253f;
  --muted:#506078;
  --white:#ffffff;
  --shadow:0 12px 28px rgba(8,31,73,.08);
  --shadow-lg:0 16px 32px rgba(8,31,73,.16);
}

#block-2,
#block-2 *{
  box-sizing:border-box
}

#block-2{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#eef3f8;
  color:var(--ink);
}

#block-2{
  width:min(1280px,100%);
  min-height:100vh;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  background:
  radial-gradient(circle at 98% 8%,rgba(14,95,174,.07),transparent 18rem),
  linear-gradient(135deg,#fff 0%,#f5f9fd 48%,#eff5fb 100%);
}

#block-2 .wrap{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,52%) minmax(360px,48%);
  align-items:stretch;
}

#block-2 .content{
  position:relative;
  z-index:2;
  padding:40px 30px 38px 50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:linear-gradient(
  90deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.98) 25%,
  rgba(255,255,255,.88) 52%,
  rgba(255,255,255,.58) 58%,
  rgba(255,255,255,0) 100%
  );
}

#block-2 h1{
  margin:0;
  max-width:720px;
  color:var(--navy);
  font-size:clamp(44px,5.2vw,68px);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.055em;
}

#block-2 .subhead{
  margin-top:10px;
  max-width:680px;
  color:var(--blue);
  font-size:clamp(26px,3vw,40px);
  line-height:1.04;
  font-weight:750;
  letter-spacing:-.038em;
}

#block-2 .bullets{
  max-width:740px;
  margin-top:28px;
  display:grid;
  gap:12px;
}

#block-2 .bullet{
  min-height:76px;
  display:grid;
  grid-template-columns:58px 1fr;
  align-items:center;
  gap:14px;
  padding:7px 18px 7px 10px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow);
}

#block-2 .bullet-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(145deg,var(--teal-blue),#0c598a);
  font-size:21px;
  box-shadow:0 10px 22px rgba(8,68,112,.16);
}

#block-2 .bullet:nth-child(even) .bullet-icon{
  background:linear-gradient(145deg,#0b64bf,#073f8e);
}

#block-2 .bullet-copy{
  min-height:100%;
  display:flex;
  align-items:center;
  padding-left:14px;
  border-left:4px solid var(--teal-blue);
  color:var(--navy);
  font-size:19px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.025em;
}

#block-2 .bullet:nth-child(even) .bullet-copy{
  border-left-color:var(--blue);
}

#block-2 .accent-teal{
  color:var(--teal-blue)
}

#block-2 .accent-blue{
  color:#155fc2
}

#block-2 .cta{
  width:min(520px,100%);
  min-height:68px;
  margin-top:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,#0f6ca3,#0a5690 38%,#083f80 100%);
  box-shadow:var(--shadow-lg);
  font-size:21px;
  line-height:1;
  font-weight:800;
  letter-spacing:.015em;
  text-transform:uppercase;
}

#block-2 .cta i{
  font-size:24px;
}

#block-2 .visual{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:#eaf2fa;
}

#block-2 .visual img{
  position:absolute;
  top:-2%;
  left:-2%;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:88% center;
  transform:scale(.92);
  transform-origin:center center;
}

#block-2 .visual::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:
  linear-gradient(90deg,rgba(245,249,253,.98) 0%,rgba(245,249,253,.52) 16%,rgba(245,249,253,0) 34%),
  radial-gradient(circle at 50% 0%,rgba(255,255,255,.18),transparent 13rem);
  pointer-events:none;
}

#block-2 .callout{
  position:absolute;
  z-index:2;
  top:180px;
  right:90px;
  width:270px;
  height:270px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  color:#fff;
  background:radial-gradient(circle at 35% 28%,#08295c 0%,#06184a 66%,#041138 100%);
  box-shadow:0 18px 36px rgba(8,31,73,.22);
}

#block-2 .callout-top{
  font-size:22px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.02em;
}

#block-2 .callout-line{
  width:142px;
  height:3px;
  margin:13px 0 14px;
  border-radius:999px;
  background:var(--aqua);
}

#block-2 .callout-middle{
  color:#38c0dc;
  font-size:24px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.03em;
  text-transform:uppercase;
}

#block-2 .callout-bottom{
  margin-top:4px;
  font-size:18px;
  line-height:1.15;
  font-weight:800;
}

@media (max-width:980px){
  #block-2 .wrap{
    grid-template-columns:1fr;
  }

  #block-2 .content{
    padding:34px 24px 28px;
  }

  #block-2 .visual{
    min-height:auto;
    width:100%;
  }

  #block-2 .visual img{
    position:absolute;
    top:-2%;
    left:-2%;
    width:104%;
    height:104%;
    object-fit:cover;
    object-position:68% center;
    transform:scale(.96);
    transform-origin:center center;
  }

  #block-2 .visual::before{
    background:linear-gradient(180deg,rgba(245,249,253,.08),rgba(245,249,253,0) 18%);
  }

  #block-2 .callout{
    top:28px;
    right:26px;
    width:230px;
    height:230px;
  }
}

@media (max-width:640px){
  #block-2 .content{
    padding:28px 18px 24px;
  }

  #block-2 h1{
    font-size:42px;
  }

  #block-2 .subhead{
    font-size:28px;
  }

  #block-2 .bullet{
    grid-template-columns:52px 1fr;
    gap:10px;
    padding:7px 12px 7px 8px;
  }

  #block-2 .bullet-icon{
    width:44px;
    height:44px;
    font-size:19px;
  }

  #block-2 .bullet-copy{
    padding-left:13px;
    font-size:15px;
  }

  #block-2 .cta{
    width:100%;
    min-height:62px;
    font-size:18px;
  }

  #block-2 .visual{
    padding-top:0;
  }

  #block-2 .callout{
    position:relative;
    top:auto;
    right:auto;
    width:210px;
    height:210px;
    margin:16px 16px -8px auto;
  }

  #block-2 .callout-top{
    font-size:18px;
  }

  #block-2 .callout-middle{
    font-size:20px;
  }

  #block-2 .callout-bottom{
    font-size:16px;
  }
}

#block-2{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

@media (max-width: 720px){
  #block-2{
    width:100% !important;
    max-width:100% !important;
  }
}

#block-2{
  background:
  linear-gradient(#eef3f8,#eef3f8) center / 100vw 100% no-repeat !important;
}

/* right-side image alignment */
#block-2 .visual{
  justify-content:flex-end !important;
}

#block-2 .visual img{
  left:auto !important;
  right:0 !important;
  object-position:right center !important;
}

/* if a section is gray, match the fade into the image with gray instead of white */
#block-2 .content{
  background:linear-gradient(
  90deg,
  rgba(238,243,248,1) 0%,
  rgba(238,243,248,.98) 26%,
  rgba(238,243,248,.90) 52%,
  rgba(238,243,248,.62) 60%,
  rgba(238,243,248,0) 100%
  ) !important;
}

#block-2 .visual::before{
  background:
  linear-gradient(90deg,rgba(238,243,248,.98) 0%,rgba(238,243,248,.52) 16%,rgba(238,243,248,0) 34%),
  radial-gradient(circle at 50% 0%,rgba(255,255,255,.18),transparent 13rem) !important;
}

/* keep even sections feeling full-width and intentional */
#block-2{
  border-top:1px solid rgba(11,122,163,.05);
  border-bottom:1px solid rgba(11,122,163,.05);
}

/* The gray belongs to the full section, not a white content panel. */
#block-2{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:#F1F6FA !important;
}

/* Keep the actual Block 2 layout aligned to the same 1400px page width. */
#block-2 .wrap{
  width:min(1400px,100%) !important;
  margin:0 auto !important;
  background:#F1F6FA !important;
}

/* Blend the text side directly from the section gray into the image. */
#block-2 .content{
  background:linear-gradient(
  90deg,
  rgba(241,246,250,1) 0%,
  rgba(241,246,250,1) 34%,
  rgba(241,246,250,.97) 48%,
  rgba(241,246,250,.84) 58%,
  rgba(241,246,250,.56) 68%,
  rgba(241,246,250,.24) 80%,
  rgba(241,246,250,0) 100%
  ) !important;
}

/* The exposed area around the photo uses the exact same gray. */
#block-2 .visual{
  background:#F1F6FA !important;
  justify-content:flex-end !important;
}

/* Keep the photo firmly aligned to the right. */
#block-2 .visual img{
  left:auto !important;
  right:0 !important;
  object-position:right center !important;
}

/* Match the image-side fade to #F1F6FA instead of white. */
#block-2 .visual::before{
  background:
  linear-gradient(
  90deg,
  rgba(241,246,250,.98) 0%,
  rgba(241,246,250,.72) 12%,
  rgba(241,246,250,.38) 22%,
  rgba(241,246,250,.12) 31%,
  rgba(241,246,250,0) 39%
  ),
  radial-gradient(circle at 50% 0%,rgba(255,255,255,.14),transparent 13rem) !important;
}

@media (max-width:980px){
  #block-2 .content{
    background:linear-gradient(
    180deg,
    rgba(241,246,250,1) 0%,
    rgba(241,246,250,1) 72%,
    rgba(241,246,250,.78) 84%,
    rgba(241,246,250,.24) 94%,
    rgba(241,246,250,0) 100%
    ) !important;
  }

  #block-2 .visual::before{
    background:linear-gradient(
    180deg,
    rgba(241,246,250,.35) 0%,
    rgba(241,246,250,0) 18%
    ) !important;
  }
}

/* Block 2: remove its older fade layer so the reusable 4-sided blend is the only image overlay */
#block-2 .visual.image-blend::before{
  display:none !important;
}

/* Keep Block 2's circular callout above the blend overlay */
#block-2 .visual.image-blend .callout{
  z-index:2 !important;
}

/* Force the actual image flush right inside its container */
#block-2 .visual.image-blend > img{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
  object-fit:cover !important;
  object-position:right center !important;
}

/* Blocks 1–3 now inherit their background from the full-width band. */
.section-band > #block-2{
  background:transparent !important;
}

/* Block 2 remains centered inside its gray band. */
#block-2 .wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:transparent !important;
}

/* Disable old image fade layers where the reusable blend is being used. */
#block-2 .visual.image-blend::before{
  display:none !important;
}

/* Keep Block 2 callout above the image fade. */
#block-2 .image-blend .callout{
  z-index:2 !important;
}

.section-band.section-bg-gray > #block-2{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:transparent !important;
}

/* This is the centered Block 2 content/layout area. */
#block-2 .wrap{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
  background:transparent !important;
}

/* Keep the already-approved Block 2 gray fade exactly as-is. */
#block-2 .visual.image-blend-gray{
  --blend-rgb:241,246,250;
}

/* ========================================================================
   BLOCK 3
   ======================================================================== */

/* ===== Block 3 source styles ===== */
#block-3{
  --navy:#06184a;
  --blue:#0b4f95;
  --blue-2:#0e5fae;
  --teal-blue:#0b7aa3;
  --aqua:#38a8c9;
  --soft:#eef5fc;
  --soft-2:#f7fbff;
  --line:#dbe6f1;
  --ink:#18253f;
  --muted:#506078;
  --white:#fff;
  --shadow:0 12px 28px rgba(8,31,73,.08);
}

#block-3,
#block-3 *{
  box-sizing:border-box
}

#block-3{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#eef3f8;
  color:var(--ink);
}

#block-3{
  width:min(1280px,100%);
  min-height:100vh;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  background:
  radial-gradient(circle at 98% 10%,rgba(14,95,174,.07),transparent 18rem),
  linear-gradient(135deg,#fff 0%,#f5f9fd 48%,#eff5fb 100%);
}

#block-3 .cells{
  position:absolute;
  z-index:0;
  right:0;
  top:0;
  width:44%;
  height:100%;
  overflow:hidden;
  background:#eaf2fa;
}

#block-3 .cells img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}

#block-3 .cells::after{
  content:"";
  position:absolute;
  inset:0;
  background:
  linear-gradient(90deg,rgba(247,250,253,.98) 0%,rgba(247,250,253,.58) 18%,rgba(247,250,253,0) 38%),
  radial-gradient(circle at 58% 15%,rgba(255,255,255,.28),transparent 12rem);
}

#block-3 .content{
  position:relative;
  z-index:2;
  width:min(78%,990px);
  padding:40px 34px 42px 50px;
}

#block-3 .top{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:28px;
  align-items:start;
  max-width:900px;
}

#block-3 h1{
  margin:0;
  color:var(--navy);
  font-size:clamp(46px,5.2vw,72px);
  line-height:.97;
  font-weight:800;
  letter-spacing:-.055em;
}

#block-3 .subhead{
  margin:12px 0 0;
  max-width:620px;
  color:var(--blue);
  font-size:clamp(25px,2.9vw,38px);
  line-height:1.08;
  font-weight:750;
  letter-spacing:-.035em;
}

#block-3 .third-line{
  margin:12px 0 0;
  max-width:660px;
  color:var(--muted);
  font-size:16px;
  line-height:1.48;
  font-weight:500;
}

#block-3 .pillars-heading{
  margin-top:10px;
  padding-left:24px;
  border-left:4px solid var(--teal-blue);
}

#block-3 .pillars-heading strong{
  display:block;
  color:var(--navy);
  font-size:19px;
  line-height:1.3;
  font-weight:800;
}

#block-3 .pillars-heading span{
  display:block;
  margin-top:8px;
  color:var(--teal-blue);
  font-size:14px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#block-3 .cards{
  max-width:920px;
  margin-top:26px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

#block-3 .card{
  min-height:185px;
  padding:21px 22px;
  display:grid;
  grid-template-columns:76px 1fr;
  gap:18px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow);
}

#block-3 .card-icon{
  width:72px;
  height:72px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--teal-blue),#0c598a);
  color:#fff;
  font-size:31px;
  box-shadow:0 10px 22px rgba(8,68,112,.16);
}

#block-3 .card:nth-child(2) .card-icon,
#block-3 .card:nth-child(4) .card-icon{
  background:linear-gradient(145deg,#0b64bf,#073f8e);
}

#block-3 .card-body{
  padding-left:17px;
  border-left:3px solid var(--teal-blue);
}

#block-3 .card:nth-child(2) .card-body,
#block-3 .card:nth-child(4) .card-body{
  border-left-color:var(--blue);
}

#block-3 .card h2{
  margin:0 0 8px;
  color:var(--navy);
  font-size:21px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.025em;
}

#block-3 .card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.46;
  font-weight:500;
}

#block-3 .card p + p{
  margin-top:8px;
}

#block-3 .bridge{
  max-width:920px;
  margin-top:18px;
  padding:16px 18px;
  border-radius:14px;
  border:1px solid #cbddec;
  background:linear-gradient(90deg,#edf5fd,#f7fbff);
  color:var(--navy);
  font-size:17px;
  line-height:1.42;
  font-weight:750;
}

#block-3 .closing{
  max-width:820px;
  margin:18px 0 0;
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.56;
}

#block-3 .keep-going{
  max-width:820px;
  margin:14px 0 0;
  color:var(--blue);
  font-size:15px;
  line-height:1.45;
  font-weight:750;
}

#block-3 .cta{
  width:min(430px,100%);
  min-height:62px;
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border-radius:10px;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,#0f6ca3,#0a5690 38%,#083f80 100%);
  box-shadow:0 12px 26px rgba(8,53,105,.18);
  font-size:18px;
  line-height:1;
  font-weight:800;
  letter-spacing:.025em;
  text-transform:uppercase;
}

#block-3 .cta i{
  font-size:23px;
}

@media (max-width:980px){
  #block-3 .content{
    width:100%;
    padding:34px 24px 30px;
  }

  #block-3 .cells{
    position:relative;
    width:100%;
    height:auto;
  }

  #block-3 .cells img{
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center;
  }

  #block-3 .cells::after{
    background:linear-gradient(180deg,rgba(247,250,253,.08),rgba(247,250,253,0) 18%);
  }

  #block-3 .top{
    grid-template-columns:1fr;
    max-width:100%;
  }

  #block-3 .pillars-heading{
    margin-top:0;
    max-width:420px;
  }

  #block-3 .cards{
    max-width:100%;
  }
}

@media (max-width:680px){
  #block-3 .content{
    padding:28px 18px 26px;
  }

  #block-3 h1{
    font-size:43px;
  }

  #block-3 .subhead{
    font-size:27px;
  }

  #block-3 .cards{
    grid-template-columns:1fr;
  }

  #block-3 .card{
    min-height:0;
    grid-template-columns:64px 1fr;
    padding:18px;
  }

  #block-3 .card-icon{
    width:60px;
    height:60px;
    font-size:26px;
  }

  #block-3 .card h2{
    font-size:19px;
  }

  #block-3 .closing{
    font-size:16px;
  }

  #block-3 .cta{
    width:100%;
  }
}

#block-3{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

@media (max-width: 720px){
  #block-3{
    width:100% !important;
    max-width:100% !important;
  }
}

/* odd = white, even = gray; background stretched full viewport width */
#block-3{
  background:
  linear-gradient(#ffffff,#ffffff) center / 100vw 100% no-repeat !important;
}

#block-3 .cells img{
  object-position:right center !important;
}

/* ===== Block 3: full-width white section + white 4-sided image blend ===== */
#block-3{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:#ffffff !important;
}

/* White variation of the reusable image blend */
#block-3 .image-blend-white{
  --blend-rgb:255,255,255;
  background:#ffffff !important;
}

/* Keep the cell artwork anchored firmly to the right */
#block-3 .cells.image-blend-white{
  right:0 !important;
}

#block-3 .cells.image-blend-white > img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:right center !important;
}

/*
Same approved fade proportions as Block 2,
but using white instead of #F1F6FA.
*/
#block-3 .cells.image-blend-white::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
  /* LEFT — pulled outward so more image is visible */
  linear-gradient(
  90deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.88) 4%,
  rgba(255,255,255,.58) 9%,
  rgba(255,255,255,.28) 14%,
  rgba(255,255,255,.08) 19%,
  rgba(255,255,255,0) 24%
  ),
  /* RIGHT — pushed farther inward to hide the hard image edge */
  linear-gradient(
  270deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.90) 5%,
  rgba(255,255,255,.62) 10%,
  rgba(255,255,255,.34) 15%,
  rgba(255,255,255,.12) 20%,
  rgba(255,255,255,0) 25%
  ),
  /* TOP */
  linear-gradient(
  180deg,
  rgba(255,255,255,.78) 0%,
  rgba(255,255,255,.36) 4%,
  rgba(255,255,255,.10) 8%,
  rgba(255,255,255,0) 13%
  ),
  /* BOTTOM */
  linear-gradient(
  0deg,
  rgba(255,255,255,.86) 0%,
  rgba(255,255,255,.48) 5%,
  rgba(255,255,255,.16) 10%,
  rgba(255,255,255,0) 16%
  ) !important;
}

@media (max-width:980px){
  #block-3 .cells.image-blend-white::after{
    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.46) 7%,
    rgba(255,255,255,0) 15%
    ),
    linear-gradient(
    0deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.38) 7%,
    rgba(255,255,255,0) 15%
    ),
    linear-gradient(
    90deg,
    rgba(255,255,255,.60) 0%,
    rgba(255,255,255,.18) 7%,
    rgba(255,255,255,0) 14%
    ),
    linear-gradient(
    270deg,
    rgba(255,255,255,.60) 0%,
    rgba(255,255,255,.18) 7%,
    rgba(255,255,255,0) 14%
    ) !important;
  }
}

/* ===== Block 3 correction: centered block, full-viewport white background ===== */
#block-3{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
  background:transparent !important;
  position:relative !important;
  isolation:isolate;
}

/* White background extends edge-to-edge, while Block 3 itself remains centered. */
#block-3::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:#ffffff;
  z-index:-1;
  pointer-events:none;
}

/* Right-side cell image stays attached to the centered Block 3 container. */
#block-3 .cells{
  right:0 !important;
}

/* Keep all existing content positioning inside the centered block. */
#block-3 .content{
  position:relative;
  z-index:2;
}

/* Blocks 1–3 now inherit their background from the full-width band. */
.section-band > #block-3{
  background:transparent !important;
}

/* Remove the earlier Block 3 viewport-background workaround.
The section-band now handles this correctly. */
#block-3::before{
  display:none !important;
}

/* Block 3 had its own old one-sided fade. The reusable overlay replaces it. */
#block-3 .cells.image-blend::after{
  background:
  linear-gradient(
  90deg,
  rgba(var(--blend-rgb),1) 0%,
  rgba(var(--blend-rgb),.88) 4%,
  rgba(var(--blend-rgb),.58) 9%,
  rgba(var(--blend-rgb),.28) 14%,
  rgba(var(--blend-rgb),.08) 19%,
  rgba(var(--blend-rgb),0) 24%
  ),
  linear-gradient(
  270deg,
  rgba(var(--blend-rgb),1) 0%,
  rgba(var(--blend-rgb),.90) 5%,
  rgba(var(--blend-rgb),.62) 10%,
  rgba(var(--blend-rgb),.34) 15%,
  rgba(var(--blend-rgb),.12) 20%,
  rgba(var(--blend-rgb),0) 25%
  ),
  linear-gradient(
  180deg,
  rgba(var(--blend-rgb),.78) 0%,
  rgba(var(--blend-rgb),.36) 4%,
  rgba(var(--blend-rgb),.10) 8%,
  rgba(var(--blend-rgb),0) 13%
  ),
  linear-gradient(
  0deg,
  rgba(var(--blend-rgb),.86) 0%,
  rgba(var(--blend-rgb),.48) 5%,
  rgba(var(--blend-rgb),.16) 10%,
  rgba(var(--blend-rgb),0) 16%
  ) !important;
}

/* Right-align the image inside Block 3. */
#block-3 .cells{
  right:0 !important;
}

#block-3 .cells > img{
  object-position:right center !important;
}

@media(max-width:980px){
  #block-3 .cells.image-blend::after{
    background:
    linear-gradient(
    180deg,
    rgba(var(--blend-rgb),.92) 0%,
    rgba(var(--blend-rgb),.46) 7%,
    rgba(var(--blend-rgb),0) 15%
    ),
    linear-gradient(
    0deg,
    rgba(var(--blend-rgb),.88) 0%,
    rgba(var(--blend-rgb),.38) 7%,
    rgba(var(--blend-rgb),0) 15%
    ),
    linear-gradient(
    90deg,
    rgba(var(--blend-rgb),.60) 0%,
    rgba(var(--blend-rgb),.18) 7%,
    rgba(var(--blend-rgb),0) 14%
    ),
    linear-gradient(
    270deg,
    rgba(var(--blend-rgb),.60) 0%,
    rgba(var(--blend-rgb),.18) 7%,
    rgba(var(--blend-rgb),0) 14%
    ) !important;
  }
}

.section-band.section-bg-white > #block-3{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:transparent !important;
}

/* The image is attached to the centered block and reaches
completely from the top divider to the bottom divider. */
#block-3 .cells.image-blend-white{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:auto !important;
  width:50% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#fff !important;
}

/* Image fills the container edge-to-edge and stays aligned right. */
#block-3 .cells.image-blend-white > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  object-fit:cover !important;
  object-position:right center !important;
}

/*
Block 3 white image blend:
- starts farther left because the image container is wider
- left transition is more gradual, removing the sharp fade
- right edge remains strongly blended
- top/bottom fades are intentionally very shallow so the image
still visually reaches the divider lines
*/
#block-3 .cells.image-blend-white::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
  /* LEFT — wider, smoother transition farther to the left */
  linear-gradient(
  90deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.96) 5%,
  rgba(255,255,255,.82) 11%,
  rgba(255,255,255,.62) 17%,
  rgba(255,255,255,.40) 23%,
  rgba(255,255,255,.22) 29%,
  rgba(255,255,255,.08) 34%,
  rgba(255,255,255,0) 39%
  ),
  /* TOP — very shallow so image reaches the divider */
  linear-gradient(
  180deg,
  rgba(255,255,255,.34) 0%,
  rgba(255,255,255,.12) 2%,
  rgba(255,255,255,0) 5%
  ),
  /* BOTTOM — very shallow so image reaches the divider */
  linear-gradient(
  0deg,
  rgba(255,255,255,.34) 0%,
  rgba(255,255,255,.12) 2%,
  rgba(255,255,255,0) 5%
  ) !important;
}

/* Ensure Block 3 copy remains above the image/fade. */
#block-3 .content{
  position:relative !important;
  z-index:2 !important;
}

@media(max-width:980px){
  #block-3 .cells.image-blend-white{
    width:100% !important;
  }

  #block-3 .cells.image-blend-white::after{
    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.48) 8%,
    rgba(255,255,255,0) 17%
    ),
    linear-gradient(
    0deg,
    rgba(255,255,255,.50) 0%,
    rgba(255,255,255,.18) 4%,
    rgba(255,255,255,0) 9%
    ),
    linear-gradient(
    90deg,
    rgba(255,255,255,.58) 0%,
    rgba(255,255,255,.18) 8%,
    rgba(255,255,255,0) 16%
    ),
    linear-gradient(
    270deg,
    rgba(255,255,255,.58) 0%,
    rgba(255,255,255,.18) 8%,
    rgba(255,255,255,0) 16%
    ) !important;
  }
}

/* ==================================================================
BLOCK 3 ONLY
Cell image becomes the section background so it reaches the
top and bottom separators with no vertical gap.
Blocks 1 and 2 are intentionally untouched.
================================================================== */
#block-3{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
  min-height:100vh !important;
  position:relative !important;
  overflow:hidden !important;
  /* image fills the full Block 3 height and stays on the right */
  background:
  var(--lp-img-block-03-01-jpg)
  right center / 50% 100% no-repeat !important;
}

/* The original image element is no longer needed because the image
is now the full-height section background. */
#block-3 .cells{
  display:none !important;
}

/* White blend over the background image.
No top/bottom fade, so the image reaches both separators.
Left fade is gradual; right fade hides the hard image edge. */
#block-3::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
  /* LEFT — smoother and farther left */
  linear-gradient(
  90deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,1) 38%,
  rgba(255,255,255,.96) 42%,
  rgba(255,255,255,.82) 47%,
  rgba(255,255,255,.60) 52%,
  rgba(255,255,255,.36) 57%,
  rgba(255,255,255,.16) 62%,
  rgba(255,255,255,.04) 66%,
  rgba(255,255,255,0) 70%
  ),
  /* RIGHT — blend the hard edge back into white */
  linear-gradient(
  270deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.90) 3%,
  rgba(255,255,255,.62) 7%,
  rgba(255,255,255,.34) 11%,
  rgba(255,255,255,.12) 15%,
  rgba(255,255,255,0) 20%
  ) !important;
}

/* Keep all Block 3 content above the background and fade. */
#block-3 .content{
  position:relative !important;
  z-index:2 !important;
}

@media(max-width:980px){
  #block-3{
    background:
    var(--lp-img-block-03-01-jpg)
    center bottom / 100% 52% no-repeat !important;
  }

  #block-3::after{
    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 46%,
    rgba(255,255,255,.92) 52%,
    rgba(255,255,255,.62) 59%,
    rgba(255,255,255,.28) 66%,
    rgba(255,255,255,.06) 72%,
    rgba(255,255,255,0) 78%
    ),
    linear-gradient(
    90deg,
    rgba(255,255,255,.50) 0%,
    rgba(255,255,255,.12) 6%,
    rgba(255,255,255,0) 12%
    ),
    linear-gradient(
    270deg,
    rgba(255,255,255,.50) 0%,
    rgba(255,255,255,.12) 6%,
    rgba(255,255,255,0) 12%
    ) !important;
  }
}

/* Remove the previous section-background image approach. */
#block-3{
  background:transparent !important;
}

/* Use the existing cells container as a true full-height image layer. */
#block-3 .cells{
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:50% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:
  var(--lp-img-block-03-01-jpg)
  right center / cover no-repeat !important;
}

/* Hide the nested image because the container itself now carries
the image from top separator to bottom separator. */
#block-3 .cells > img{
  display:none !important;
}

/* White overlay on the image itself.
No top/bottom fade, so the artwork physically reaches both dividers. */
#block-3 .cells::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
  /* LEFT — smooth, gradual entry from white */
  linear-gradient(
  90deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.92) 4%,
  rgba(255,255,255,.72) 10%,
  rgba(255,255,255,.48) 16%,
  rgba(255,255,255,.28) 22%,
  rgba(255,255,255,.12) 28%,
  rgba(255,255,255,.03) 34%,
  rgba(255,255,255,0) 40%
  ),
  /* RIGHT — remove hard outer image edge */
  linear-gradient(
  270deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.88) 4%,
  rgba(255,255,255,.56) 9%,
  rgba(255,255,255,.28) 14%,
  rgba(255,255,255,.08) 19%,
  rgba(255,255,255,0) 24%
  ) !important;
}

/* Disable the section-level overlay from the previous version. */
#block-3::after{
  display:none !important;
}

/* Content stays above the image layer. */
#block-3 .content{
  position:relative !important;
  z-index:2 !important;
}

@media(max-width:980px){
  #block-3 .cells{
    top:52% !important;
    bottom:0 !important;
    width:100% !important;
    height:auto !important;
    background-position:center center !important;
  }

  #block-3 .cells::after{
    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.88) 8%,
    rgba(255,255,255,.48) 16%,
    rgba(255,255,255,.14) 24%,
    rgba(255,255,255,0) 32%
    ),
    linear-gradient(
    90deg,
    rgba(255,255,255,.48) 0%,
    rgba(255,255,255,.10) 7%,
    rgba(255,255,255,0) 14%
    ),
    linear-gradient(
    270deg,
    rgba(255,255,255,.48) 0%,
    rgba(255,255,255,.10) 7%,
    rgba(255,255,255,0) 14%
    ) !important;
  }
}

/* ==================================================================
BLOCK 3 ONLY — eliminate separator gap
The global scroll animation was translating the whole section down
before it became visible, which exposed white above the image.
Keep Block 3 fixed to its section edges so the image always touches
both the top and bottom separators.
================================================================== */
body.page-enhanced #block-3,
body.page-enhanced #block-3:not(.section-visible),
body.page-enhanced #block-3.section-visible{
  transform:none !important;
}

/* Reassert exact edge-to-edge image positioning inside Block 3. */
#block-3 .cells{
  top:0 !important;
  bottom:0 !important;
  height:auto !important;
}

/* ==================================================================
BLOCK 3 ONLY — TRUE EDGE-TO-EDGE RIGHT IMAGE
The source image has been cropped to remove its built-in white
top/bottom strips. This image layer is independent of .content.
================================================================== */
#block-3{
  position:relative !important;
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
  overflow:hidden !important;
  background:transparent !important;
}

/* Absolute image layer: exactly the section's top and bottom edges. */
#block-3 .cells{
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:50% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  background:none !important;
}

/* The cropped image physically fills the layer from top to bottom. */
#block-3 .cells > img{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:cover !important;
  object-position:right center !important;
  transform:none !important;
}

/* No section-level image or fade from previous iterations. */
#block-3::after,
#block-3::before{
  display:none !important;
}

/* Only left/right white blending. NO top/bottom fade at all. */
#block-3 .cells::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
  /* LEFT — gradual transition into white */
  linear-gradient(
  90deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.94) 5%,
  rgba(255,255,255,.78) 11%,
  rgba(255,255,255,.56) 18%,
  rgba(255,255,255,.34) 25%,
  rgba(255,255,255,.16) 32%,
  rgba(255,255,255,.05) 38%,
  rgba(255,255,255,0) 44%
  ),
  /* RIGHT — soften the hard outer edge */
  linear-gradient(
  270deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.88) 4%,
  rgba(255,255,255,.56) 9%,
  rgba(255,255,255,.28) 14%,
  rgba(255,255,255,.08) 19%,
  rgba(255,255,255,0) 24%
  ) !important;
}

/* Content remains completely independent of the image layer. */
#block-3 .content{
  position:relative !important;
  z-index:2 !important;
}

/* Do not vertically translate Block 3; its image must stay flush
with both separators at every scroll state. */
body.page-enhanced #block-3,
body.page-enhanced #block-3:not(.section-visible),
body.page-enhanced #block-3.section-visible{
  transform:none !important;
}

@media(max-width:980px){
  #block-3 .cells{
    top:52% !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
  }

  #block-3 .cells::after{
    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.86) 8%,
    rgba(255,255,255,.48) 16%,
    rgba(255,255,255,.14) 24%,
    rgba(255,255,255,0) 32%
    ),
    linear-gradient(
    90deg,
    rgba(255,255,255,.42) 0%,
    rgba(255,255,255,.10) 7%,
    rgba(255,255,255,0) 14%
    ),
    linear-gradient(
    270deg,
    rgba(255,255,255,.42) 0%,
    rgba(255,255,255,.10) 7%,
    rgba(255,255,255,0) 14%
    ) !important;
  }
}

/* ========================================================================
   BLOCK 4
   ======================================================================== */

/* ===== Block 4 source styles ===== */
#block-4{
  --navy: #06184a;
  --blue: #0b4f95;
  --blue-2: #0e5fae;
  --blue-3: #146fbc;
  --blue-soft: #edf4fd;
  --line: #dce6f0;
  --ink: #16233c;
  --muted: #4f6077;
  --white: #ffffff;
  --shadow: 0 12px 26px rgba(8, 31, 73, 0.08);
  --shadow-lg: 0 16px 30px rgba(8, 31, 73, 0.14);
  --radius: 22px;
}

#block-4,
#block-4 *{
  box-sizing: border-box;
}

#block-4{
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #eef3f8;
  color: var(--ink);
}

#block-4{
  width: min(1280px, 100%);
  margin: 0 auto;
  min-height: 100vh;
  background:
  radial-gradient(circle at 100% 12%, rgba(14,95,174,.08), transparent 16rem),
  linear-gradient(135deg, #ffffff 0%, #f3f7fb 42%, #eef4fa 100%);
  position: relative;
  overflow: hidden;
}

#block-4 .visual{
  position: absolute;
  top: 0;
  right: 0;
  width: 48%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background: #eaf2fa;
}

#block-4 .visual img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

#block-4 .visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
  linear-gradient(90deg, rgba(244,248,252,.98) 0%, rgba(244,248,252,.52) 17%, rgba(244,248,252,0) 34%),
  radial-gradient(circle at 62% 18%, rgba(255,255,255,.28), transparent 12rem);
}

#block-4 .content{
  position: relative;
  z-index: 2;
  width: min(82%, 1040px);
  padding: 44px 34px 42px 50px;
}

#block-4 h1{
  margin: 0;
  color: var(--navy);
  font-size: clamp(46px, 5.8vw, 76px);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 800;
  max-width: 620px;
}

#block-4 .subhead{
  margin-top: 10px;
  color: var(--blue);
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 750;
}

#block-4 .intro{
  margin-top: 18px;
  max-width: 650px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.42;
  font-weight: 500;
}

#block-4 .explain{
  margin-top: 12px;
  max-width: 660px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.48;
}

#block-4 .section-title{
  margin: 22px 0 14px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}

#block-4 .cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 750px;
}

#block-4 .card{
  min-height: 225px;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#block-4 .num{
  position: absolute;
  top: 16px;
  left: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(145deg, #0d86ad, #0b5b99);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

#block-4 .icon-wrap{
  width: 86px;
  height: 86px;
  margin-top: 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #edf3fb, #dde8f7);
  color: var(--navy);
  font-size: 42px;
}

#block-4 .card h3{
  margin: 16px 0 10px;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.025em;
}

#block-4 .divider{
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #25a0c8, #0b5b99);
  margin: 0 0 12px;
}

#block-4 .card p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}

#block-4 .close-copy{
  margin: 16px 0 0;
  max-width: 760px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.47;
  font-weight: 500;
}

#block-4 .metrics{
  width: min(100%, 1040px);
  max-width: 1040px;
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.92);
}

#block-4 .metric{
  padding: 18px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 94px;
  border-right: 1px solid #cfdcea;
}

#block-4 .metric:last-child{
  border-right: 0;
}

#block-4 .metric-icon{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 24px;
  flex: 0 0 auto;
  background: linear-gradient(145deg, #fbfdff, #f1f7fe);
}

#block-4 .metric.active .metric-icon{
  border-color: transparent;
  color: #fff;
  background: linear-gradient(145deg, #0d86ad, #0b5b99);
}

#block-4 .metric span{
  color: var(--navy);
  font-size: 17px;
  line-height: 1.18;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -.02em;
}

#block-4 .highlight{
  max-width: 980px;
  margin-top: 16px;
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  border-radius: 18px;
  border: 1px solid #d8e4f0;
  background: linear-gradient(180deg, #ecf3fb, #e7f0fa);
  box-shadow: 0 8px 20px rgba(8, 31, 73, 0.05);
  overflow: hidden;
}

#block-4 .highlight-icon{
  min-height: 104px;
  display: grid;
  place-items: center;
  border-right: 1px solid #cfdceb;
}

#block-4 .highlight-icon .circle{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 27px;
  background: linear-gradient(145deg, #0d4f95, #072e73);
  box-shadow: 0 10px 20px rgba(8, 31, 73, 0.16);
}

#block-4 .highlight p{
  margin: 0;
  padding: 22px 26px;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.34;
  font-weight: 800;
  letter-spacing: -.01em;
}

#block-4 .highlight p .accent{
  color: #0d698f;
}

#block-4 .cta{
  width: min(560px, 100%);
  min-height: 72px;
  margin: 18px auto 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #0f6c99, #075f8d 30%, #074b83 100%);
  box-shadow: var(--shadow-lg);
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}

#block-4 .cta i{
  font-size: 28px;
  line-height: 1;
}

@media (max-width: 1100px){
  #block-4 .visual{
    width: 46%;
  }

  #block-4 .content{
    width: min(72%, 760px);
    padding: 38px 24px 36px 28px;
  }

  #block-4 .cards{
    gap: 12px;
  }

  #block-4 .metric{
    padding: 16px 14px;
  }
}

@media (max-width: 900px){
  #block-4{
    min-height: auto;
  }

  #block-4 .visual{
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  #block-4 .visual img{
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: center center;
  }

  #block-4 .visual::after{
    background: linear-gradient(180deg, rgba(244,248,252,.10), rgba(244,248,252,0) 20%);
  }

  #block-4 .content{
    width: 100%;
    padding: 30px 20px 28px;
  }

  #block-4 .cards{
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  #block-4 .card{
    min-height: 0;
  }

  #block-4 .metrics{
    grid-template-columns: 1fr 1fr;
  }

  #block-4 .highlight{
    grid-template-columns: 86px 1fr;
  }

  #block-4 .highlight-icon{
    min-height: 100%;
  }
}

@media (max-width: 560px){
  #block-4 h1{
    font-size: 42px;
  }

  #block-4 .subhead{
    font-size: 28px;
  }

  #block-4 .intro{
    font-size: 16px;
  }

  #block-4 .metrics{
    grid-template-columns: 1fr;
  }

  #block-4 .metric span{
    white-space: normal;
  }

  #block-4 .metric{
    border-right: 0;
    border-bottom: 1px solid #cfdcea;
  }

  #block-4 .metric:last-child{
    border-bottom: 0;
  }

  #block-4 .highlight{
    grid-template-columns: 1fr;
  }

  #block-4 .highlight-icon{
    border-right: 0;
    border-bottom: 1px solid #cfdceb;
    padding: 16px 0;
  }

  #block-4 .highlight p{
    padding: 18px;
    font-size: 15px;
  }

  #block-4 .cta{
    font-size: 18px;
    min-height: 62px;
  }
}

#block-4{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

@media (max-width: 720px){
  #block-4{
    width:100% !important;
    max-width:100% !important;
  }
}

#block-4{
  background:
  linear-gradient(#eef3f8,#eef3f8) center / 100vw 100% no-repeat !important;
}

#block-4 .visual img{
  object-position:right center !important;
}

#block-4 .visual::after{
  background:
  linear-gradient(90deg, rgba(238,243,248,.98) 0%, rgba(238,243,248,.56) 17%, rgba(238,243,248,0) 34%),
  radial-gradient(circle at 62% 18%, rgba(255,255,255,.24), transparent 12rem) !important;
}

/* keep even sections feeling full-width and intentional */
#block-4{
  border-top:1px solid rgba(11,122,163,.05);
  border-bottom:1px solid rgba(11,122,163,.05);
}

.block-4-band > #block-4{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
  position:relative !important;
  overflow:hidden !important;
  background:transparent !important;
}

/* Right image stays attached to the centered Block 4 container. */
#block-4 .visual.image-blend-gray{
  --blend-rgb:241,246,250;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:100% !important;
  background:#F1F6FA !important;
}

/* Keep image aligned to the right. */
#block-4 .visual.image-blend-gray > img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:right center !important;
}

/* Same approved four-sided gray blend used on Block 2. */
#block-4 .visual.image-blend-gray::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
  /* LEFT */
  linear-gradient(
  90deg,
  rgba(241,246,250,1) 0%,
  rgba(241,246,250,.88) 4%,
  rgba(241,246,250,.58) 9%,
  rgba(241,246,250,.28) 14%,
  rgba(241,246,250,.08) 19%,
  rgba(241,246,250,0) 24%
  ),
  /* RIGHT */
  linear-gradient(
  270deg,
  rgba(241,246,250,1) 0%,
  rgba(241,246,250,.90) 5%,
  rgba(241,246,250,.62) 10%,
  rgba(241,246,250,.34) 15%,
  rgba(241,246,250,.12) 20%,
  rgba(241,246,250,0) 25%
  ),
  /* TOP */
  linear-gradient(
  180deg,
  rgba(241,246,250,.78) 0%,
  rgba(241,246,250,.36) 4%,
  rgba(241,246,250,.10) 8%,
  rgba(241,246,250,0) 13%
  ),
  /* BOTTOM */
  linear-gradient(
  0deg,
  rgba(241,246,250,.86) 0%,
  rgba(241,246,250,.48) 5%,
  rgba(241,246,250,.16) 10%,
  rgba(241,246,250,0) 16%
  ) !important;
}

/* Ensure old Block 4 gradient rules cannot put white back over the photo. */
#block-4 .visual.image-blend-gray::before{
  display:none !important;
}

#block-4 .content{
  position:relative !important;
  z-index:2 !important;
}

@media(max-width:900px){
  #block-4 .visual.image-blend-gray::after{
    background:
    linear-gradient(
    180deg,
    rgba(241,246,250,.92) 0%,
    rgba(241,246,250,.46) 7%,
    rgba(241,246,250,0) 15%
    ),
    linear-gradient(
    0deg,
    rgba(241,246,250,.88) 0%,
    rgba(241,246,250,.38) 7%,
    rgba(241,246,250,0) 15%
    ),
    linear-gradient(
    90deg,
    rgba(241,246,250,.60) 0%,
    rgba(241,246,250,.18) 7%,
    rgba(241,246,250,0) 14%
    ),
    linear-gradient(
    270deg,
    rgba(241,246,250,.60) 0%,
    rgba(241,246,250,.18) 7%,
    rgba(241,246,250,0) 14%
    ) !important;
  }
}

/* ==================================================================
BLOCK 4 ONLY — EDGE-TO-EDGE RIGHT IMAGE
Image touches the exact top and bottom edges of Block 4.
================================================================== */
#block-4{
  position:relative !important;
  overflow:hidden !important;
}

/* True full-height image layer; content padding cannot affect it. */
#block-4 .visual.image-blend-gray{
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:48% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  background:#F1F6FA !important;
}

/* Cropped image fills the layer from top border to bottom border. */
#block-4 .visual.image-blend-gray > img{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:cover !important;
  object-position:right center !important;
  transform:none !important;
}

/* No top/bottom fade — image remains visible right to both separators.
Keep only the approved gray left/right blend. */
#block-4 .visual.image-blend-gray::after{
  content:"";
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
  /* LEFT */
  linear-gradient(
  90deg,
  rgba(241,246,250,1) 0%,
  rgba(241,246,250,.88) 4%,
  rgba(241,246,250,.58) 9%,
  rgba(241,246,250,.28) 14%,
  rgba(241,246,250,.08) 19%,
  rgba(241,246,250,0) 24%
  ) !important;
}

/* Disable any old extra overlay. */
#block-4 .visual.image-blend-gray::before{
  display:none !important;
}

/* Content remains above the image layer. */
#block-4 .content{
  position:relative !important;
  z-index:2 !important;
}

/* Prevent the global entrance animation from creating a temporary gap. */
body.page-enhanced #block-4,
body.page-enhanced #block-4:not(.section-visible),
body.page-enhanced #block-4.section-visible{
  transform:none !important;
}

@media(max-width:900px){
  #block-4 .visual.image-blend-gray{
    top:52% !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
  }

  #block-4 .visual.image-blend-gray::after{
    background:
    linear-gradient(
    180deg,
    rgba(241,246,250,1) 0%,
    rgba(241,246,250,.84) 8%,
    rgba(241,246,250,.46) 16%,
    rgba(241,246,250,.12) 24%,
    rgba(241,246,250,0) 32%
    ),
    linear-gradient(
    90deg,
    rgba(241,246,250,.42) 0%,
    rgba(241,246,250,.10) 7%,
    rgba(241,246,250,0) 14%
    ),
    linear-gradient(
    270deg,
    rgba(241,246,250,.42) 0%,
    rgba(241,246,250,.10) 7%,
    rgba(241,246,250,0) 14%
    ) !important;
  }
}

/* ========================================================================
   BLOCK 5
   ======================================================================== */

/* ===== Block 5 source styles ===== */
#block-5{
  --navy:#06184a;
  --blue:#0b4f95;
  --blue-2:#0e5fae;
  --teal-blue:#0b7aa3;
  --aqua:#38a8c9;
  --soft:#edf4fb;
  --soft-2:#f7fbff;
  --line:#dbe6f1;
  --ink:#18253f;
  --muted:#56667e;
  --white:#ffffff;
  --shadow:0 14px 30px rgba(8,31,73,.09);
  --shadow-lg:0 20px 46px rgba(8,31,73,.14);
}

#block-5,
#block-5 *{
  box-sizing:border-box
}

#block-5{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#eef3f8;
  color:var(--ink);
}

#block-5{
  width:min(1280px,100%);
  min-height:100vh;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  background:
  var(--lp-img-block-5-png) right top / auto 50% no-repeat;
}

#block-5::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
  90deg,
  rgba(247,251,255,1) 0%,
  rgba(247,251,255,1) 32%,
  rgba(247,251,255,.98) 42%,
  rgba(247,251,255,.88) 50%,
  rgba(247,251,255,.68) 58%,
  rgba(247,251,255,.40) 66%,
  rgba(247,251,255,.16) 74%,
  rgba(247,251,255,0) 82%
  );
}

#block-5::after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:0;
  height:54%;
  pointer-events:none;
  background:linear-gradient(
  0deg,
  rgba(247,251,255,1) 0%,
  rgba(247,251,255,1) 26%,
  rgba(247,251,255,.97) 42%,
  rgba(247,251,255,.82) 58%,
  rgba(247,251,255,.48) 70%,
  rgba(247,251,255,.16) 80%,
  rgba(247,251,255,0) 88%
  );
}

#block-5 .content{
  position:relative;
  z-index:2;
  width:min(1220px,calc(100% - 44px));
  margin:0 auto;
  padding:34px 0 28px;
}

#block-5 h1{
  margin:0;
  max-width:760px;
  color:var(--navy);
  font-size:clamp(44px,5vw,68px);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.055em;
}

#block-5 .subhead{
  margin:14px 0 0;
  max-width:760px;
  color:var(--muted);
  font-size:18px;
  line-height:1.45;
  font-weight:500;
}

#block-5 .cases{
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
}

#block-5 .case-card{
  position:relative;
  padding:40px 16px 18px;
  border:1px solid rgba(219,230,241,.95);
  border-radius:24px;
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow-lg);
}

#block-5 .case-tab{
  position:absolute;
  top:-11px;
  left:16px;
  min-height:42px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:12px 12px 10px 10px;
  color:#fff;
  background:linear-gradient(180deg,#0d4f95,#062f73);
  box-shadow:0 8px 18px rgba(8,31,73,.18);
  font-size:15px;
  line-height:1;
  font-weight:800;
  letter-spacing:.015em;
  text-transform:uppercase;
}

#block-5 .case-tab .icon{
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(37,183,211,.20);
  border:1px solid rgba(84,209,230,.5);
  color:#65d4e9;
  font-size:12px;
}

#block-5 .graph-panel{
  padding:14px 14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 7px 20px rgba(8,31,73,.045);
}

#block-5 .graphs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

#block-5 .graph{
  min-width:0;
  text-align:center;
}

#block-5 .graph-title{
  margin-bottom:8px;
  color:#111;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
}

#block-5 .graph img{
  width:100%;
  height:auto;
  /* Graph assets are 600x300 (2:1). This was 3/2 for the old
  600x400 placeholder; object-fit:cover then scaled the image
  up to fill the too-tall box and cropped it left and right. */
  aspect-ratio:2 / 1;
  display:block;
  object-fit:contain;
  border:1px solid #e1e7ee;
  background:#f0f2f4;
}

#block-5 .case-copy{
  padding:14px 8px 0;
  text-align:center;
  color:#111;
}

#block-5 .case-copy h2{
  margin:0;
  font-size:18px;
  line-height:1.15;
  font-weight:800;
}

#block-5 .case-copy p{
  margin:5px 0 0;
  font-size:13px;
  line-height:1.35;
  font-weight:650;
}

#block-5 .case-copy .result{
  margin-top:10px;
  color:#111;
  font-size:16px;
  line-height:1.3;
  font-weight:800;
}

#block-5 .case-copy .note{
  margin-top:5px;
  font-size:12px;
  line-height:1.25;
  font-style:italic;
  font-weight:700;
}

#block-5 .quote{
  font-style:italic;
  font-weight:750;
}

#block-5 .closing{
  margin-top:20px;
  min-height:86px;
  display:grid;
  grid-template-columns:92px 1fr 1px minmax(260px,.7fr);
  align-items:center;
  gap:20px;
  padding:15px 22px;
  border-radius:18px;
  border:1px solid #d7e4ef;
  background:linear-gradient(90deg,#e8f1fb,#edf6fc);
  box-shadow:0 10px 26px rgba(8,31,73,.06);
}

#block-5 .closing-icon{
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  justify-self:center;
  color:#fff;
  background:linear-gradient(145deg,#0b4f95,#052c70);
  font-size:25px;
  box-shadow:0 10px 20px rgba(8,31,73,.16);
}

#block-5 .closing-main{
  color:var(--navy);
  font-size:22px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.02em;
}

#block-5 .closing-main span{
  color:var(--teal-blue);
}

#block-5 .divider{
  width:1px;
  height:46px;
  background:#8cc7df;
}

#block-5 .measurement{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--navy);
  font-size:14px;
  line-height:1.35;
  font-weight:600;
}

#block-5 .measurement-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:2px solid var(--teal-blue);
  color:var(--teal-blue);
  background:#f7fbff;
  font-size:18px;
}

@media (max-width:980px){
  #block-5{
    background:
    var(--lp-img-block-03-01-jpg) center bottom / cover no-repeat;
  }

  #block-5::before{
    background:linear-gradient(
    180deg,
    rgba(247,251,255,1) 0%,
    rgba(247,251,255,.98) 56%,
    rgba(247,251,255,.82) 70%,
    rgba(247,251,255,.44) 82%,
    rgba(247,251,255,0) 96%
    );
  }

  #block-5::after{
    height:50%;
    background:linear-gradient(
    0deg,
    rgba(247,251,255,1) 0%,
    rgba(247,251,255,1) 30%,
    rgba(247,251,255,.95) 46%,
    rgba(247,251,255,.76) 62%,
    rgba(247,251,255,.42) 74%,
    rgba(247,251,255,.14) 84%,
    rgba(247,251,255,0) 92%
    );
  }

  #block-5 .cases{
    grid-template-columns:1fr;
  }

  #block-5 .closing{
    grid-template-columns:72px 1fr;
  }

  #block-5 .divider{
    display:none;
  }

  #block-5 .measurement{
    grid-column:1 / -1;
    padding-left:72px;
  }
}

@media (max-width:620px){
  #block-5 .content{
    width:min(100% - 24px,1220px);
    padding:28px 0 24px;
  }

  #block-5 h1{
    font-size:42px;
  }

  #block-5 .subhead{
    font-size:16px;
  }

  #block-5 .graphs{
    grid-template-columns:1fr;
  }

  #block-5 .case-card{
    padding-left:12px;
    padding-right:12px;
  }

  #block-5 .closing{
    grid-template-columns:56px 1fr;
    gap:14px;
    padding:14px;
  }

  #block-5 .closing-icon{
    width:48px;
    height:48px;
    font-size:21px;
  }

  #block-5 .closing-main{
    font-size:18px;
  }

  #block-5 .measurement{
    padding-left:0;
    font-size:13px;
  }
}

#block-5{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

@media (max-width: 720px){
  #block-5{
    width:100% !important;
    max-width:100% !important;
  }
}

/* odd = white, even = gray; background stretched full viewport width */
#block-5{
  background:
  linear-gradient(#ffffff,#ffffff) center / 100vw 100% no-repeat !important;
}

/* block-specific image sections that need the background image retained */
#block-5{
  background:
  linear-gradient(#ffffff,#ffffff) center / 100vw 100% no-repeat,
  var(--lp-img-block-03-01-jpg) right -30% / 45% no-repeat !important;
}

.block-5-band > #block-5{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
  position:relative !important;
  overflow:hidden !important;
  /* Retain the existing Block 5 cell artwork over a true white base. */
  background:
  var(--lp-img-block-5-png)
  right top / auto 50% no-repeat,
  #FFFFFF !important;
}

/* Match the left-to-right image fade to the white odd-section background. */
#block-5::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
  90deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,1) 32%,
  rgba(255,255,255,.98) 42%,
  rgba(255,255,255,.88) 50%,
  rgba(255,255,255,.68) 58%,
  rgba(255,255,255,.40) 66%,
  rgba(255,255,255,.16) 74%,
  rgba(255,255,255,0) 82%
  ) !important;
}

/* Match the bottom fade to the same white background. */
#block-5::after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:0;
  height:54%;
  pointer-events:none;
  background:linear-gradient(
  0deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,1) 26%,
  rgba(255,255,255,.97) 42%,
  rgba(255,255,255,.82) 58%,
  rgba(255,255,255,.48) 70%,
  rgba(255,255,255,.16) 80%,
  rgba(255,255,255,0) 88%
  ) !important;
}

#block-5 .content{
  position:relative !important;
  z-index:2 !important;
}

/* Keep the existing left-side fade in #block-5::before.
Replace the old bottom fade with a right-side fade only. */
#block-5::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:22% !important;
  height:auto !important;
  pointer-events:none !important;
  background:linear-gradient(
  270deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.92) 16%,
  rgba(255,255,255,.68) 36%,
  rgba(255,255,255,.42) 56%,
  rgba(255,255,255,.20) 72%,
  rgba(255,255,255,.07) 86%,
  rgba(255,255,255,0) 100%
  ) !important;
}

/* LEFT:
Keep the white content area solid, then transition quickly and
smoothly right where the cell artwork begins. */
#block-5::before{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  inset:0 !important;
  pointer-events:none !important;
  background:linear-gradient(
  90deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,1) 53%,
  rgba(255,255,255,.92) 55%,
  rgba(255,255,255,.68) 58%,
  rgba(255,255,255,.42) 61%,
  rgba(255,255,255,.20) 64%,
  rgba(255,255,255,.07) 67%,
  rgba(255,255,255,0) 70%
  ) !important;
}

/* RIGHT:
Narrower and lighter than before, just enough to remove the hard
image edge without washing out the cells. */
#block-5::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:11% !important;
  height:auto !important;
  pointer-events:none !important;
  background:linear-gradient(
  270deg,
  rgba(255,255,255,.88) 0%,
  rgba(255,255,255,.58) 18%,
  rgba(255,255,255,.30) 38%,
  rgba(255,255,255,.12) 58%,
  rgba(255,255,255,.03) 78%,
  rgba(255,255,255,0) 100%
  ) !important;
}

/* LEFT:
Pull the fade farther left and clear it sooner so more of the
cell image stays visible. */
#block-5::before{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  inset:0 !important;
  pointer-events:none !important;
  background:linear-gradient(
  90deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,1) 49%,
  rgba(255,255,255,.90) 51%,
  rgba(255,255,255,.64) 54%,
  rgba(255,255,255,.36) 57%,
  rgba(255,255,255,.16) 60%,
  rgba(255,255,255,.05) 63%,
  rgba(255,255,255,0) 66%
  ) !important;
}

/* RIGHT:
Extend farther left and make the first part more opaque so the
image boundary is fully hidden, then taper smoothly into the photo. */
#block-5::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:17% !important;
  height:auto !important;
  pointer-events:none !important;
  background:linear-gradient(
  270deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.94) 10%,
  rgba(255,255,255,.78) 24%,
  rgba(255,255,255,.54) 40%,
  rgba(255,255,255,.30) 57%,
  rgba(255,255,255,.13) 72%,
  rgba(255,255,255,.04) 86%,
  rgba(255,255,255,0) 100%
  ) !important;
}

/* ==================================================================
BLOCK 5 ONLY — image geometry
The artwork now lives in .block-5-visual (same element pattern as
Blocks 2/3/4) because a cropped image needs its own clipping box --
#block-5::before / ::after are already used by the left + right
white fades and must not be redeclared here.
================================================================== */
.block-5-band > #block-5{
  background:#FFFFFF !important;
}

/* Flush to the top edge of the section (i.e. hard against the
.section-bridge divider) and pinned to the right at 50% width.
Stretched top:0 -> bottom:0 so it spans the full section height. */
#block-5 .block-5-visual{
  position:absolute !important;
  z-index:0 !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  bottom:0 !important;
  width:50% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

/* Fills the full-height box; cover crops the sides rather than distort. */
#block-5 .block-5-visual > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:right center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* Dissolve the crop line so the 50% cut does not read as a hard edge. */
#block-5 .block-5-visual::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:26% !important;
  pointer-events:none !important;
  background:linear-gradient(
  0deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.92) 14%,
  rgba(255,255,255,.72) 30%,
  rgba(255,255,255,.44) 50%,
  rgba(255,255,255,.20) 70%,
  rgba(255,255,255,.06) 86%,
  rgba(255,255,255,0) 100%
  ) !important;
}

/* ==================================================================
BLOCKS 3 / 4 / 5 — right-edge fade removed
The 270deg layer is gone from Block 3's and Block 4's blend overlays
(desktop only -- the stacked <=980/900px layouts keep their symmetric
edge softening, where the image is full width, not a right image).
Block 5's right fade was a standalone #block-5::after.
================================================================== */
#block-5::after{
  display:none !important;
}

/* Full height: the layer now stretches top:0 -> bottom:0, so the image
meets the section-bridge at both ends. object-fit:cover crops instead
of distorting. The crop-line fade goes with it -- a bottom fade would
defeat the point of reaching the lower bridge. */
#block-5 .block-5-visual::after{
  display:none !important;
}

/* ========================================================================
   BLOCK 6
   ======================================================================== */

/* ===== Block 6 source styles ===== */
#block-6{
  --navy:#06184a;
  --blue:#0b4f95;
  --blue-2:#0e5fae;
  --teal-blue:#0b7aa3;
  --aqua:#38a8c9;
  --line:#dbe6f1;
  --soft:#eef5fc;
  --soft-2:#f7fbff;
  --ink:#17233b;
  --muted:#53637b;
  --white:#ffffff;
  --shadow:0 12px 28px rgba(8,31,73,.08);
  --shadow-lg:0 22px 48px rgba(8,31,73,.14);
}

#block-6,
#block-6 *{
  box-sizing:border-box
}

#block-6{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#eef3f8;
  color:var(--ink);
}

#block-6{
  width:min(1280px,100%);
  min-height:100vh;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#fff 0%,#f3f8fd 52%,#e6f0f8 100%);
}

#block-6::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
  90deg,
  rgba(247,251,255,1) 0%,
  rgba(247,251,255,1) 34%,
  rgba(247,251,255,.98) 45%,
  rgba(247,251,255,.88) 56%,
  rgba(247,251,255,.60) 66%,
  rgba(247,251,255,.26) 76%,
  rgba(247,251,255,0) 86%
  );
}

#block-6 .wrap{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,58%) minmax(360px,42%);
  align-items:stretch;
  background:
  var(--lp-img-block-6-png) 100% 58% / 50% auto no-repeat;
}

#block-6 .content{
  position:relative;
  padding:42px 46px 36px 50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#fff;
}

#block-6 .content::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:-170px;
  width:200px;
  pointer-events:none;
  background:linear-gradient(
  90deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.96) 20%,
  rgba(255,255,255,.82) 40%,
  rgba(255,255,255,.58) 60%,
  rgba(255,255,255,.30) 78%,
  rgba(255,255,255,.10) 90%,
  rgba(255,255,255,0) 100%
  );
}

#block-6 h1{
  margin:0;
  max-width:720px;
  color:var(--navy);
  font-size:clamp(40px,5vw,62px);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.015em;
}

#block-6 .intro{
  margin:18px 0 0;
  max-width:700px;
  color:var(--ink);
  font-size:17px;
  line-height:1.45;
  font-weight:500;
}

#block-6 .section-title{
  margin-top:26px;
  color:var(--teal-blue);
  font-size:21px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.02em;
}

#block-6 .bullets{
  margin-top:12px;
  max-width:700px;
  display:grid;
  gap:10px;
}

#block-6 .bullet{
  min-height:58px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  gap:12px;
  padding:9px 16px 9px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow);
}

#block-6 .bullet-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(145deg,var(--teal-blue),#0b5a93);
  font-size:15px;
  box-shadow:0 8px 16px rgba(8,76,118,.14);
}

#block-6 .bullet span{
  color:var(--navy);
  font-size:16px;
  line-height:1.3;
  font-weight:750;
  letter-spacing:-.01em;
}

#block-6 .closing{
  margin-top:24px;
  max-width:700px;
  min-height:90px;
  display:grid;
  grid-template-columns:92px 1fr;
  align-items:center;
  gap:18px;
  border:1px solid #d3e3ef;
  border-radius:18px;
  background:linear-gradient(90deg,#eaf3fb,#f4f9fd);
  box-shadow:0 10px 26px rgba(8,31,73,.06);
}

#block-6 .closing-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  justify-self:center;
  color:#fff;
  background:linear-gradient(145deg,#0b4f95,#052c70);
  font-size:25px;
  box-shadow:0 10px 20px rgba(8,31,73,.16);
}

#block-6 .closing-copy{
  color:var(--navy);
  font-size:21px;
  line-height:1.28;
  font-weight:800;
  letter-spacing:-.02em;
}

#block-6 .closing-copy .accent{
  color:var(--teal-blue);
}

#block-6 .visual{
  position:relative;
  min-height:100vh;
  background:transparent;
  overflow:hidden;
}

#block-6 .visual::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:none;
}

@media (max-width:980px){
  #block-6{
    background:linear-gradient(135deg,#fff 0%,#f3f8fd 52%,#e6f0f8 100%);
  }

  #block-6::before{
    background:linear-gradient(
    180deg,
    rgba(247,251,255,1) 0%,
    rgba(247,251,255,.98) 60%,
    rgba(247,251,255,.76) 74%,
    rgba(247,251,255,.32) 88%,
    rgba(247,251,255,0) 100%
    );
  }

  #block-6 .wrap{
    grid-template-columns:1fr;
    background:
    var(--lp-img-block-6-png) center bottom / cover no-repeat;
  }

  #block-6 .content{
    padding:34px 24px 20px;
    background:linear-gradient(
    180deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.98) 72%,
    rgba(255,255,255,.72) 86%,
    rgba(255,255,255,0) 100%
    );
  }

  #block-6 .visual{
    min-height:420px;
    background:transparent;
  }
}

@media (max-width:640px){
  #block-6 .content{
    padding:28px 18px 18px;
  }

  #block-6 h1{
    font-size:40px;
  }

  #block-6 .intro{
    font-size:15px;
  }

  #block-6 .section-title{
    font-size:18px;
  }

  #block-6 .bullet{
    grid-template-columns:34px 1fr;
    padding:8px 12px 8px 8px;
  }

  #block-6 .bullet-icon{
    width:30px;
    height:30px;
    font-size:13px;
  }

  #block-6 .bullet span{
    font-size:14px;
  }

  #block-6 .closing{
    grid-template-columns:62px 1fr;
    padding:12px 14px;
  }

  #block-6 .closing-icon{
    width:50px;
    height:50px;
    font-size:21px;
  }

  #block-6 .closing-copy{
    font-size:17px;
  }

  #block-6 .visual{
    min-height:340px;
    background:transparent;
  }
}

#block-6{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

@media (max-width: 720px){
  #block-6{
    width:100% !important;
    max-width:100% !important;
  }
}

#block-6{
  background:
  linear-gradient(#eef3f8,#eef3f8) center / 100vw 100% no-repeat !important;
}

#block-6 .wrap{
  background-position:right 58% !important;
}

#block-6::before{
  background:linear-gradient(
  90deg,
  rgba(238,243,248,1) 0%,
  rgba(238,243,248,1) 34%,
  rgba(238,243,248,.98) 45%,
  rgba(238,243,248,.88) 56%,
  rgba(238,243,248,.60) 66%,
  rgba(238,243,248,.26) 76%,
  rgba(238,243,248,0) 86%
  ) !important;
}

#block-6 .content{
  background:linear-gradient(
  90deg,
  rgba(238,243,248,1) 0%,
  rgba(238,243,248,1) 72%,
  rgba(238,243,248,.86) 84%,
  rgba(238,243,248,.18) 94%,
  rgba(238,243,248,0) 100%
  ) !important;
}

#block-6 .content::after{
  background:linear-gradient(
  90deg,
  rgba(238,243,248,1) 0%,
  rgba(238,243,248,.96) 20%,
  rgba(238,243,248,.82) 40%,
  rgba(238,243,248,.58) 60%,
  rgba(238,243,248,.30) 78%,
  rgba(238,243,248,.10) 90%,
  rgba(238,243,248,0) 100%
  ) !important;
}

/* keep even sections feeling full-width and intentional */
#block-6{
  border-top:1px solid rgba(11,122,163,.05);
  border-bottom:1px solid rgba(11,122,163,.05);
}

.block-6-band > #block-6{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
  position:relative !important;
  overflow:hidden !important;
  background:transparent !important;
}

/* This sat at z-index:1, i.e. UNDER .wrap (z-index:2) and therefore
under the image, so it never faded the photo -- it only tinted the
bare band near-white. Off, so the band reads as flat gray. */
#block-6::before{
  background:none !important;
}

/* LEFT EDGE:
The image is 50% wide and right-anchored, so its left edge lands at
50% of the wrap -- inside the 58% copy column. .content paints below
its own text, so it is the only layer that can cover that edge
without washing out the copy. Solid across the whole column. */
#block-6 .content{
  background:#F1F6FA !important;
}

/* Carries the fade past the copy column and out over the photo.
Holds full opacity through the column edge before tapering, so
there is no step where .content stops. */
#block-6 .content::after{
  background:linear-gradient(
  90deg,
  rgba(241,246,250,1) 0%,
  rgba(241,246,250,1) 18%,
  rgba(241,246,250,.90) 30%,
  rgba(241,246,250,.68) 46%,
  rgba(241,246,250,.42) 62%,
  rgba(241,246,250,.20) 78%,
  rgba(241,246,250,.06) 90%,
  rgba(241,246,250,0) 100%
  ) !important;
}

/* RIGHT EDGE: fades right-to-left so the photo dissolves into the band
instead of stopping dead at the section edge. z-index:3 to clear
.wrap; it only covers the empty visual column, never the copy. */
#block-6::after{
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:12% !important;
  pointer-events:none !important;
  background:linear-gradient(
  270deg,
  rgba(241,246,250,1) 0%,
  rgba(241,246,250,.90) 20%,
  rgba(241,246,250,.62) 40%,
  rgba(241,246,250,.34) 60%,
  rgba(241,246,250,.12) 80%,
  rgba(241,246,250,0) 100%
  ) !important;
}

@media (min-width:981px){
  #block-6 .wrap{
    background-size:auto 100% !important;
    background-position:right center !important;
  }
}

/* ========================================================================
   BLOCK 7
   ======================================================================== */

#block-7 #selected-benefits:empty::after{
  content:"Your selections from the first section will appear here.";
  display:block;
  padding:18px 0;
  color:#456183;
  font-size:15px;
  font-weight:600;
}

#block-7 #selected-benefits li{
  animation:selectedOutcomeIn .34s ease both;
}

@media(prefers-reduced-motion:reduce){
  #block-7 #selected-benefits li{
    transition:none!important;animation:none!important;transform:none!important
  }
}

/* ===== Block 7 source styles ===== */
#block-7{
  --navy:#071b57;
  --teal:#0b7aa3;
  --teal-2:#0a648c;
  --teal-soft:#eaf6f8;
  --blue:#2c6fd8;
  --line:#d8e5f1;
  --muted:#456183;
  --white:#ffffff;
  --panel:rgba(255,255,255,.94);
  --shadow:0 14px 32px rgba(7,27,87,.08);
}

#block-7,
#block-7 *{
  box-sizing:border-box;
}

#block-7{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#eef3f8;
  color:var(--navy);
}

#block-7{
  width:min(1400px,100%);
  min-height:100vh;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  background:#f8fbff;
}

#block-7::after{
  content:"";
  position:absolute;
  inset:0 0 0 47%;
  z-index:0;
  background:
  var(--lp-img-block-7-jpg) 62% center / cover no-repeat;
}

#block-7::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
  90deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,1) 43%,
  rgba(255,255,255,.97) 48%,
  rgba(255,255,255,.82) 54%,
  rgba(255,255,255,.52) 61%,
  rgba(255,255,255,.20) 68%,
  rgba(255,255,255,0) 75%
  );
}

#block-7 .content{
  position:relative;
  z-index:2;
  width:min(1280px,calc(100% - 56px));
  margin:0 auto;
  padding:36px 0 34px;
}

#block-7 .left{
  width:min(56%,760px);
}

#block-7 .top-icon{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(11,122,163,.08);
  color:var(--teal);
  font-size:31px;
  box-shadow:0 8px 18px rgba(11,122,163,.08);
}

#block-7 h1{
  margin:20px 0 0;
  max-width:570px;
  color:var(--navy);
  font-size:clamp(50px,5.2vw,76px);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.055em;
}

#block-7 .subhead{
  margin:16px 0 0;
  max-width:520px;
  color:var(--teal);
  font-size:25px;
  line-height:1.25;
  font-weight:500;
  letter-spacing:-.025em;
}

#block-7 .results-card{
  margin-top:24px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow);
  backdrop-filter:blur(7px);
}

#block-7 .selected-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  min-height:62px;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  color:var(--navy);
  font-size:15px;
  line-height:1.35;
  font-weight:600;
}

#block-7 .selected-row .rotate{
  color:var(--teal);
  font-size:22px;
  margin-right:2px;
}

#block-7 .selected-row strong{
  font-weight:800;
}

#block-7 .selected-row .selected-value{
  color:var(--teal);
  font-weight:800;
}

#block-7 .benefits{
  list-style:none;
  margin:0;
  padding:0 20px;
}

#block-7 .benefits li{
  min-height:58px;
  display:grid;
  grid-template-columns:28px 30px 1fr;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
}

#block-7 .benefits li:last-child{
  border-bottom:0;
}

#block-7 .check{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  font-size:13px;
  box-shadow:0 6px 12px rgba(11,122,163,.16);
}

#block-7 .benefit-icon{
  color:var(--teal);
  font-size:20px;
  text-align:center;
}

#block-7 .benefit-text{
  color:var(--navy);
  font-size:16px;
  line-height:1.3;
  font-weight:500;
  letter-spacing:-.01em;
}

#block-7 .always-card{
  margin-top:18px;
  padding:8px 18px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow);
  backdrop-filter:blur(7px);
}

#block-7 .always-title{
  width:max-content;
  max-width:100%;
  padding:5px 10px;
  border-radius:8px;
  background:rgba(11,122,163,.06);
  color:var(--teal);
  font-size:13px;
  line-height:1;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

#block-7 .always-row{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  align-items:center;
  gap:14px;
}

#block-7 .always-item{
  display:grid;
  grid-template-columns:40px 1fr;
  align-items:center;
  gap:10px;
  color:var(--navy);
  font-size:15px;
  font-weight:500;
}

#block-7 .always-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--teal-soft);
  color:var(--teal);
  font-size:16px;
}

#block-7 .always-divider{
  width:1px;
  height:34px;
  background:var(--line);
}

#block-7 .statement{
  margin-top:18px;
  min-height:88px;
  display:grid;
  grid-template-columns:78px 1fr;
  align-items:center;
  gap:16px;
  padding:14px 22px;
  border:1px solid rgba(216,229,241,.9);
  border-radius:18px;
  background:rgba(244,249,253,.88);
  box-shadow:0 10px 22px rgba(7,27,87,.05);
  backdrop-filter:blur(5px);
}

#block-7 .statement-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  justify-self:center;
  border-radius:50%;
  color:var(--teal);
  background:rgba(11,122,163,.07);
  font-size:31px;
}

#block-7 .statement-text{
  color:var(--navy);
  font-size:23px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.02em;
}

@media (max-width:1050px){
  #block-7::after{
    inset:52% 0 0 0;
    background-position:center 35%;
  }

  #block-7::before{
    background:linear-gradient(
    180deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 52%,
    rgba(255,255,255,.90) 62%,
    rgba(255,255,255,.56) 72%,
    rgba(255,255,255,.16) 84%,
    rgba(255,255,255,0) 100%
    );
  }

  #block-7 .content{
    width:min(100% - 32px,1280px);
    padding-bottom:470px;
  }

  #block-7 .left{
    width:100%;
    max-width:760px;
  }
}

@media (max-width:700px){
  #block-7 .content{
    width:min(100% - 20px,1280px);
    padding:24px 0 360px;
  }

  #block-7 .top-icon{
    width:58px;
    height:58px;
    font-size:27px;
  }

  #block-7 h1{
    margin-top:16px;
    font-size:44px;
  }

  #block-7 .subhead{
    margin-top:14px;
    font-size:19px;
  }

  #block-7 .results-card{
    margin-top:18px;
  }

  #block-7 .selected-row{
    padding:12px 14px;
    font-size:13px;
  }

  #block-7 .benefits{
    padding:0 14px;
  }

  #block-7 .benefits li{
    min-height:54px;
    grid-template-columns:26px 26px 1fr;
    gap:9px;
  }

  #block-7 .check{
    width:24px;
    height:24px;
    font-size:12px;
  }

  #block-7 .benefit-icon{
    font-size:18px;
  }

  #block-7 .benefit-text{
    font-size:14px;
  }

  #block-7 .always-card{
    padding:8px 12px 12px;
  }

  #block-7 .always-title{
    font-size:11px;
  }

  #block-7 .always-row{
    grid-template-columns:1fr;
    gap:10px;
  }

  #block-7 .always-divider{
    display:none;
  }

  #block-7 .always-item{
    grid-template-columns:34px 1fr;
    font-size:14px;
  }

  #block-7 .always-icon{
    width:30px;
    height:30px;
  }

  #block-7 .statement{
    grid-template-columns:48px 1fr;
    padding:12px 14px;
  }

  #block-7 .statement-icon{
    width:40px;
    height:40px;
    font-size:24px;
  }

  #block-7 .statement-text{
    font-size:18px;
  }
}

#block-7{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

@media (max-width: 720px){
  #block-7{
    width:100% !important;
    max-width:100% !important;
  }
}

/* odd = white, even = gray; background stretched full viewport width */
#block-7{
  background:
  linear-gradient(#ffffff,#ffffff) center / 100vw 100% no-repeat !important;
}

#block-7::after{
  background-position:right center !important;
}

/* THE BUG: Block 7 is the only block that uses ::after for its image
(inset:0 0 0 47%, no height -- top/bottom do the sizing). The global
.landing-section::after separator declares height:1px, and because
the ID rule never declares height at all, that 1px wins by default.
An absolutely positioned box with top, bottom AND height all set is
over-constrained, so bottom is dropped and the photo collapsed to a
1px sliver at the top of the section. height:auto restores it.
Not re-declaring inset here on purpose -- the <=1050px media query
flips it to inset:52% 0 0 0 and must stay free to do so. */
#block-7::after{
  height:auto !important;
}

/* Full-width white, same wrapper Block 1 and the other odd blocks use. */
.section-band.section-bg-white > #block-7{
  background:transparent !important;
}

/* ========================================================================
   BLOCK 8
   ======================================================================== */

/* ===== Block 8 source styles ===== */
#block-8{
  --navy:#06184a;
  --blue:#0b4f95;
  --teal:#0b7aa3;
  --aqua:#38a8c9;
  --line:#dbe6f1;
  --ink:#17233b;
  --muted:#586983;
  --white:#ffffff;
  --page:#f7fbff;
  --shadow:0 12px 28px rgba(8,31,73,.09);
}

#block-8,
#block-8 *{
  box-sizing:border-box
}

#block-8{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#eef3f8;
  color:var(--ink);
}

#block-8{
  width:min(1280px,100%);
  min-height:100vh;
  margin:0 auto;
  background:
  radial-gradient(circle at 100% 0%,rgba(56,168,201,.05),transparent 22rem),
  linear-gradient(135deg,#fff 0%,#f9fcff 100%);
}

#block-8 .content{
  width:min(1200px,calc(100% - 48px));
  margin:0 auto;
  padding:38px 0 46px;
}

#block-8 h1{
  margin:0;
  color:var(--navy);
  font-size:clamp(44px,5vw,66px);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.055em;
}

#block-8 .subhead{
  margin:12px 0 0;
  color:var(--navy);
  font-size:19px;
  line-height:1.4;
  font-weight:500;
}

#block-8 .testimonial-grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

#block-8 .testimonial{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow);
}

#block-8 .media{
  padding:13px 13px 0;
}

#block-8 .media img{
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  display:block;
  object-fit:cover;
  border-radius:14px;
  background:#eceff2;
}

#block-8 .body{
  padding:14px 16px 20px;
}

#block-8 .name{
  margin:0;
  color:var(--navy);
  font-size:22px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.025em;
}

#block-8 .meta{
  margin-top:5px;
  color:var(--muted);
  font-size:14px;
  line-height:1.3;
  font-weight:500;
}

#block-8 .quote{
  margin:12px 0 0;
  color:var(--navy);
  font-size:16px;
  line-height:1.45;
  font-weight:500;
}

@media (max-width:960px){
  #block-8 .testimonial-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:640px){
  #block-8 .content{
    width:min(100% - 24px,1200px);
    padding:28px 0 34px;
  }

  #block-8 h1{
    font-size:40px;
  }

  #block-8 .subhead{
    font-size:17px;
  }

  #block-8 .testimonial-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  #block-8 .name{
    font-size:20px;
  }

  #block-8 .quote{
    font-size:15px;
  }
}

#block-8{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

@media (max-width: 720px){
  #block-8{
    width:100% !important;
    max-width:100% !important;
  }
}

#block-8{
  background:
  linear-gradient(#eef3f8,#eef3f8) center / 100vw 100% no-repeat !important;
}

/* keep even sections feeling full-width and intentional */
#block-8{
  border-top:1px solid rgba(11,122,163,.05);
  border-bottom:1px solid rgba(11,122,163,.05);
}

/* ==================================================================
BLOCK 8 ONLY — full-width gray band
Mirrors Block 2 exactly: the section itself goes edge-to-edge and
transparent, the band paints #F1F6FA, and #block-8 .content keeps
centering the copy at min(1200px, 100% - 48px).
This also retires the old 100vw-gradient fake-full-width hack
(#block-8,#block-12 at ~line 3619) for Block 8 -- that one painted
#eef3f8, a different gray from the band, and would have banded.
================================================================== */
.section-band.section-bg-gray > #block-8{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:transparent !important;
}

/* ========================================================================
   BLOCK 9
   ======================================================================== */

/* ===== Block 9 source styles ===== */
#block-9{
  --navy:#06184a;
  --blue:#0b4f95;
  --teal:#0b7aa3;
  --aqua:#38a8c9;
  --line:#dbe6f1;
  --soft:#eef5fb;
  --ink:#17233b;
  --muted:#52637c;
  --white:#ffffff;
  --bar:#0c6577;
  --bar-dark:#07515f;
  --shadow:0 10px 24px rgba(8,31,73,.08);
}

#block-9,
#block-9 *{
  box-sizing:border-box
}

#block-9{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#eef3f8;
  color:var(--ink);
}

#block-9{
  width:min(1280px,100%);
  min-height:100vh;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  background:
  var(--lp-img-block-9-jpg) right center / 78% auto no-repeat,
  linear-gradient(135deg,#fff 0%,#f4f9fd 55%,#eaf3fa 100%);
}

#block-9::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
  90deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,1) 36%,
  rgba(255,255,255,.98) 46%,
  rgba(255,255,255,.88) 54%,
  rgba(255,255,255,.58) 62%,
  rgba(255,255,255,.22) 70%,
  rgba(255,255,255,0) 78%
  );
}

#block-9 .content{
  position:relative;
  z-index:2;
  width:min(1220px,calc(100% - 48px));
  margin:0 auto;
  padding:34px 0 210px;
}

#block-9 .left{
  width:min(52%,650px);
}

#block-9 h1{
  margin:0;
  max-width:620px;
  color:var(--navy);
  font-size:clamp(50px,5.7vw,78px);
  line-height:.95;
  font-weight:800;
  letter-spacing:-.06em;
}

#block-9 .list{
  margin-top:24px;
  display:grid;
  gap:0;
  max-width:620px;
}

#block-9 .item{
  display:grid;
  grid-template-columns:88px 1fr;
  align-items:center;
  min-height:84px;
  border-bottom:1px solid #d8e1ea;
}

#block-9 .item:last-child{
  border-bottom:0;
}

#block-9 .icon-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

#block-9 .icon{
  position:relative;
  width:64px;
  height:64px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--teal);
  background:rgba(235,246,249,.94);
  border:1px solid rgba(195,225,233,.9);
  font-size:28px;
}

#block-9 .icon.not::before,
#block-9 .icon.not::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:76%;
  height:4px;
  border-radius:999px;
  background: rgba(71, 0, 0, 0.26);
  transform-origin:center center;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
}

#block-9 .icon.not::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

#block-9 .icon.not::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

#block-9 .copy{
  padding:14px 0 14px 16px;
  color:var(--navy);
  font-size:20px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.015em;
}

#block-9 .copy .accent{
  color:var(--teal);
  font-weight:800;
}

#block-9 .footer-flow{
  position:absolute;
  z-index:3;
  left:24px;
  right:24px;
  bottom:-30px;
}

#block-9 .transition-message{
  margin:18px auto 0;
  width:min(520px, 58%);
  padding:16px 22px;
  text-align:center;
  color:var(--navy);
  font-size:22px;
  line-height:1.38;
  font-weight:600;
  letter-spacing:-.025em;
  border:1px solid rgba(255,255,255,.72);
  border-radius:18px;
  background:rgba(255,255,255,.84);
  box-shadow:0 12px 26px rgba(8,31,73,.10);
  backdrop-filter:blur(6px);
}

#block-9 .transition-message .accent{
  color:var(--teal);
  font-weight:800;
}

#block-9 .bottom-bar{
  position:relative;
  z-index:3;
  left:auto;
  right:auto;
  bottom:auto;
  min-height:96px;
  display:grid;
  grid-template-columns:72px minmax(0,1.35fr) 1px 72px minmax(0,.8fr);
  align-items:center;
  gap:18px;
  padding:14px 26px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(90deg,var(--bar-dark),var(--bar));
  box-shadow:0 14px 30px rgba(4,43,55,.18);
}

#block-9 .bar-icon{
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  justify-self:center;
  color:var(--aqua);
  font-size:27px;
}

#block-9 .bar-main{
  font-size:18px;
  line-height:1.3;
  font-weight:800;
}

#block-9 .bar-main .accent{
  display:block;
  margin-top:3px;
  color:#45c2d7;
}

#block-9 .divider{
  width:1px;
  height:58px;
  background:rgba(104,207,224,.75);
}

#block-9 .bar-right{
  font-size:18px;
  line-height:1.35;
  font-weight:800;
}

@media (max-width:980px){
  #block-9{
    background:
    var(--lp-img-block-9-jpg) center bottom / 100% auto no-repeat,
    linear-gradient(135deg,#fff 0%,#f4f9fd 55%,#eaf3fa 100%);
  }

  #block-9::before{
    background:linear-gradient(
    180deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.99) 55%,
    rgba(255,255,255,.86) 67%,
    rgba(255,255,255,.42) 78%,
    rgba(255,255,255,0) 88%
    );
  }

  #block-9 .content{
    padding-bottom:650px;
  }

  #block-9 .footer-flow{
    left:18px;
    right:18px;
    bottom:18px;
  }

  #block-9 .transition-message{
    margin-top:16px;
    width:min(460px, 68%);
    padding:14px 18px;
    font-size:20px;
  }

  #block-9 .left{
    width:100%;
  }

  #block-9 .bottom-bar{
    grid-template-columns:58px 1fr;
    row-gap:8px;
  }

  #block-9 .divider{
    display:none;
  }

  #block-9 .bar-right{
    grid-column:2;
  }
}

@media (max-width:640px){
  #block-9 .content{
    width:min(100% - 24px,1220px);
    padding:28px 0 560px;
  }

  #block-9 h1{
    font-size:46px;
  }

  #block-9 .item{
    grid-template-columns:64px 1fr;
    min-height:74px;
  }

  #block-9 .icon{
    width:52px;
    height:52px;
    font-size:22px;
  }

  #block-9 .icon.not::before,
  #block-9 .icon.not::after{
    height:3px;
  }

  #block-9 .copy{
    padding-left:12px;
    font-size:16px;
  }

  #block-9 .bottom-bar{
    left:auto;
    right:auto;
    bottom:auto;
    padding:14px;
    grid-template-columns:48px 1fr;
  }

  #block-9 .footer-flow{
    left:0;
    right:0;
    bottom:12px;
  }

  #block-9 .transition-message{
    margin-top:14px;
    width:min(92%, 360px);
    padding:12px 14px;
    font-size:17px;
    line-height:1.4;
  }

  #block-9 .bar-icon{
    width:44px;
    height:44px;
    font-size:22px;
  }

  #block-9 .bar-main,
  #block-9 .bar-right{
    font-size:15px;
  }
}

#block-9{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

@media (max-width: 720px){
  #block-9{
    width:100% !important;
    max-width:100% !important;
  }
}

/* odd = white, even = gray; background stretched full viewport width */
#block-9{
  background:
  linear-gradient(#ffffff,#ffffff) center / 100vw 100% no-repeat !important;
}

#block-9{
  background:
  linear-gradient(#ffffff,#ffffff) center / 100vw 100% no-repeat,
  var(--lp-img-block-9-jpg) right center / 78% auto no-repeat !important;
}

/* THE BUG: the "stretched full viewport width" hack painted an opaque
white layer as the FIRST background layer:
linear-gradient(#ffffff,#ffffff) center / 100vw 100% no-repeat,
var(--lp-img-block-9-jpg) ...
In the background shorthand the first layer paints ON TOP, so that
solid white rectangle covered the photo completely -- it was loading
the whole time, just hidden. The real band now supplies the white,
so the section carries the image and nothing else.

Full height: auto 100% makes the height the driver, so the photo
meets the section-bridge at the top AND bottom. The asset is
895x976 (0.917), so at a ~100vh section the width lands near 79% --
effectively where the old width-driven 78% had it, which keeps the
existing ::before left fade (clears at 78%) correctly tuned. */
.section-band.section-bg-white > #block-9{
  background:
  var(--lp-img-block-9-jpg)
  right center / auto 100% no-repeat !important;
}

@media (max-width:980px){
  .section-band.section-bg-white > #block-9{
    background:
    var(--lp-img-block-9-jpg)
    center bottom / 100% auto no-repeat !important;
  }
}

/* ========================================================================
   BLOCK 10
   ======================================================================== */

/* ===== Block 10 source styles ===== */
#block-10{
  --navy:#071b57;
  --teal:#0b7aa3;
  --teal-dark:#08688d;
  --teal-soft:#eaf6f8;
  --cyan:#38a8c9;
  --line:#d7e4ee;
  --text:#17233f;
  --white:#ffffff;
  --shadow:0 12px 28px rgba(7,27,87,.08);
}

#block-10,
#block-10 *{
  box-sizing:border-box
}

#block-10{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#eef3f8;
  color:var(--text);
}

#block-10{
  width:min(1400px,100%);
  margin:0 auto;
  overflow:hidden;
  background:
  linear-gradient(135deg,#fff 0%,#f7fbff 60%,#edf5fb 100%);
}

#block-10 .content{
  width:min(1280px,calc(100% - 56px));
  margin:0 auto;
  padding:24px 0 18px;
}

#block-10 .top-grid{
  display:grid;
  grid-template-columns:minmax(0,65%) minmax(340px,35%);
  gap:28px;
  align-items:start;
}

#block-10 h1{
  margin:0;
  color:var(--navy);
  font-size:clamp(52px,5.4vw,76px);
  line-height:.94;
  font-weight:800;
  letter-spacing:-.058em;
}

#block-10 h1 .accent{
  color:var(--teal);
}

#block-10 .instructions{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:0 28px;
  align-items:start;
}

#block-10 .divider{
  width:1px;
  height:100%;
  background:var(--line);
}

#block-10 .column{
  display:grid;
}

#block-10 .step{
  min-height:78px;
  display:grid;
  grid-template-columns:78px 1fr;
  gap:14px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

#block-10 .step:last-child{
  border-bottom:none;
}

#block-10 .icon-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

#block-10 .icon-circle{
  width:60px;
  height:60px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--teal);
  background:var(--teal-soft);
  border:1px solid rgba(11,122,163,.18);
  font-size:27px;
  font-weight:800;
}

#block-10 .fraction{
  font-size:27px;
  letter-spacing:-.08em;
}

#block-10 .step-copy{
  color:var(--navy);
  font-size:18px;
  line-height:1.28;
  font-weight:700;
  letter-spacing:-.02em;
}

#block-10 .step-copy .accent{
  color:var(--teal);
}

#block-10 .product-visual{
  position:relative;
  min-height:500px;
  overflow:hidden;
  border-radius:0 0 0 24px;
  background:
  linear-gradient(90deg,rgba(247,251,255,.82) 0%,rgba(247,251,255,.28) 12%,rgba(247,251,255,0) 22%),
  var(--lp-img-block-10-jpg) 54% center / cover no-repeat;
}

#block-10 .product-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
  180deg,
  rgba(255,255,255,.04) 0%,
  rgba(255,255,255,0) 65%,
  rgba(255,255,255,.18) 100%
  );
}

#block-10 .cost-card{
  margin-top:16px;
  min-height:138px;
  display:grid;
  grid-template-columns:150px 1fr 1px 190px;
  gap:18px;
  align-items:center;
  padding:16px 22px;
  border:1px solid rgba(56,168,201,.50);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow);
}

#block-10 .cost-icon{
  width:114px;
  height:114px;
  border-radius:50%;
  display:grid;
  place-items:center;
  justify-self:center;
  position:relative;
  overflow:hidden;
  color:#fff;
  background:var(--navy);
  font-size:52px;
}

#block-10 .cost-icon::after{
  content:"";
  position:absolute;
  width:150%;
  height:4px;
  background:var(--cyan);
  transform:rotate(-45deg);
}

#block-10 .cost-copy{
  color:var(--navy);
  font-size:27px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.03em;
}

#block-10 .cost-copy .accent{
  color:var(--teal);
}

#block-10 .cost-copy .sub{
  display:block;
  margin-top:6px;
  font-size:22px;
  line-height:1.2;
  font-weight:500;
}

#block-10 .cost-divider{
  width:1px;
  height:94px;
  background:rgba(56,168,201,.55);
  justify-self:center;
}

#block-10 .savings{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--teal);
}

#block-10 .savings i{
  font-size:58px;
}

#block-10 .savings .dollar{
  width:44px;
  height:44px;
  border:3px solid var(--teal);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:26px;
  font-weight:800;
}

#block-10 .quote{
  margin-top:10px;
  text-align:center;
  color:var(--navy);
  font-size:30px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.025em;
}

#block-10 .quote .mark{
  color:var(--cyan);
  font-size:48px;
  line-height:0;
  vertical-align:middle;
}

#block-10 .bottom-bar{
  width:min(1060px,100%);
  min-height:48px;
  margin:10px auto 0;
  padding:10px 18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#fff;
  background:linear-gradient(90deg,var(--teal-dark),var(--teal));
  font-size:19px;
  line-height:1.3;
  font-weight:700;
  text-align:center;
}

#block-10 .bottom-bar i{
  color:#dff9ff;
  font-size:22px;
}

@media (max-width:1060px){
  #block-10 .top-grid{
    grid-template-columns:1fr;
  }

  #block-10 .product-visual{
    min-height:360px;
    border-radius:20px;
    background-position:center 45%;
  }

  #block-10 .cost-card{
    grid-template-columns:120px 1fr;
  }

  #block-10 .cost-divider{
    display:none;
  }

  #block-10 .savings{
    grid-column:2;
    justify-content:flex-start;
  }
}

@media (max-width:720px){
  #block-10 .content{
    width:min(100% - 20px,1280px);
    padding:20px 0 16px;
  }

  #block-10 h1{
    font-size:42px;
  }

  #block-10 .instructions{
    grid-template-columns:1fr;
  }

  #block-10 .divider{
    display:none;
  }

  #block-10 .step{
    min-height:66px;
    grid-template-columns:60px 1fr;
    gap:10px;
  }

  #block-10 .icon-circle{
    width:50px;
    height:50px;
    font-size:23px;
  }

  #block-10 .fraction{
    font-size:23px;
  }

  #block-10 .step-copy{
    font-size:16px;
  }

  #block-10 .product-visual{
    min-height:300px;
  }

  #block-10 .cost-card{
    grid-template-columns:1fr;
    text-align:center;
  }

  #block-10 .cost-icon{
    width:86px;
    height:86px;
    font-size:42px;
  }

  #block-10 .cost-copy{
    font-size:21px;
  }

  #block-10 .cost-copy .sub{
    font-size:17px;
  }

  #block-10 .savings{
    grid-column:auto;
    justify-content:center;
  }

  #block-10 .quote{
    font-size:22px;
  }

  #block-10 .bottom-bar{
    border-radius:16px;
    font-size:16px;
  }
}

#block-10{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

@media (max-width: 720px){
  #block-10{
    width:100% !important;
    max-width:100% !important;
  }
}

#block-10{
  background:
  linear-gradient(#eef3f8,#eef3f8) center / 100vw 100% no-repeat !important;
}

#block-10 .product-visual{
  background-position:right center !important;
}

#block-10 .product-visual{
  background:
  linear-gradient(90deg,rgba(238,243,248,.88) 0%,rgba(238,243,248,.38) 14%,rgba(238,243,248,0) 24%),
  var(--lp-img-block-10-jpg) right center / cover no-repeat !important;
}

/* keep even sections feeling full-width and intentional */
#block-10{
  border-top:1px solid rgba(11,122,163,.05);
  border-bottom:1px solid rgba(11,122,163,.05);
}

/* Same wrapper Blocks 2 and 8 use: section goes edge-to-edge and
transparent, band paints #F1F6FA, .content keeps centering the copy.
This retires the 100vw #eef3f8 fake-full-width hack for Block 10 --
that gray differs from the band's and would have banded. */
.section-band.section-bg-gray > #block-10{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:transparent !important;
}

/* Left fade recoloured off #eef3f8 onto the band gray. */
#block-10 .product-visual{
  background:
  linear-gradient(
  90deg,
  rgba(241,246,250,.88) 0%,
  rgba(241,246,250,.38) 14%,
  rgba(241,246,250,0) 24%
  ),
  var(--lp-img-block-10-jpg)
  right center / cover no-repeat !important;
}

@media (min-width:1061px){
  #block-10 .product-visual{
    align-self:stretch !important;
    min-height:0 !important;
    margin-top:-24px !important;
    /* Was -16px, which cancelled .cost-card's margin-top and let the
    photo touch the card. Zero here gives back that 16px gap, so the
    spacing matches the rhythm already used elsewhere in the block. */
    margin-bottom:0 !important;
    /* Bottom-right rounded to 18px = #block-10 .cost-card's radius.
    Bottom-left keeps its existing 24px. */
    border-radius:0 0 18px 24px !important;
    /* Extend right so the photo's right edge lands on Block 9's.
    Block 9's image is flush to #block-9  = min(1400px, 100vw).
    This visual is flush to #block-10 .content = min(1280px, 100vw - 56px).
    Both are centred, so the gap is half the difference. The value is
    negative, which is what pushes the edge outward:
    >=1456px -> -60px      1300px -> -28px      <=1336px -> -28px */
    margin-right:calc(
    (min(1280px, 100vw - 56px) - min(1400px, 100vw)) / 2
    ) !important;
  }
}

/* ========================================================================
   BLOCK 11
   ======================================================================== */

/* ===== Block 11 source styles ===== */
#block-11{
  --navy:#071b57;
  --teal:#0b7aa3;
  --teal-dark:#08688d;
  --teal-soft:#eaf6f8;
  --cyan:#38a8c9;
  --line:#d8e5f0;
  --text:#16233f;
  --shadow:0 12px 28px rgba(7,27,87,.08);
}

#block-11,
#block-11 *{
  box-sizing:border-box
}

#block-11{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#eef3f8;
  color:var(--text);
}

#block-11{
  width:min(1400px,100%);
  margin:0 auto;
  overflow:hidden;
  background:linear-gradient(135deg,#fff 0%,#f7fbff 64%,#eef5fa 100%);
}

#block-11 .content{
  width:min(1280px,calc(100% - 48px));
  margin:0 auto;
  padding:28px 0 26px;
}

#block-11 .top{
  display:grid;
  grid-template-columns:minmax(0,54%) minmax(360px,46%);
  gap:24px;
  align-items:start;
}

#block-11 h1{
  margin:0;
  color:var(--navy);
  font-size:clamp(50px,5.4vw,74px);
  line-height:.95;
  font-weight:800;
  letter-spacing:-.06em;
}

#block-11 .subhead{
  margin:18px 0 0;
  max-width:520px;
  color:var(--navy);
  font-size:24px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.025em;
}

#block-11 .subhead .accent{
  color:var(--teal);font-weight:800
}

#block-11 .product-scene{
  min-height:300px;
  border-radius:0 0 0 22px;
  background:
  linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.22) 13%,rgba(255,255,255,0) 24%),
  var(--lp-img-block-11-jpg) center 52% / cover no-repeat;
}

#block-11 .qa-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

#block-11 .qa-card{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:16px;
  align-items:start;
  min-height:168px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow);
}

#block-11 .qa-card.wide{
  grid-column:1/-1
}

#block-11 .icon-circle{
  width:60px;
  height:60px;
  border-radius:50%;
  display:grid;
  place-items:center;
  justify-self:center;
  background:var(--teal-soft);
  color:var(--teal);
  border:1px solid rgba(11,122,163,.15);
  font-size:27px;
}

#block-11 .qa-title{
  margin:0;
  color:var(--navy);
  font-size:23px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.03em;
}

#block-11 .qa-copy{
  margin-top:8px;
  color:#1e2a3b;
  font-size:16px;
  line-height:1.45;
  font-weight:500;
}

#block-11 .qa-copy .accent{
  color:var(--teal);font-weight:700
}

#block-11 .cost-layout{
  display:grid;
  grid-template-columns:1fr 310px;
  gap:20px;
  align-items:center;
}

#block-11 .cost-copy ul{
  margin:10px 0 0;padding-left:20px
}

#block-11 .cost-copy li{
  margin:6px 0
}

#block-11 .comparison{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  align-items:end;
}

#block-11 .comparison-item{
  min-height:105px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#f8fbfd;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
  color:var(--navy);
  font-size:13px;
  font-weight:700;
}

#block-11 .comparison-item i{
  margin-bottom:7px;color:var(--teal);font-size:30px
}

#block-11 .comparison-item .price{
  display:block;color:var(--teal);font-size:22px;line-height:1;font-weight:800
}

#block-11 .comparison-item.volta{
  color:#fff;
  background:linear-gradient(180deg,var(--teal),var(--teal-dark));
  border-color:transparent;
}

#block-11 .comparison-item.volta i,
#block-11 .comparison-item.volta .price{
  color:#fff
}

#block-11 .closing-bar{
  margin-top:18px;
  min-height:96px;
  display:grid;
  grid-template-columns:88px 1fr;
  gap:18px;
  align-items:center;
  padding:16px 26px;
  border-radius:18px;
  border:1px solid rgba(216,229,240,.9);
  background:
  linear-gradient(90deg,rgba(232,246,248,.98) 0%,rgba(232,246,248,.92) 58%,rgba(232,246,248,.58) 72%,rgba(232,246,248,.08) 100%),
  var(--lp-img-block-03-01-jpg) right 42% / 34% auto no-repeat;
  box-shadow:var(--shadow);
}

#block-11 .closing-icon{
  width:62px;
  height:62px;
  border-radius:50%;
  display:grid;
  place-items:center;
  justify-self:center;
  background:linear-gradient(145deg,var(--teal),var(--teal-dark));
  color:#fff;
  font-size:30px;
}

#block-11 .closing-text{
  max-width:820px;
  color:var(--navy);
  font-size:25px;
  line-height:1.22;
  font-weight:800;
  letter-spacing:-.025em;
}

#block-11 .closing-text .accent{
  color:var(--teal)
}

#block-11 .quote{
  margin-top:12px;
  text-align:center;
  color:var(--teal);
  font-size:20px;
  line-height:1.35;
  font-weight:700;
  font-style:italic;
}

@media (max-width:980px){
  #block-11 .top{
    grid-template-columns:1fr
  }

  #block-11 .product-scene{
    min-height:310px;border-radius:20px
  }

  #block-11 .qa-grid{
    grid-template-columns:1fr
  }

  #block-11 .qa-card.wide{
    grid-column:auto
  }

  #block-11 .cost-layout{
    grid-template-columns:1fr
  }

  #block-11 .comparison{
    max-width:520px
  }
}

@media (max-width:640px){
  #block-11 .content{
    width:min(100% - 20px,1280px);padding:22px 0 20px
  }

  #block-11 h1{
    font-size:42px
  }

  #block-11 .subhead{
    font-size:19px
  }

  #block-11 .qa-card{
    grid-template-columns:58px 1fr;gap:12px;min-height:auto;padding:14px
  }

  #block-11 .icon-circle{
    width:48px;height:48px;font-size:22px
  }

  #block-11 .qa-title{
    font-size:19px
  }

  #block-11 .qa-copy{
    font-size:14px
  }

  #block-11 .comparison{
    grid-template-columns:1fr
  }

  #block-11 .comparison-item{
    min-height:84px
  }

  #block-11 .closing-bar{
    grid-template-columns:58px 1fr;
    padding:14px;
    background:
    linear-gradient(90deg,rgba(232,246,248,.98) 0%,rgba(232,246,248,.93) 74%,rgba(232,246,248,.40) 100%),
    var(--lp-img-block-03-01-jpg) right center / 60% auto no-repeat;
  }

  #block-11 .closing-icon{
    width:48px;height:48px;font-size:24px
  }

  #block-11 .closing-text{
    font-size:18px
  }

  #block-11 .quote{
    font-size:17px
  }
}

#block-11{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

@media (max-width: 720px){
  #block-11{
    width:100% !important;
    max-width:100% !important;
  }
}

/* odd = white, even = gray; background stretched full viewport width */
#block-11{
  background:
  linear-gradient(#ffffff,#ffffff) center / 100vw 100% no-repeat !important;
}

#block-11 .product-scene{
  background-position:right 52% !important;
}

/* Odd block: the band paints the white, so the section drops its own
135deg gradient AND the 100vw fake-full-width white hack (line ~3611).
Width is unchanged -- .section-band > .landing-section already caps
at min(1400px,100%), which is what #block-11 was using. */
.section-band.section-bg-white > #block-11{
  background:transparent !important;
}

@media (min-width:981px){
  #block-11 .product-scene{
    border-radius:0 18px 18px 22px !important;
  }
}

/* ========================================================================
   BLOCK 12
   ======================================================================== */

/* ===== Block 12 source styles ===== */
#block-12{
  --navy:#071b57;
  --teal:#0b7aa3;
  --teal-dark:#08688d;
  --cyan:#38a8c9;
  --teal-soft:#eaf6f8;
  --line:#d8e5f0;
  --shadow:0 14px 32px rgba(7,27,87,.08);
}

#block-12,
#block-12 *{
  box-sizing:border-box
}

#block-12{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#eef3f8;
  color:#16233f;
}

#block-12{
  width:min(1400px,100%);
  margin:0 auto;
  background:linear-gradient(135deg,#fff 0%,#f8fbff 55%,#eef5fa 100%);
  overflow:hidden;
}

#block-12 .content{
  width:min(1300px,calc(100% - 54px));
  margin:0 auto;
  padding:26px 0 28px;
}

#block-12 .layout{
  display:grid;
  grid-template-columns:minmax(0,56%) minmax(380px,44%);
  gap:24px;
  align-items:start;
}

#block-12 h1{
  margin:0;
  max-width:760px;
  color:var(--navy);
  font-size:clamp(50px,5.5vw,76px);
  line-height:.95;
  font-weight:800;
  letter-spacing:-.06em;
}

#block-12 .intro{
  margin:16px 0 0;
  max-width:760px;
  color:var(--navy);
  font-size:20px;
  line-height:1.45;
  font-weight:500;
}

#block-12 .intro .accent{
  color:var(--teal);font-weight:800
}

#block-12 .price-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

#block-12 .price-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:var(--shadow);
}

#block-12 .price-inner{
  padding:18px 18px 14px
}

#block-12 .price-head{
  display:grid;
  grid-template-columns:62px 1fr;
  gap:14px;
  align-items:start;
}

#block-12 .price-icon{
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--teal-soft);color:var(--teal);
  border:1px solid rgba(11,122,163,.14);font-size:26px;
}

#block-12 .price-title{
  color:var(--navy);font-size:22px;line-height:1.1;
  font-weight:800;letter-spacing:-.03em;
}

#block-12 .servings{
  margin-top:5px;color:var(--teal);font-size:19px;font-weight:800
}

#block-12 .flavors{
  margin:14px 0 0 76px;padding-top:10px;border-top:1px solid var(--line);
  color:#182239;font-size:16px;line-height:1.42;font-weight:500;min-height:110px;
}

#block-12 .purchase{
  margin-top:10px;display:flex;align-items:baseline;gap:10px;color:var(--navy)
}

#block-12 .purchase strong{
  color:var(--teal);font-size:38px;line-height:1;font-weight:800;letter-spacing:-.04em
}

#block-12 .purchase span{
  font-size:15px;font-weight:500
}

#block-12 .subscribe-label{
  margin-top:12px;padding:6px 8px;border-radius:6px;background:rgba(11,122,163,.10);
  color:var(--teal);text-align:center;font-size:16px;font-weight:800;
}

#block-12 .subscribe-price{
  margin-top:7px;text-align:center;color:var(--navy);font-size:16px;font-weight:500
}

#block-12 .subscribe-price strong{
  color:var(--teal);font-size:34px;line-height:1;font-weight:800;letter-spacing:-.04em;margin-right:8px
}

#block-12 .per-serving{
  min-height:34px;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(90deg,var(--teal-dark),var(--teal));color:#fff;font-size:15px;font-weight:800;
}

#block-12 .per-serving i{
  color:#d8f8ff
}

#block-12 .policy-card{
  margin-top:16px;display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;gap:18px;
  padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.94);
  box-shadow:var(--shadow);
}

#block-12 .policy-divider{
  width:1px;height:54px;background:var(--line)
}

#block-12 .policy-item{
  display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center;
  color:var(--navy);font-size:15px;line-height:1.35;font-weight:700;
}

#block-12 .policy-icon{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--teal-soft);color:var(--teal);font-size:21px;
}

#block-12 .policy-item .accent{
  color:var(--teal)
}

#block-12 .cta-wrap{
  margin-top:16px;max-width:680px;padding:0 18px
}

#block-12 .cta{
  width:100%;min-height:68px;display:flex;align-items:center;justify-content:center;gap:16px;
  padding:0 26px;border-radius:12px;color:#fff;text-decoration:none;
  background:linear-gradient(90deg,#075270 0%,var(--teal) 100%);
  box-shadow:0 16px 30px rgba(7,80,105,.18);
  font-size:26px;line-height:1;font-weight:800;letter-spacing:-.02em;
}

#block-12 .cta i:first-child{
  font-size:28px;flex:0 0 auto
}

#block-12 .cta span{
  flex:1 1 auto;text-align:center
}

#block-12 .cta .arrow{
  flex:0 0 auto;margin-left:6px
}

#block-12 .right-stack{
  display:flex;flex-direction:column;gap:20px
}

#block-12 .merged-visual{
  min-height:680px;border-radius:0 0 30px 30px;overflow:hidden;
  box-shadow:var(--shadow);background:#f4f9fb;
  display:flex;align-items:stretch;
}

#block-12 .merged-visual img{
  width:100%;height:100%;object-fit:cover;display:block
}

#block-12 .feature-row{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  align-items:stretch;
  border:1px solid rgba(11,122,163,.16);
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(7px);
  box-shadow:var(--shadow);
}

#block-12 .feature{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: top;
  gap: 7px;
  min-height: 98px;
  padding: 12px 8px;
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.24;
  text-align: center;
  text-transform: uppercase;
}

#block-12 .feature:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 16px;
  right: 0;
  width: 1px;
  height: calc(100% - 32px);
  background: color-mix(in srgb, var(--teal, #0b7aa3) 16%, transparent);
}

#block-12 .feature-icon{
  display: grid;
  place-items: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--teal, #0b7aa3) 14%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--teal, #0b7aa3) 8%, transparent);
  color: var(--teal);
  font-size: 19px;
  font-weight: 700;
  text-transform: none;
  white-space: nowrap;
}

#block-12 .feature-icon sup{
  font-size: 0.55em;
  vertical-align: super;
  line-height: 0;
}

@media (max-width:1050px){
  #block-12 .layout{
    grid-template-columns:1fr
  }

  #block-12 .merged-visual{
    min-height:720px;border-radius:24px
  }
}

@media (max-width:720px){
  #block-12 .content{
    width:min(100% - 20px,1300px);padding:22px 0
  }

  #block-12 h1{
    font-size:42px
  }

  #block-12 .intro{
    font-size:17px
  }

  #block-12 .price-grid{
    grid-template-columns:1fr
  }

  #block-12 .flavors{
    min-height:auto
  }

  #block-12 .policy-card{
    grid-template-columns:1fr
  }

  #block-12 .policy-divider{
    display:none
  }

  #block-12 .cta-wrap{
    padding:0 4px
  }

  #block-12 .cta{
    min-height:60px;font-size:21px;padding:0 18px
  }

  #block-12 .merged-visual{
    min-height:590px
  }

  #block-12 .feature-row{
    grid-template-columns:repeat(3,1fr)
  }

  #block-12 .feature{
    min-height:86px;font-size:9px
  }

  #block-12 .feature:nth-child(3)::after,
  #block-12 .feature:nth-child(6)::after{
    display:none
  }

  #block-12 .feature-icon{
    min-width:38px;min-height:38px;font-size:16px
  }
}

#block-12{
  width:min(1400px,100%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}

@media (max-width: 720px){
  #block-12{
    width:100% !important;
    max-width:100% !important;
  }
}

#block-12{
  background:
  linear-gradient(#eef3f8,#eef3f8) center / 100vw 100% no-repeat !important;
}

#block-12 .merged-visual img{
  object-position:right center !important;
}

/* keep even sections feeling full-width and intentional */
#block-12{
  border-top:1px solid rgba(11,122,163,.05);
  border-bottom:1px solid rgba(11,122,163,.05);
}

/* ==================================================================
BLOCK 12 ONLY — full-width gray band
Same wrapper Blocks 2 / 8 / 10 use: section goes edge-to-edge and
transparent, band paints #F1F6FA, .content keeps centering the copy
at min(1300px, 100% - 54px).
Retires the last user of the 100vw #eef3f8 fake-full-width hack
(#block-8,#block-12 at ~line 3621) -- that gray is not the band's.
================================================================== */
.section-band.section-bg-gray > #block-12{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:transparent !important;
}
</style>