:root{
    --navy:#132C56; --navy-dark:#0B1E3D; --sky:#EEF3FB; --sky-line:#D7E1F2;
    --ink:#1B2A2E; --ink-soft:#5B6B6E; --paper:#FFFFFF;
    --orange:#FF7A29; --orange-dark:#E6631A; --gold:#F5A623; --red:#D64545; --green-check:#1E9E6F;
    --max:700px; --maxwide:1120px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:"Plus Jakarta Sans", sans-serif; font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{color:var(--ink); line-height:1.2; margin:0 0 .5em; font-weight:700;}
  a{color:var(--navy-dark);}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxwide); margin:0 auto; padding:0 24px;}
  .prose{max-width:var(--max); margin:0 auto;}

  .topbar{background:var(--navy-dark); color:#DFF4EE; font-size:13px; padding:8px 0; text-align:center;}
  header.site{padding:18px 0; border-bottom:1px solid var(--sky-line); position:sticky; top:0; background:var(--paper); z-index:40;}
  header.site .wrap{display:flex; align-items:center; justify-content:space-between;}
  .logo{font-weight:800; font-size:21px; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px;}
  .logo .dot{width:9px; height:9px; border-radius:50%; background:var(--orange); display:inline-block;}
  .header-cta{background:var(--orange); color:#fff; font-weight:700; font-size:14px; padding:10px 20px; border-radius:24px; text-decoration:none; white-space:nowrap;}
  .header-cta:hover{background:var(--orange-dark);}

  .hero{background:var(--sky); padding:44px 0 40px;}
  .hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;}
  .hero h1{font-size:clamp(26px,3.6vw,34px);}
  .hero .sub{font-size:17.5px; color:var(--ink-soft); margin:0 0 22px;}
  .cta-btn{display:inline-block; background:var(--orange); color:#fff; font-weight:700; font-size:17px; padding:16px 32px; border-radius:10px; text-decoration:none; border:none; cursor:pointer; transition:background .15s ease, transform .1s ease; box-shadow:0 6px 18px rgba(255,122,41,.28);}
  .cta-btn:hover{background:var(--orange-dark); transform:translateY(-1px);}
  .cta-sub{font-size:13px; color:var(--ink-soft); margin-top:10px;}
  .hero-visual{background:radial-gradient(circle at 50% 40%, #F3F7FD 0%, #E3EBF8 70%, #D7E1F2 100%); border-radius:16px; border:1px solid var(--sky-line); aspect-ratio:4/5; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 16px 34px rgba(11,30,61,.14);}
  .hero-visual .badge-corner{position:absolute; top:14px; left:14px; background:var(--navy); color:#fff; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:20px; z-index:2;}
  .hero-visual img{width:78%; height:auto; object-fit:contain; filter:drop-shadow(0 18px 24px rgba(11,30,61,.25));}

  .trust-strip{background:#fff; border-bottom:1px solid var(--sky-line); padding:16px 0;}
  .trust-strip .wrap{display:flex; justify-content:center; gap:40px; flex-wrap:wrap;}
  .trust-item{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); font-weight:600;}
  .trust-item .ck{color:var(--green-check);}

  .eeat{background:var(--sky); padding:14px 0; font-size:13.5px; color:var(--ink-soft); border-bottom:1px solid var(--sky-line);}
  .eeat .wrap{display:flex; gap:26px; flex-wrap:wrap; justify-content:center;}
  .eeat strong{color:var(--ink); font-weight:700;}

  section{padding:52px 0;}
  section.alt{background:var(--sky);}
  h2{font-size:clamp(23px,2.8vw,28px);}
  h3{font-size:18.5px; margin-top:1.4em;}
  .prose p{margin:0 0 1.1em;}
  .prose ul{margin:0 0 1.1em; padding-left:1.3em;}
  .prose li{margin-bottom:.5em;}

  /* Numbered steps — real sequence, numbering justified here */
  .steps{list-style:none; margin:24px 0; padding:0; counter-reset:step;}
  .steps li{counter-increment:step; display:grid; grid-template-columns:44px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--sky-line); align-items:flex-start;}
  .steps li:last-child{border-bottom:none;}
  .steps li::before{content:counter(step); font-weight:800; font-size:17px; width:40px; height:40px; border-radius:12px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;}
  .steps .content{display:flex; gap:14px; align-items:center;}
  .steps .content img{width:88px; height:88px; border-radius:10px; object-fit:cover; flex:none; box-shadow:0 8px 18px rgba(11,30,61,.12);}
  .steps h4{margin:0 0 4px; font-size:16px; color:var(--ink);}
  .steps p{margin:0; font-size:14.5px; color:var(--ink-soft);}

  .bodyarea-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0;}
  .bodyarea-card{background:#fff; border:1px solid var(--sky-line); border-radius:10px; overflow:hidden;}
  .bodyarea-card img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
  .bodyarea-card .body{padding:14px 16px 16px;}
  .bodyarea-card h4{margin:0 0 6px; font-size:15px; color:var(--navy-dark);}
  .bodyarea-card p{margin:0; font-size:13.5px; color:var(--ink-soft);}

  .ingredient-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:22px 0;}
  .ing-card{background:#fff; border:1px solid var(--sky-line); border-radius:10px; padding:18px;}
  .ing-card h4{margin:0 0 6px; font-size:15.5px; color:var(--navy-dark);}
  .ing-card p{margin:0; font-size:14px; color:var(--ink-soft);}

  .note{background:#FDF1EC; border:1px solid #F3D3C4; padding:14px 18px; font-size:14px; color:#8A4224; border-radius:10px; margin:26px 0;}
  .note strong{color:#7A3A1E;}

  .section-photo{border-radius:14px; overflow:hidden; margin:24px 0; box-shadow:0 12px 28px rgba(11,30,61,.10);}
  .section-photo img{width:100%; height:auto; display:block;}

  .review-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0;}
  .review-col{border-radius:12px; padding:20px;}
  .review-col.pos{background:#F0FAF5; border:1px solid #CDECDB;}
  .review-col.neg{background:#FDF3F2; border:1px solid #F3D6D3;}
  .review-col h4{margin:0 0 12px; font-size:15px;}
  .review-col.pos h4{color:var(--green-check);}
  .review-col.neg h4{color:var(--red);}
  .review-col blockquote{margin:0 0 12px; font-size:14px; font-style:italic; color:var(--ink); padding-left:12px; border-left:2px solid currentColor; opacity:.85;}

  .buybox{max-width:var(--max); margin:0 auto; background:var(--sky); border:1px solid var(--sky-line); border-radius:14px; padding:32px; text-align:center;}
  .buybox img{width:110px; height:auto; margin:0 auto 16px; filter:drop-shadow(0 10px 14px rgba(11,30,61,.18));}
  .buybox .name{font-size:22px; font-weight:800; margin-bottom:6px;}
  .buybox .price-row{display:flex; justify-content:center; align-items:center; gap:12px; margin-bottom:6px;}
  .buybox .old{color:var(--ink-soft); text-decoration:line-through; font-size:17px;}
  .buybox .new{font-size:32px; font-weight:800; color:var(--navy-dark);}
  .buybox .price-note{font-size:13px; color:var(--ink-soft); margin-bottom:22px;}

  .faq-item{border-bottom:1px solid var(--sky-line);}
  .faq-q{width:100%; text-align:left; background:none; border:none; font-size:16px; font-weight:700; color:var(--ink); padding:17px 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;}
  .faq-q .icon{transition:transform .2s ease; flex:none; color:var(--navy);}
  .faq-item.open .faq-q .icon{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .faq-a p{padding-bottom:17px; color:var(--ink-soft); margin:0;}

  .final-cta{background:var(--navy-dark); color:#fff; padding:48px 0; text-align:center;}
  .final-cta h2{color:#fff; margin-bottom:10px;}
  .final-cta p{color:#CFEAE1; margin-bottom:24px;}

  .sources{font-size:13px; color:var(--ink-soft);}
  .sources li{margin-bottom:6px;}

  footer{background:var(--ink); color:#B9C3C5; padding:36px 0 96px; font-size:13px;}
  footer a{color:#B9C3C5; text-decoration:underline;}
  footer .legal-links{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px;}
  footer .disclaimer{opacity:.8; max-width:860px; line-height:1.6;}

  .sticky-cta{display:none; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--sky-line); padding:12px 16px; z-index:50; box-shadow:0 -4px 14px rgba(0,0,0,.08);}
  .sticky-cta .row{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:var(--maxwide); margin:0 auto;}
  .sticky-cta .cta-btn{padding:12px 20px; font-size:15px;}

  @media (max-width:860px){
    .hero .wrap{grid-template-columns:1fr;}
    .hero-visual{order:-1; aspect-ratio:16/9;}
    .bodyarea-grid{grid-template-columns:1fr 1fr;}
    .ingredient-grid, .review-grid{grid-template-columns:1fr;}
    .header-cta{display:none;}
    .sticky-cta{display:block;}
    footer{padding-bottom:104px;}
  }
  :focus-visible{outline:2px solid var(--orange-dark); outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .faq-a{transition:none;} }