/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
:root{
  --navy:#0a3b6c;
  --navy-deep:#02274d;
  --navy-mid:#1d3a53;
  --cream:#edefeb;
  --cream2:#f4f0ea;
  --yellow:#fbd40f;
  --yellow-hover:#fcdd41;
  --ink:#06193a;
  --ink-soft:#173361;
  --radius-lg:2rem;
  --radius-md:.6rem;
  --radius-btn:4px;
  --maxw:1100px;

  /* ---- Hero product image size control ----
     Change ONLY this one number to resize the hero bottle image
     everywhere (desktop, tablet, mobile) proportionally.
     Suggested presets:
       1    = current/original size
       1.15 = subtle increase
       1.3  = noticeably bigger (recommended)
       1.5  = large / hero-dominant
       1.7  = extra large, image becomes the main focal point
  */
  --hero-bottle-scale: 0.91;
}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
body{
  margin:0;
  font-family:'Jost', sans-serif;
  font-weight:500;
  color:#000;
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{margin:0; padding:0;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
strong{font-weight:700;}

h1,h2,h3{font-family:'Jost', sans-serif; margin:0; font-weight:700;}

.section{padding:4rem 0;}
.bg-navy{background:var(--navy); color:#fff;}
.bg-navy-deep{background:var(--navy-deep); color:#fff;}
.bg-navy-mid{background:var(--navy-mid); color:#fff;}
.bg-cream{background:var(--cream);}
.bg-cream2{background:var(--cream2);}
.bg-white{background:#fff;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:1.1rem 2rem;
  border-radius:var(--radius-btn);
  font-family:'Jost', sans-serif;
  font-weight:600;
  font-size:1.1rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px);}
.btn-cta{
  background:var(--yellow);
  border-color:var(--yellow);
  color:#0b0900;
}
.btn-cta:hover{background:var(--yellow-hover); border-color:var(--yellow-hover);}
.btn--pill{border-radius:999px;}

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar{
  position:sticky; top:0; z-index:999;
  background:var(--navy-deep);
  box-shadow:0 2px 12px rgba(0,0,0,0.12);
}
.navbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:.7rem; padding-bottom:.7rem;
  flex-wrap:wrap;
}
.navbar-brand{
  color:#fff; font-size:2.3rem; font-weight:700; letter-spacing:.5px;
}
.nav-links{
  display:flex; gap:2rem; list-style:none; align-items:center;
}
.nav-links a{color:#fff; font-weight:500; font-size:1.4rem; transition:opacity .2s;}
.nav-links a:hover{opacity:.75;}
.nav-cta{display:flex; align-items:center;}
.nav-toggle{
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{width:26px; height:3px; background:#fff; border-radius:2px; transition:.25s;}
.nav-menu-wrap{display:flex; align-items:center; gap:2.5rem;}

@media (max-width: 900px){
  .nav-menu-wrap{
    position:absolute; top:100%; left:0; right:0;
    background:var(--navy-deep);
    flex-direction:column; align-items:flex-start;
    padding:1.5rem 20px;
    gap:1.25rem;
    display:none;
  }
  .nav-menu-wrap.open{display:flex;}
  .nav-links{flex-direction:column; align-items:flex-start; gap:1rem; width:100%;}
  .nav-cta{width:100%;}
  .nav-cta .btn{width:100%; justify-content:center;}
  .nav-toggle{display:flex;}
}

/* ============================================================
   HERO / IMAGE+TEXT SPLIT SECTIONS
   ============================================================ */
.split{
  display:flex; align-items:center; gap:3.5rem;
  padding:5rem 0;
  flex-wrap:wrap;
}
.split.reverse{flex-direction:row-reverse;}
.split .split-img{flex:0 0 340px; max-width:340px;}
.split .split-img img{border-radius:var(--radius-lg); width:100%;}
.split .split-text{flex:1 1 400px; min-width:280px;}
.split h1, .split h2{font-size:2.3rem; line-height:1.15; margin-bottom:1.2rem;}
.split p{font-size:1.5rem; font-weight:400; margin:0 0 1.2rem;}

.guarantee-card{
  background:var(--cream2); border-radius:1.2rem;
  padding:3rem;
}
.guarantee-card__heading{
  text-align:center; font-size:2.1rem; line-height:1.2;
  margin:0 0 1.8rem; color:var(--ink-soft);
}
.guarantee-card__body.split{padding:0; gap:3rem;}
.guarantee-section{padding:1.4rem 0;}
@media (max-width:768px){
  .guarantee-card{padding:2rem 1.4rem; border-radius:1rem;}
  .guarantee-card__heading{font-size:1.7rem; margin-bottom:1.4rem;}
}
.checklist{list-style:none; margin:0 0 1.2rem; padding:0;}
.checklist li{margin-bottom:.6rem; font-size:1.15rem;}
.rating-row{
  display:flex; align-items:center; justify-content:flex-start;
  gap:8px; margin-top:1rem; flex-wrap:wrap;
}
.stars{color:#fda413; font-size:1.3rem; letter-spacing:1px; line-height:1;}
.rating-num{font-weight:700; font-size:1.1rem;}

@media (max-width:768px){
  .split{padding:3rem 0; gap:2rem;}
  .split .split-img{flex-basis:100%; max-width:280px; margin:0 auto;}
  .split .split-text{text-align:left;}
  .split h1, .split h2{font-size:1.9rem;}
}

/* Hero section: fully centered layout on mobile & tablet only */
@media (max-width:900px){
  #top .split-text{text-align:center;}
  #top .split-text p{margin-left:auto; margin-right:auto;}
  #top .checklist{text-align:center;}
  #top .rating-row{justify-content:center;}
}

/* Hero heading centered above both the image and text columns */
.hero-heading{
  max-width:900px; margin:0 auto; padding:3rem 20px 0; text-align:center;
}
.hero-heading h1{font-size:2.5rem; line-height:1.15; margin:0;}
@media (max-width:768px){
  .hero-heading{padding:2.5rem 20px 0;}
  .hero-heading h1{font-size:1.9rem;}
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.heading-block{text-align:center; max-width:var(--maxw); margin:0 auto; padding:2rem 20px;}
.heading-block h2{font-size:2.3rem; line-height:1.2; color:#fff;}
.heading-block.on-light h2{color:var(--ink-soft);}
.heading-block h3{font-size:1.5rem; font-weight:600; margin-top:1rem; color:#fff;}
.heading-block.on-light h3{color:var(--ink);}
.heading-block p{font-size:1.5rem; font-weight:400; margin-top:1rem; color:#fff;}
.heading-block.on-light p{color:#000;}
/* Slim variant: used for navy heading bars that hold only a single H2 (no subheading),
   so the block isn't as thick/tall as the ones that also carry a subheading. */
.heading-block--compact{padding:1.2rem 20px;}

@media (max-width:768px){
  .heading-block h2{font-size:1.8rem;}
  .heading-block--compact{padding:1rem 20px;}
  .navbar-brand{font-size:1.8rem;}
}

/* ============================================================
   TRUST BADGES GRID
   ============================================================ */
.trust-hero-wrap{
  position:relative;
  overflow:hidden;
}
.trust-heading-section{position:relative; z-index:2;}
.trust-heading-section .heading-block{position:relative; z-index:2; width:100%;}
.trust-heading-section .heading-block h2{color:var(--navy);}
.badges-section{position:relative; z-index:2;}
.trust-heading-bg{
  position:absolute;
  top:1.5rem;
  right:1.5rem;
  width:300px;
  max-width:26%;
  min-width:180px;
  height:auto;
  object-fit:contain;
  z-index:1;
  opacity:.95;
  -webkit-mask-image:radial-gradient(circle at top right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 85%);
  mask-image:radial-gradient(circle at top right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 85%);
  pointer-events:none;
}
@media (max-width:900px){
  .trust-heading-bg{width:220px; min-width:150px;}
}
@media (max-width:768px){
  .trust-heading-bg{display:none;}
}

.heading-block p.trust-subheading{max-width:640px; margin:.8rem auto 0 !important; font-size:1.15rem !important; line-height:1.5; color:var(--navy) !important; opacity:.85;}

.badges-section{padding:1rem 0 4rem;}

.badges-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.6rem;
  align-items:stretch;
}
.badge-item{
  background:#fff;
  border:1px solid rgba(10,59,108,.10);
  border-radius:1rem;
  padding:2.2rem 1.4rem 1.8rem;
  box-shadow:0 14px 32px rgba(6,25,58,.10);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.badge-item:hover{transform:translateY(-4px); box-shadow:0 18px 38px rgba(6,25,58,.16);}
.badge-item img{width:160px; max-width:75%; height:auto; margin:0 auto 1.3rem; border-radius:0;}
.badge-item h3{font-size:1.3rem; font-weight:700; color:var(--ink-soft); margin:0 0 .6rem;}
.badge-item p{font-size:1.08rem; margin:0; color:#000; line-height:1.5;}

/* --- mini testimonial strip --- */
.trust-testimonials{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.8rem 1rem;
  margin-top:3rem;
  padding-top:2.5rem;
  border-top:1px dashed rgba(10,59,108,.22);
}
.trust-testimonial{
  flex:1 1 160px;
  max-width:210px;
  text-align:center;
  margin:0 auto;
}
.trust-avatar-img{
  width:76px;
  height:76px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto .6rem;
  display:block;
  box-shadow:0 6px 16px rgba(6,25,58,.20);
}
.trust-stars{display:block; color:var(--yellow); font-size:.95rem; letter-spacing:.15em; margin-bottom:.4rem;}
.trust-quote{font-size:1.02rem; font-style:italic; color:var(--ink-soft); margin:0; line-height:1.4;}

.trust-line{
  text-align:center;
  margin:2.5rem 0 0;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--navy);
}

@media (max-width:900px){
  .badges-grid{grid-template-columns:repeat(2, 1fr);}
  .trust-testimonials{justify-content:center;}
}
@media (max-width:500px){
  .badges-grid{grid-template-columns:1fr;}
  .badge-item{padding:2.1rem 1.4rem 1.7rem;}
  .trust-testimonial{flex:1 1 42%;}
}

/* ============================================================
   PRICING IMAGE BLOCK
   ============================================================ */
.pricing-block{padding:3rem 0; text-align:center;}
.pricing-block .image-wrap{margin-bottom:1.5rem;}
.pricing-block img{border-radius:var(--radius-lg); width:100%;}
.pricing-block .caption{font-size:1.24rem; font-weight:700; max-width:800px; margin:0 auto;}
.pricing-mobile{display:none;}
@media (max-width:768px){
  .pricing-desktop{display:none;}
  .pricing-mobile{display:block;}
}

.checkout-shot{position:relative;}
.checkout-shot a{
  display:block; position:relative; text-decoration:none; cursor:pointer;
}
.checkout-shot img{
  max-width:480px; width:100%; margin:0 auto; display:block;
  border:3px solid var(--navy-deep);
  border-radius:16px;
  box-shadow:0 14px 34px rgba(6,25,58,.22);
}
.checkout-shot__badge{
  position:absolute; top:16px; right:16px;
  background:var(--yellow); color:var(--ink); font-weight:800;
  font-size:.9rem; padding:.6rem 1.2rem; border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  display:inline-flex; align-items:center; gap:.4rem;
  pointer-events:none;
}
@media (max-width:600px){
  .checkout-shot__badge{top:10px; right:10px; font-size:.76rem; padding:.46rem .9rem;}
}
@media (min-width:769px){
  .checkout-shot img{max-width:680px;}
}

/* ============================================================
   PRICING TABLE (reference: GRS Ultra pricing-grid design)
   ============================================================ */
.shipping-pill{
  display:inline-flex; align-items:center; gap:.6rem;
  background:rgba(251,212,15,.12); border:1px solid var(--yellow);
  color:var(--navy-deep); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:.85rem; padding:.7rem 1.4rem;
  border-radius:999px; margin:2rem auto 2.4rem;
}
.shipping-pill svg{width:20px; height:20px; color:var(--yellow); flex-shrink:0;}

.pricing-grid{
  display:grid; grid-template-columns:1fr; gap:18px;
  max-width:980px; margin:0 auto 2.8rem;
}
@media (min-width:900px){
  .pricing-grid{grid-template-columns:repeat(3,1fr); align-items:start;}
}
.pricing-card{
  display:flex; flex-direction:column;
  transition:transform .6s ease-out;
}
.pricing-grid .pricing-card:hover,
.pricing-grid .pricing-card:focus-within{
  transform:scale(1.08);
}
.pricing-card__ship-badge{display:none;}
.pricing-card__ribbon{
  background:var(--yellow); color:var(--ink); font-weight:800;
  padding:13px 20px; text-align:center; text-transform:uppercase;
  letter-spacing:.05em; font-size:1rem; width:70%; align-self:flex-start;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.pricing-card__body{
  background-color:var(--navy-deep);
  background-image:url('../images/bellyflush-card-bg.webp');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  padding:12px 20px; display:flex;
  flex-direction:column; align-items:center; position:relative;
  box-shadow:0 10px 40px rgba(0,0,0,.2); flex:1;
}
.pricing-card--featured .pricing-card__body{border:4px solid var(--yellow);}
@media (min-width:900px){.pricing-card--featured{position:relative; z-index:2;}}
.pricing-card__supply{color:#fff; font-weight:800; font-size:1.35rem; text-transform:uppercase; margin-bottom:18px;}
.pricing-card__image-wrap{position:relative; margin-bottom:26px;}
.pricing-card__image-wrap img{width:230px; height:auto; border-radius:0; box-shadow:none;}
.pricing-card__save{
  position:absolute; top:-12px; right:-18px; background:var(--yellow); color:var(--ink);
  width:78px; height:78px; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-weight:800; font-size:.8rem;
  border:2px solid var(--navy-deep); box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.pricing-card__save span:last-child{font-size:1.25rem;}
.pricing-card__mobile-seal{display:none;}
.pricing-card__price{display:flex; align-items:baseline; gap:5px; margin-bottom:6px;}
.pricing-card__price strong{color:var(--yellow); font-size:3.4rem; font-weight:800;}
.pricing-card__price span{color:#fff; font-weight:700; font-size:1rem;}
.pricing-card__terms{
  color:#fff; font-size:.9rem; font-weight:700; text-transform:uppercase;
  letter-spacing:-.02em; text-align:center; margin-bottom:26px; line-height:1.6;
}
.pricing-card__cta{
  display:block; text-align:center; width:100%; background:var(--yellow); color:var(--ink);
  font-weight:800; padding:1.1rem; border-radius:0; text-transform:uppercase;
  transition:transform .4s ease-out; font-size:1rem;
}
.pricing-card__cta:hover{transform:scale(1.03); background:var(--yellow-hover);}

.pricing-trust-strip{
  display:block; width:100%; height:auto;
  max-width:640px; margin:0 auto 2.4rem;
}
@media (min-width:900px){
  .pricing-trust-strip{max-width:720px;}
}
@media (max-width:480px){
  .pricing-trust-strip{max-width:100%;}
}

@media (max-width:899px){
  .pricing-grid{grid-template-columns:1fr; gap:52px; max-width:520px; margin-top:2rem;}
  .pricing-card{position:relative; overflow:visible; border:1px solid rgba(251,212,15,.35);}
  .pricing-card__ribbon{
    position:absolute; bottom:100%; right:0; left:auto; top:auto; margin-bottom:0;
    width:auto; max-width:70%; align-self:auto; white-space:nowrap;
    border-radius:var(--radius-md) var(--radius-md) 0 0; padding:7px 14px;
    font-size:.7rem; letter-spacing:.03em; z-index:3; box-shadow:0 1px 3px rgba(0,0,0,.15);
  }
  .pricing-card__body{
    position:relative; overflow:hidden; display:grid;
    grid-template-columns:36% 1fr;
    grid-template-areas:"image supply" "image price" "image save" "image terms" "image button";
    align-items:center; column-gap:14px; row-gap:6px; padding:16px 14px 16px 10px;
    border:2px solid var(--yellow);
  }
  .pricing-card__supply{grid-area:supply; text-align:left; font-size:1.05rem; margin-bottom:0;}
  .pricing-card__image-wrap{
    grid-area:image; margin-bottom:0; display:flex; align-items:center;
    justify-content:center; align-self:center; height:auto; min-height:110px;
  }
  .pricing-card__image-wrap img{max-width:100%; height:auto; max-height:130px;}
  .pricing-card__price{grid-area:price; margin-bottom:0;}
  .pricing-card__price strong{font-size:2.1rem;}
  .pricing-card__save{
    grid-area:save; position:static; width:auto; height:auto; border:none; border-radius:0;
    box-shadow:none; background:transparent; display:flex; align-items:baseline; gap:4px;
    color:var(--yellow-hover); font-size:.75rem; font-weight:800; text-transform:uppercase;
  }
  .pricing-card__save span:last-child{font-size:.75rem;}
  .pricing-card__terms{grid-area:terms; text-align:left; font-size:.62rem; line-height:1.4; margin-bottom:4px;}
  .pricing-card__terms-shipping{display:none;}
  .pricing-card__cta{grid-area:button; padding:.7rem; font-size:.75rem;}
  .pricing-card__ship-badge{
    display:block; position:absolute; top:-8px; left:-8px; width:86px; height:86px;
    z-index:4; pointer-events:none; object-fit:contain;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.25));
  }
  .pricing-card__image-wrap img.pricing-card__mobile-seal{
    display:block; position:absolute; bottom:-8px; left:50%; right:auto;
    transform:translateX(-50%); width:42px; height:42px; z-index:2;
    object-fit:contain;
  }
}

.as-seen-on{padding-top:2rem; margin-bottom:2.8rem; display:flex; justify-content:center;}
.as-seen-on img{max-width:100%; width:800px; height:auto; object-fit:contain;}

.warning-banner{
  background:#ffdad9; border:1px solid #ba1a1a; padding:1.25rem; border-radius:0;
  display:flex; align-items:center; gap:1rem; max-width:800px; margin:0 auto 2.6rem; text-align:left;
}
.warning-banner .icon{color:#ba1a1a; width:36px; height:36px; flex-shrink:0;}
.warning-banner p{color:#ba1a1a; font-weight:700; margin:0; font-size:1.2rem; line-height:1.6;}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-grid{
  display:flex; gap:3rem; align-items:center; justify-content:center; padding:3rem 0 1.5rem; flex-wrap:wrap;
}
.about-grid .about-img{
  flex:0 0 360px; max-width:360px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0 auto;
}
.about-grid .about-img img{border-radius:var(--radius-lg); width:100%; margin-bottom:1rem;}
.about-grid .about-img p{font-weight:700; text-align:center; font-size:1.12rem;}
.about-grid .about-text{flex:1 1 400px; min-width:280px; font-size:1.55rem; font-weight:400;}
.about-grid .about-text p{margin:0 0 1rem;}
@media (max-width:900px){
  .about-grid{padding:2rem 0;}
  .about-grid .about-img{margin:0 auto;}
  .about-grid .about-text{text-align:center; padding:0 1.2rem; margin:0 auto;}
}

/* ============================================================
   REVIEWS GRID
   ============================================================ */
.reviews-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2.5rem; padding:1rem 0 3rem;
}
.review-card{
  text-align:center;
}
.review-card img{
  width:180px; height:180px; object-fit:cover; border-radius:14px;
  margin:0 auto 1.3rem; display:block;
}
.reviews-section{padding-top:3rem; padding-bottom:3rem;}
.reviews-lead{text-align:center; font-size:1.4rem; line-height:1.6;}
.review-card .verified{font-weight:700; display:block; margin-bottom:.6rem; font-size:1.15rem;}
.review-card .stars{display:block; margin-bottom:1.3rem; font-size:1.3rem;}
.review-card .quote{margin:0 0 1.5rem; font-size:1.5rem; font-weight:400; line-height:1.65;}
.review-card .reviewer-name{font-weight:700; margin:0; font-size:1.05rem;}
@media (max-width:900px){
  .reviews-grid{grid-template-columns:1fr; gap:3rem;}
}

/* ============================================================
   CONTENT LIST BLOCKS (how it works / ingredients / benefits / bonuses / checkout)
   ============================================================ */
.content-list{
  max-width:var(--maxw); margin:0 auto; padding:3rem 20px;
  display:flex; flex-direction:column; gap:1.8rem;
}
.content-list .list-item{
  background:transparent;
}
.content-list .list-item p{margin:0; font-size:1.55rem; font-weight:400; line-height:1.45;}
.section-lead{font-size:1.3rem; text-align:center;}
.content-list .list-item strong{display:block; margin-bottom:.25rem; font-size:1.5rem; line-height:1.3; color:var(--ink-soft);}
.on-navy .content-list .list-item strong{color:#fff;}
.on-navy .content-list .list-item p{color:#f2f2f2;}

/* Numbered step circles (used for "how it works" mechanism list and ingredients list) */
.numbered-list .list-item,
.tick-list .list-item{
  display:flex; align-items:flex-start; gap:1.2rem;
}
.numbered-list .list-item .step-num{
  flex:0 0 46px; width:46px; height:46px; border-radius:50%;
  background:var(--navy-deep); color:#fff; font-weight:800; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(6,25,58,.22);
}
/* Round navy ribbon + white tick icon (used for the benefits list) */
.tick-list .list-item .step-tick{
  flex:0 0 46px; width:46px; height:46px; border-radius:50%;
  background:var(--navy-deep); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(6,25,58,.22);
}
.tick-list .list-item .step-tick svg{width:22px; height:22px;}
@media (max-width:600px){
  .numbered-list .list-item, .tick-list .list-item{gap:.9rem;}
  .numbered-list .list-item .step-num{width:38px; height:38px; font-size:1rem;}
  .tick-list .list-item .step-tick{width:38px; height:38px;}
  .tick-list .list-item .step-tick svg{width:18px; height:18px;}
}

/* Ingredient image stacked above its numbered text list */
.ingredient-list__img{max-width:420px; width:100%; margin:0 auto; display:flex; justify-content:center; align-items:center;}
.ingredient-list__img img{width:100%; border-radius:var(--radius-lg);}

/* Bonus rows: image left, text right (per-bonus layout) */
.bonus-list{
  max-width:var(--maxw); margin:0 auto; padding:1rem 20px 3rem;
  display:flex; flex-direction:column; gap:2.6rem;
}
.bonus-row{display:flex; align-items:center; gap:2rem;}
.bonus-row .bonus-img{
  flex:0 0 320px; max-width:320px; width:320px; height:320px;
  border-radius:12px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.bonus-row .bonus-img img{
  width:100%; height:100%; object-fit:contain; object-position:center center;
  border-radius:6px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));
  display:block;
}
.bonus-row .bonus-text{flex:1 1 auto;}
.bonus-row .bonus-text h3{font-size:1.55rem; color:var(--ink-soft); margin:0 0 .3rem;}
.bonus-row .bonus-text .bonus-rrp{display:block; font-weight:700; font-size:1.55rem; color:var(--ink-soft); margin-bottom:.7rem;}
.bonus-row .bonus-text .bonus-old-price{color:#d21c1c; text-decoration:line-through;}
.bonus-row .bonus-text p.bonus-desc{margin:0; font-size:1.55rem; font-weight:400; color:#000;}
@media (max-width:640px){
  .bonus-row{flex-direction:column; align-items:center; text-align:center;}
  .bonus-row .bonus-img{flex-basis:auto; max-width:280px; width:280px; height:280px;}
}

/* Benefits as two-column grid on larger screens */
.benefits-grid{
  max-width:1000px; margin:0 auto; padding:3rem 20px;
  display:grid; grid-template-columns:1fr 1fr; gap:1.8rem 3rem;
}
.benefits-grid .list-item strong{display:block; margin-bottom:.4rem; font-size:1.5rem; color:var(--ink-soft);}
.benefits-grid .list-item p{margin:0; font-size:1.5rem; font-weight:400;}
@media (max-width:768px){
  .benefits-grid{grid-template-columns:1fr;}
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-wrap{max-width:var(--maxw); margin:0 auto; padding:1rem 20px 3rem;}
.faq-item{
  background:#fff; border-radius:1rem; margin-bottom:1rem; overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.faq-question{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:1.4rem 1.6rem; display:flex; justify-content:space-between; align-items:center;
  font-family:'Jost', sans-serif; font-size:1.55rem; font-weight:600; color:var(--ink);
  gap:1rem;
}
.faq-question .arrow{transition:transform .25s ease; flex-shrink:0; font-size:1rem;}
.faq-item.open .arrow{transform:rotate(180deg);}
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.faq-answer p{padding:0 1.6rem 1.4rem; margin:0; font-size:1.55rem; font-weight:400;}

/* ============================================================
   READ MORE TOGGLE (side effects / pros & cons)
   ============================================================ */
.readmore{max-width:var(--maxw); margin:2.8rem auto 3rem; padding:0 20px; text-align:center;}
.readmore-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  background:none; border:2px solid var(--navy-deep); color:var(--navy-deep);
  font-weight:700; font-size:1.3rem; padding:.9rem 2.1rem;
  border-radius:999px; cursor:pointer; transition:background .25s ease, color .25s ease;
  font-family:'Jost', sans-serif;
}
.readmore-btn:hover{background:var(--navy-deep); color:#fff;}
.readmore-btn .arrow{transition:transform .25s ease; font-size:1rem; flex-shrink:0;}
.readmore.open .readmore-btn .arrow{transform:rotate(180deg);}
.readmore-btn .label-more{display:inline;}
.readmore-btn .label-less{display:none;}
.readmore.open .readmore-btn .label-more{display:none;}
.readmore.open .readmore-btn .label-less{display:inline;}
.readmore-panel{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.readmore-panel-inner{
  text-align:left; background:#fff; border-radius:var(--radius-lg);
  padding:1.9rem 2rem; margin-top:1.6rem; box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.readmore-panel-inner h3{font-size:1.55rem; font-weight:700; margin:0 0 .8rem; color:var(--navy-deep); text-align:center;}
.readmore-panel-inner p{font-size:1.5rem; font-weight:400; line-height:1.7; margin:0 0 1rem;}
.readmore-panel-inner p:last-child{margin-bottom:0;}
.readmore-panel-inner ul, .readmore-panel-inner ol{margin:0 0 1rem 1.2rem; padding:0;}
.readmore-panel-inner li{font-size:1.5rem; font-weight:400; line-height:1.7; margin-bottom:.5rem;}
.readmore-panel-inner .clinical-col ol{margin:0 0 0 1.2rem; padding:0;}
.readmore-panel-inner .clinical-col li{font-size:.95rem; line-height:1.6; margin-bottom:.6rem; word-break:break-word;}
.readmore-panel-inner .clinical-col li a{color:var(--navy); text-decoration:underline;}
.readmore-panel-inner .note{font-size:.92rem; color:var(--ink-soft); font-style:italic; margin-top:.5rem;}

/* Inline contextual-link variant (e.g. "Who's it For?" inside a text column) */
.readmore--inline{max-width:none; margin:0; padding:0; text-align:left;}
.readmore-link{
  display:inline; background:none; border:none; padding:0;
  color:var(--navy-deep); font-weight:600; font-size:inherit;
  text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; font-family:'Jost', sans-serif;
}
.readmore--inline .readmore-panel-inner{padding:1.4rem 1.6rem; margin-top:1rem;}
@media (max-width:768px){
  .readmore--inline{text-align:center;}
}

.proscons-columns{display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:.4rem;}

/* Clinical studies read-more: two columns, footer-disclaimer-sized text */
.clinical-columns{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:.4rem; text-align:left;}
.readmore-panel-inner .clinical-col h4{font-size:1.05rem; margin:0 0 .5rem; color:var(--navy-deep);}
.readmore-panel-inner .clinical-col p{font-size:1.02rem; font-weight:400; line-height:1.6; margin:0;}
@media (max-width:640px){
  .clinical-columns{grid-template-columns:1fr; gap:1.2rem;}
}
@media (max-width:700px){
  .proscons-columns{grid-template-columns:1fr; gap:1.6rem;}
}
.proscons-col h4{font-weight:700; font-size:1.25rem; margin:0 0 .8rem;}
.proscons-col.pros h4{color:#1a7f37;}
.proscons-col.cons h4{color:#ba1a1a;}
.proscons-col ul{list-style:none; margin:0; padding:0;}
.proscons-col li{display:flex; align-items:flex-start; gap:.55rem; margin-bottom:.7rem; font-size:1.5rem; font-weight:400; line-height:1.55;}
.proscons-col.pros li::before{content:"✓"; color:#1a7f37; font-weight:800; flex-shrink:0;}
.proscons-col.cons li::before{content:"–"; color:#ba1a1a; font-weight:800; flex-shrink:0;}

.readmore-howto{display:flex; gap:2rem; align-items:center;}
.readmore-howto img{width:180px; height:auto; border-radius:var(--radius-lg); flex-shrink:0;}
.readmore-howto p{margin:0 0 .8rem;}
.readmore-howto p:last-child{margin-bottom:0;}
@media (max-width:600px){
  .readmore-howto{flex-direction:column; align-items:flex-start;}
  .readmore-howto img{width:100%; max-width:260px; margin:0 auto 1rem; display:block;}
}

/* ============================================================
   QUICK LINKS GRID
   ============================================================ */
.quicklinks-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:2rem 0 3rem;
}
.quicklink-item{
  background:var(--cream); border-radius:1rem; padding:1.1rem 1.4rem;
}
.quicklink-item a{
  display:flex; align-items:center; gap:.6rem; font-weight:500; font-size:1.08rem; color:var(--ink);
}
.quicklink-item svg{flex-shrink:0; opacity:.8;}
@media (max-width:700px){
  .quicklinks-grid{grid-template-columns:1fr;}
}

/* ============================================================
   FDA / DISCLAIMER
   ============================================================ */
.disclaimer{padding:3rem 0; text-align:center;}
.disclaimer h3{font-size:1.4rem; margin-bottom:1rem;}
.disclaimer p{font-size:1.02rem; max-width:1000px; margin-left:auto; margin-right:auto;}

/* ============================================================
   FINAL CTA CARD (rounded navy card, image + offer panel)
   ============================================================ */
.final-cta-wrap{padding:3rem 0;}
.final-cta-card{
  background:var(--navy-deep);
  border-radius:var(--radius-lg);
  padding:3rem;
  max-width:var(--maxw); margin:0 auto;
}
.final-cta-grid{
  display:flex; align-items:center; gap:3rem; flex-wrap:wrap;
}
.final-cta-imgcol{
  flex:0 0 280px; max-width:280px; position:relative;
  background:#fff; border-radius:1.4rem;
  padding-top:1.6rem; padding-left:1.9rem; padding-right:1.9rem; padding-bottom:1.4rem;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  text-align:center;
}
.final-cta-imgcol img{max-width:100%; margin:0 auto;}
.final-cta-ribbon{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#2fa84f; color:#fff; font-weight:800;
  padding:1rem 1.8rem 2.1rem; margin:0 auto 14px; width:100%;
  border-radius:16px 16px 6px 6px;
  overflow:visible;
  z-index:1;
}
.final-cta-ribbon::after{
  content:"";
  position:absolute;
  left:6px; right:6px; bottom:0;
  height:32px;
  background:#fff;
  clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
}
.final-cta-ribbon span{font-size:1.7rem; line-height:1.1; font-weight:800;}
.final-cta-ribbon small{font-size:1rem; font-weight:700;}
.final-cta-content{flex:1 1 380px; min-width:280px;}
.final-cta-content h2{
  color:#fff; font-size:2rem; line-height:1.25; font-weight:800; margin:0 0 1.3rem; text-align:left;
}
.final-cta-today{color:#eef1f5; font-size:1.4rem; font-weight:400; margin:0 0 .3rem;}
.final-cta-today strong{color:#fff; font-weight:700;}
.final-cta-regular{font-size:1.3rem; font-weight:600; margin:0 0 2rem;}
.final-cta-regular-label{color:#e2564f; text-decoration:underline;}
.final-cta-old-price{color:#e2564f; text-decoration:line-through; margin-left:.2rem;}
.final-cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  width:fit-content; max-width:100%; background:var(--yellow); color:var(--ink);
  font-weight:800; font-size:1.15rem; text-transform:uppercase; letter-spacing:.01em;
  padding:1.15rem 2rem; border-radius:.8rem;
  transition:background .2s ease, transform .15s ease;
}
.final-cta-btn:hover{background:var(--yellow-hover); transform:translateY(-2px);}
.final-cta-btn svg{flex:0 0 20px; margin-left:.2rem;}

@media (max-width:900px){
  .final-cta-card{padding:2.2rem 1.4rem;}
  .final-cta-grid{gap:1.8rem; flex-direction:column;}
  .final-cta-imgcol{flex-basis:auto; max-width:260px; margin:0 auto;}
  .final-cta-content{text-align:center;}
  .final-cta-content h2{font-size:1.6rem; text-align:center;}
  .final-cta-btn{margin:0 auto;}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--navy-deep); color:#fff; padding:2.5rem 0 2rem;}
.footer-links{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center;
  padding:0 0 1.5rem; margin:0;
}
.footer-links a{color:#fff; opacity:.85; font-size:1.04rem;}
.footer-links a:hover{opacity:1; text-decoration:underline;}
.copyright{
  text-align:center; background:var(--navy-deep); padding:10px; border-radius:4px; font-size:1.02rem;
}
.copyright a{text-decoration:underline;}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
#scrollTop{
  position:fixed; bottom:24px; right:24px; z-index:998;
  width:46px; height:46px; border-radius:50%;
  background:var(--navy-deep); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,0.25);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
#scrollTop.visible{opacity:1; visibility:visible; transform:translateY(0);}
#scrollTop:hover{background:var(--navy-deep);}

/* ============================================================
   DESCRIPTION SECTION IMAGE + TEXT ROW (ingredients / how-it-works)
   ============================================================ */
.desc-row{
  display:flex; align-items:center; gap:2.5rem;
  max-width:1100px; margin:0 auto; padding:1rem 20px 1rem;
  flex-wrap:wrap;
}
.desc-row .desc-img{flex:0 0 160px; max-width:160px;}
.desc-row .desc-img img{width:100%; border-radius:var(--radius-lg);}
.desc-row .desc-text{flex:1 1 400px; min-width:280px;}
.desc-row .desc-text.content-list{padding:0; margin:0; max-width:none;}
@media (max-width:768px){
  .desc-row{padding:1rem 20px 0;}
  .desc-row .desc-img{flex-basis:100%; max-width:160px; margin:0 auto;}
}

.buy-cta{
  text-align:center; max-width:var(--maxw); margin:0 auto; padding:0 20px;
}
.buy-cta__inner{
  padding-top:.5rem;
}
.buy-cta .btn{font-size:1.2rem;}
.buy-cta .cta-arrow{display:inline-block; transition:transform .2s ease;}
.buy-cta .btn:hover .cta-arrow{transform:translateX(5px);}
.buy-cta__note{
  margin:1.1rem 0 0; font-size:1.08rem; font-weight:600; color:var(--ink-soft);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem 1.3rem;
}
.buy-cta__note li{display:flex; align-items:center; gap:.4rem; list-style:none;}
.buy-cta__note svg{flex:0 0 16px; color:#008000;}
@media (max-width:600px){
  .buy-cta .btn{width:100%; max-width:420px; justify-content:center;}
}

/* Misc helpers */
.text-center{text-align:center;}
.strike{text-decoration:line-through; opacity:.7;}

/* ============================================================
   HERO BANNER
   ============================================================ */
.hero-banner{
  position:relative; overflow:hidden;
  background:#fff;
  padding:4.5rem 0 3.5rem;
}
.hero-banner .container{max-width:1300px;}

.hero-banner__decor{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero-banner__decor::before,
.hero-banner__decor::after{
  content:""; position:absolute; border-radius:50%; border:2px solid rgba(251,212,15,.32);
}
.hero-banner__decor::before{width:260px; height:260px; top:-100px; right:9%;}
.hero-banner__decor::after{width:150px; height:150px; top:70px; right:24%; border-color:rgba(251,212,15,.18);}
.hero-banner__inner{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:2.4rem; flex-wrap:nowrap;
}
.hero-banner__text{flex:0 1 60%; min-width:260px;}
.hero-banner__text h1{
  color:var(--navy-deep); font-size:2.6rem; line-height:1.18; font-weight:800; margin-bottom:1.2rem;
}
.hero-banner__text h1 strong{font-weight:800; color:#F78E3B;}
.hero-banner__sub{color:#000; font-size:1.3rem; margin:0 0 1.5rem; max-width:480px;}
.hero-banner__checklist{list-style:none; margin:0 0 1.8rem; padding:0; display:flex; flex-direction:column; gap:.6rem;}
.hero-banner__checklist li{display:flex; align-items:center; gap:.6rem; color:#000; font-size:1.2rem;}
.hero-banner__checklist svg{flex:0 0 18px; color:#008000;}
.hero-banner__rating{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:#000; font-size:1.08rem; margin-top:1.6rem;
}
.hero-banner__rating .stars{color:var(--yellow); font-size:1.3rem; letter-spacing:1px;}

/* ---------- Hero "Buy Now" CTA — extra prominence ---------- */
.hero-banner__cta-wrap{margin:0 0 1.8rem;}
.hero-banner__cta{
  font-size:1.3rem;
  padding:1.3rem 2.8rem;
  box-shadow:0 12px 34px rgba(251,212,15,.4), 0 0 0 0 rgba(251,212,15,.55);
  animation:heroCtaPulse 2.6s ease-out infinite;
  position:relative;
}
.hero-banner__cta .cta-arrow{display:inline-block; transition:transform .2s ease;}
.hero-banner__cta:hover .cta-arrow{transform:translateX(5px);}
.hero-banner__cta:hover{animation-play-state:paused;}
@keyframes heroCtaPulse{
  0%{box-shadow:0 12px 34px rgba(251,212,15,.4), 0 0 0 0 rgba(251,212,15,.45);}
  70%{box-shadow:0 12px 34px rgba(251,212,15,.4), 0 0 0 16px rgba(251,212,15,0);}
  100%{box-shadow:0 12px 34px rgba(251,212,15,.4), 0 0 0 0 rgba(251,212,15,0);}
}
@media (prefers-reduced-motion: reduce){
  .hero-banner__cta{animation:none;}
}
@media (max-width:900px){
  .hero-banner__cta-wrap{display:flex; flex-direction:column; align-items:center;}
  .hero-banner__cta{width:100%; max-width:420px; justify-content:center;}
}
.hero-banner__visual{
  flex:0 1 40%; min-width:0; position:relative;
  display:flex; align-items:center; justify-content:center; padding:2rem 0;
}
.hero-banner__pedestal{
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  width:85%; max-width:420px; height:130px; border-radius:50%; z-index:0;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 72%);
}
.hero-banner__bottle{
  position:relative; z-index:2;
  width:min(calc(640px * var(--hero-bottle-scale)), 50vw);
  max-width:120%; height:auto; flex-shrink:0;
  aspect-ratio:1400/900; object-fit:contain;
  filter:drop-shadow(0 25px 35px rgba(0,0,0,.35));
}
.hero-banner__leaf{
  position:absolute; right:1%; bottom:8%; width:130px; z-index:1; opacity:.92; pointer-events:none;
}

@media (max-width:900px){
  .hero-banner{padding:3rem 0 2.5rem;}
  .hero-banner__inner{flex-direction:column; text-align:center;}
  .hero-banner__text h1{font-size:2rem;}
  .hero-banner__sub{margin-left:auto; margin-right:auto;}
  .hero-banner__checklist{align-items:center;}
  .hero-banner__checklist li{justify-content:center;}
  .hero-banner__rating{justify-content:center;}
  .hero-banner__visual{order:-1; flex:0 0 auto; width:100%; padding-top:.5rem; padding-bottom:1rem;}
  .hero-banner__bottle{width:min(calc(660px * var(--hero-bottle-scale)), 90vw); max-width:none; height:auto;}
}
@media (max-width:600px){
  .hero-banner__text h1{font-size:1.7rem;}
  .hero-banner__leaf{width:80px; right:4%; bottom:6%;}
  .hero-banner__visual{padding-top:.5rem; padding-bottom:.5rem;}
  .hero-banner__bottle{width:min(calc(410px * var(--hero-bottle-scale)), 92vw); max-width:none; height:auto;}
}
/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(46px);
  transition:opacity .9s cubic-bezier(.16,.8,.28,1), transform .9s cubic-bezier(.16,.8,.28,1);
  will-change:opacity, transform;
}
.reveal.reveal--left{transform:translateX(-56px) translateY(0);}
.reveal.reveal--right{transform:translateX(56px) translateY(0);}
.reveal.reveal--scale{transform:translateY(28px) scale(.94);}
.reveal.reveal--fade{transform:none;}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0) translateX(0) scale(1);
}
/* keep buttons/links clickable immediately even before their reveal fires */
.reveal{pointer-events:auto;}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.reveal--left, .reveal.reveal--right, .reveal.reveal--scale{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  html{scroll-behavior:auto;}
}

/* thin scroll-progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--yellow), #fff8c9, var(--yellow));
  z-index:1001; transition:width .12s linear;
  box-shadow:0 0 8px rgba(251,212,15,.6);
}

/* subtle floaty hover lift already exists on .btn / .pricing-card;
   add gentle continuous float to hero image for extra life */
@keyframes gentleFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@media (min-width:769px){
  #top .split-img img{animation:gentleFloat 5.5s ease-in-out infinite;}
}
@media (prefers-reduced-motion: reduce){
  #top .split-img img{animation:none;}
}

/* ============================================================
   INNER / LEGAL PAGES  (About, Contact, Terms, Privacy, Disclaimer, Author Bio)
   ============================================================ */
.page-hero{
  background:var(--navy-deep);
  color:#fff;
  text-align:center;
  padding:3.4rem 20px 2.6rem;
}
.page-hero h1{font-size:2.2rem; line-height:1.2; margin:0;}
.page-hero .updated{opacity:.75; font-size:1rem; margin-top:.7rem; font-weight:400;}

.legal-content{padding:3.2rem 0 4.5rem;}
.legal-content .container{max-width:820px;}
.legal-content h2{font-size:1.55rem; color:var(--ink-soft); margin:2.2rem 0 .9rem;}
.legal-content h2:first-of-type{margin-top:0;}
.legal-content p{font-size:1.15rem; font-weight:400; line-height:1.75; margin:0 0 1.1rem; color:#111;}
.legal-content ul,.legal-content ol{padding-left:1.4rem; margin:0 0 1.1rem;}
.legal-content li{font-size:1.15rem; font-weight:400; line-height:1.75; margin-bottom:.5rem;}
.legal-content a{color:var(--navy); text-decoration:underline; text-underline-offset:2px;}
.legal-content a:hover{color:var(--navy-deep);}
.legal-content strong{color:var(--ink-soft);}

/* Contact page info cards */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:1.4rem;
  margin:2.2rem 0 2.6rem;
}
.contact-card{
  background:var(--cream);
  border-radius:1.2rem;
  padding:1.8rem 1.4rem;
  text-align:center;
}
.contact-card svg{color:var(--navy-deep); width:30px; height:30px; margin-bottom:.7rem;}
.contact-card h3{font-size:1.15rem; color:var(--ink-soft); margin:0 0 .4rem;}
.contact-card p{margin:0; font-size:1.05rem; font-weight:400;}
.contact-card a{color:var(--navy); font-weight:600; text-decoration:none;}
.contact-card a:hover{text-decoration:underline;}

/* Author bio page (text-only, no image) */
.author-card{
  background:var(--cream2); border-radius:1.4rem; padding:2rem; margin-bottom:2rem;
  text-align:center;
}
.author-card .author-meta h2{margin:0 0 .3rem; font-size:1.4rem; color:var(--ink-soft);}
.author-card .author-meta .role{font-weight:600; color:var(--navy); margin-bottom:.9rem; display:block;}
.author-card .author-meta p{text-align:left; max-width:640px; margin-left:auto; margin-right:auto;}

/* ============================================================
   404 PAGE
   ============================================================ */
.error-page{
  min-height:64vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:4rem 20px;
  background:var(--cream);
}
.error-page .error-code{
  font-size:6.5rem; font-weight:800; color:var(--navy-deep);
  line-height:1; margin:0;
}
.error-page h1{font-size:1.7rem; color:var(--ink-soft); margin:1rem 0 .8rem;}
.error-page p{font-size:1.2rem; color:#333; margin:0 0 2rem; font-weight:400;}
@media (max-width:520px){
  .error-page .error-code{font-size:4.5rem;}
}