/* ===================================================================
   SODAPEAK — soda-peak.com (2nd domain, SAME product as
   sodapeakofficial.com — per standing rule, BOTH design AND content
   are genuinely different from that build)
   Palette : ink #1F1B18 (near-black) | ink-dk #110E0C | steel(=deep
             burgundy-red accent, from the label's horse-badge ring —
             now the PRIMARY accent, inverted from the prior build's
             gold-primary emphasis) #7A1F2B | steel-dk #591620 |
             sage(=gold, now a secondary highlight) #B8860B | stone
             #FAF7F2 | sand #F0E6D4 | slate #453A34 | line #E8DCC5
   Type    : 'Bebas Neue' (bold condensed display, headings and big
             numbers only) + 'Barlow' (clean, readable body/UI text)
             — a fresh pairing, distinct from the prior build's
             Teko+Mulish
   Motif   : the ember spark — small ember/spark particles rising and
             fading, echoing daily energy and vitality; distinct from
             the prior build's "Medallion Burst" (radiating rays from
             a circular badge)
   Layout  : STRUCTURALLY UNIQUE HERO for THIS project: a POWER BEAM
             BURST. Thin angular light beams radiate outward from
             directly behind the bottle in a straight-line starburst,
             echoing the infographic's own "Fuel Your Peak
             Performance" backdrop glow - distinct from the prior
             SodaPeak build's "Medallion Backdrop" (a circular badge
             RING sitting behind the bottle) - this is straight
             radiating BEAMS, not a ring. Confirmed with the user via
             5 mockup options before building. The bottle image
             itself is NEVER clipped or masked by the beams - it
             stays fully open with object-fit:contain.
   Voice   : confident, direct brand voice. Structure-function claims
             only - supports energy, stamina, and vitality as part of
             a balanced lifestyle. NEVER claims to cure or guarantee
             any specific sexual performance outcome.
   SOURCING NOTE: the given competitor review URL for this build
             (utcardiothoracicsurgery.com) could not be accessed
             (robots-disallowed), and web search did not surface a
             reliable independent breakdown of SodaPeak's specific
             named ingredients here either - consistent with the
             prior build's finding. Per this project's standing rule
             against inventing facts, this build again does NOT name
             specific herbs or ingredients not confirmed by the
             product's own supplied photography - it describes the
             formula only in the general terms the official assets
             confirm ("supports energy, stamina, and vitality").
   CONTENT DIFFERENTIATION: this build uses fresh testimonial
             photography (cafe, backyard, and mountain-trail lifestyle
             shots, distinct from the prior build's plain headshots),
             new testimonial names/quotes/settings, and rewritten
             section copy throughout, per the standing rule that a
             same-product/different-domain build must differ in both
             title and content, not just visuals.
   Rules   : grids minmax(0,1fr) · flex min-width:0 · img max-width min(Npx,100%)
             mobile hero order = IMAGE first, then H1, then rest
=================================================================== */

:root{
  --ink:#1F1B18;
  --ink-dk:#110E0C;
  --steel:#7A1F2B;
  --steel-dk:#591620;
  --sage:#B8860B;
  --stone:#FAF7F2;
  --sand:#F0E6D4;
  --slate:#453A34;
  --line:#E8DCC5;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--stone);color:#211C18;
  font-family:'Barlow',system-ui,sans-serif;font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Bebas Neue',sans-serif;font-weight:700;line-height:1.24;margin:0 0 .5em;
  color:var(--ink);text-transform:none;overflow-wrap:break-word;word-break:break-word}
h1{font-size:clamp(2.05rem,5vw,2.95rem);font-weight:800}
h2{font-size:clamp(1.55rem,3.1vw,2.05rem)}
h3{font-size:1.25rem}
h4{font-family:'Barlow',sans-serif;font-weight:600;font-size:1.02rem;margin:0 0 .5em;color:var(--ink)}
p{margin:0 0 1.15em}
a{color:inherit;text-decoration:none}
strong,b{color:var(--ink)}
img{max-width:100%;height:auto;display:block}
.s2-wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.s2-narrow{max-width:830px;margin:0 auto}
.s2-mid{text-align:center}

.s2-eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel-dk);margin-bottom:.8em}
.s2-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 19px;font-size:.8rem;font-weight:700;color:var(--ink);
  box-shadow:0 4px 14px rgba(28,56,50,.06)}

/* ---------- buttons ---------- */
.s2-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);color:#fff;font-weight:700;font-size:.98rem;font-family:'Barlow',sans-serif;
  padding:15px 30px;border:none;border-radius:6px;cursor:pointer;letter-spacing:.02em;
  transition:transform .16s,box-shadow .16s,background .16s;
  box-shadow:0 10px 24px rgba(28,56,50,.26)}
.s2-btn:hover{background:var(--ink-dk);transform:translateY(-2px);color:#fff}
.s2-btn-sage{background:var(--sage);box-shadow:0 10px 24px rgba(110,156,126,.32)}
.s2-btn-sage:hover{background:#5A8768}
.s2-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;border:1px solid var(--line);color:var(--ink);font-family:'Barlow',sans-serif;
  font-weight:600;font-size:.95rem;padding:14px 26px;border-radius:6px;transition:.16s}
.s2-btn-ghost:hover{border-color:var(--steel);color:var(--steel-dk)}
.s2-btn-full{width:100%}

/* ---------- top bar ---------- */
.s2-strip{background:var(--ink);color:#B9CBC4;font-size:.76rem;text-align:center;padding:9px 16px}
.s2-strip b{color:var(--sage)}
.s2-strip span{white-space:nowrap;margin:0 10px;display:inline-block}
@media(max-width:580px){.s2-strip{font-size:.7rem;line-height:1.55}.s2-strip span{white-space:normal;margin:0 6px}}

/* ---------- nav ---------- */
.s2-nav{position:sticky;top:0;z-index:900;background:rgba(247,246,241,.94);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line)}
.s2-nav .s2-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px}
.s2-logo{font-family:'Bebas Neue',sans-serif;font-weight:700;font-size:1.3rem;color:var(--ink);white-space:nowrap;letter-spacing:.01em}
.s2-logo em{font-style:normal;color:var(--steel-dk)}
.s2-links{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.s2-links a{font-size:.87rem;font-weight:600;color:var(--ink);opacity:.8}
.s2-links a:hover{opacity:1;color:var(--steel-dk)}
.s2-links a.s2-btn,.s2-links a.s2-btn:hover{color:#fff;opacity:1}
.s2-toggle{display:none;background:none;border:none;color:var(--ink);font-size:1.5rem;cursor:pointer;line-height:1}
@media(max-width:1020px){
  .s2-links{position:absolute;top:100%;left:0;right:0;background:var(--stone);flex-direction:column;
    align-items:stretch;gap:0;border-top:1px solid var(--line);display:none;max-height:76vh;overflow:auto}
  .s2-links.open{display:flex}
  .s2-links li{border-bottom:1px solid var(--line)}
  .s2-links a{display:block;padding:15px 22px}
  .s2-links .s2-btn{margin:14px 22px;width:calc(100% - 44px)}
  .s2-toggle{display:block}
}

/* ---------- sections ---------- */
.s2-sec{padding:76px 0}
.s2-sec-sand{background:var(--sand)}
.s2-sec-dark{background:var(--ink);color:#B9CBC4}
.s2-sec-dark h2,.s2-sec-dark h3,.s2-sec-dark h4{color:#fff}
.s2-sec-dark .s2-eyebrow{color:#8FBBA8}
.s2-head{max-width:770px;margin:0 auto 44px;text-align:center}
.s2-head p{color:var(--slate)}
.s2-sec-dark .s2-head p{color:#AABDB4}

/* ---------- HERO : POWER BEAM BURST — thin angular beams radiate from behind the bottle, NEVER clipping the image ---------- */
.s2-hero{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-dk) 100%);padding:54px 0 68px;overflow:hidden;position:relative}
.s2-hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:50px;align-items:center;
  position:relative;z-index:1}
.s2-hero-shot{order:1;position:relative;display:flex;justify-content:center;align-items:center;min-height:260px}
.s2-beam{position:absolute;left:50%;top:50%;width:2px;height:120px;background:linear-gradient(180deg,rgba(184,134,11,.55),transparent);
  transform-origin:top center}
.s2-beam.b1{transform:translate(-50%,-100%) rotate(0deg)}
.s2-beam.b2{transform:translate(-50%,-100%) rotate(32deg)}
.s2-beam.b3{transform:translate(-50%,-100%) rotate(-32deg)}
.s2-beam.b4{transform:translate(-50%,-100%) rotate(64deg)}
.s2-beam.b5{transform:translate(-50%,-100%) rotate(-64deg)}
.s2-beam.b6{transform:translate(-50%,-100%) rotate(96deg)}
.s2-beam.b7{transform:translate(-50%,-100%) rotate(-96deg)}
.s2-hero-copy{order:2}
.s2-hero-shot img{max-width:min(215px,100%);width:100%;height:auto;object-fit:contain;margin:0 auto;
  position:relative;z-index:2;filter:drop-shadow(0 22px 34px rgba(0,0,0,.55))}
.s2-beam-tag{position:absolute;bottom:2%;right:2%;background:var(--ink-dk);border:1px solid #3a2f28;border-radius:10px;
  padding:8px 14px;font-size:.74rem;font-weight:700;color:var(--sage);box-shadow:0 10px 20px rgba(0,0,0,.4);
  z-index:3;white-space:nowrap}
.s2-hero h1{color:#fff}
.s2-hero h1 em{font-style:normal;color:var(--sage)}
.s2-lede{font-size:1.05rem;color:#C9BFAE;max-width:37em}

.s2-answer{background:var(--ink-dk);border-left:4px solid var(--steel);border-radius:0 8px 8px 0;
  padding:23px 25px;margin:0 0 22px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.s2-answer .tag{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);margin-bottom:9px}
.s2-answer p{margin:0;color:#C9BFAE}
.s2-answer p.first{color:#fff;font-weight:700;margin-bottom:.75em}

.s2-facts{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0 0 22px;padding:0}
.s2-facts li{background:var(--ink-dk);border:1px solid #3a2f28;border-radius:999px;padding:7px 15px;
  font-size:.8rem;font-weight:700;color:#fff}

.s2-check{list-style:none;margin:0 0 24px;padding:0}
.s2-check li{position:relative;padding-left:32px;margin-bottom:11px;font-size:.96rem;font-weight:500;color:#E6DECF}
.s2-check li::before{content:'';position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;
  background:var(--sage);box-shadow:0 0 0 4px rgba(184,134,11,.25)}
.s2-check li::after{content:'\2713';position:absolute;left:4px;top:6.5px;color:var(--ink-dk);font-size:.62rem;font-weight:800}

.s2-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 26px}
.s2-figures div{background:var(--ink-dk);border:1px solid #3a2f28;border-radius:8px;padding:14px 8px;text-align:center}
.s2-figures b{display:block;font-family:'Bebas Neue',sans-serif;font-weight:700;font-size:1.4rem;color:var(--sage);line-height:1.1}
.s2-figures span{font-size:.68rem;font-weight:700;color:#A79D8C;text-transform:uppercase;letter-spacing:.05em}

.s2-hero-btns{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:20px}
.s2-hero-trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.78rem;font-weight:700;color:#A79D8C}

@media(max-width:920px){
  .s2-hero-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .s2-hero-copy{display:contents}
  .s2-hero-shot{order:1;min-height:200px}
  .s2-hero-title{order:2}
  .s2-hero-rest{order:3}
  .s2-hero-shot img{max-width:min(175px,100%)}
  .s2-beam{height:85px}
  .s2-beam-tag{bottom:0;right:0}
}

/* ---------- "the ember spark" signature — small ember/spark particles rising and fading, echoing daily energy ---------- */
.s2-ascent{margin-top:18px;background:var(--ink-dk);border:1px solid #3a2f28;border-radius:12px;padding:18px 18px 14px;
  box-shadow:0 8px 22px rgba(0,0,0,.3);text-align:center;max-width:260px;margin-left:auto;margin-right:auto}
.s2-ascent h4{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sage);
  margin-bottom:8px;font-family:'Barlow',sans-serif;font-weight:700}
.s2-ascent svg{display:block;margin:0 auto;overflow:visible}
.s2-ember{fill:var(--sage);opacity:0;animation:s2EmberRise 2.6s ease-out infinite}
.s2-ascent-cap{font-size:.68rem;font-weight:700;color:#A79D8C;margin-top:8px}
@keyframes s2EmberRise{0%{opacity:0;transform:translateY(4px) scale(.5)}20%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:.5;transform:translateY(-26px) scale(.7)}100%{opacity:0;transform:translateY(-32px) scale(.4)}}
@media(prefers-reduced-motion:reduce){.s2-ember{animation:none;opacity:.6;transform:none}}

/* ---------- grids ---------- */
.s2-grid{display:grid;gap:20px}
.s2-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.s2-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s2-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.s2-g4{grid-template-columns:repeat(2,minmax(0,1fr))}.s2-g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.s2-g4,.s2-g3,.s2-g2{grid-template-columns:minmax(0,1fr)}}

.s2-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 22px}
.s2-card p{color:var(--slate);font-size:.93rem;margin:0}
.s2-sec-dark .s2-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.s2-sec-dark .s2-card p{color:#AABDB4}
.s2-card-badge{text-align:center}
.s2-card-badge img{max-width:min(135px,100%);margin:0 auto 14px;border-radius:6px}

.s2-idx{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;
  background:var(--ink);color:#fff;font-family:'Bebas Neue',sans-serif;font-weight:700;font-size:.9rem;margin-bottom:13px}
.s2-idx-sage{background:var(--sage)}

/* ---------- split ---------- */
.s2-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
@media(max-width:920px){.s2-split{grid-template-columns:minmax(0,1fr);gap:30px}}
.s2-split img{max-width:min(440px,100%);margin:0 auto;border-radius:8px}
.s2-split-copy p{color:var(--slate)}
.s2-sec-dark .s2-split-copy p{color:#AABDB4}

/* ---------- list ---------- */
.s2-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
@media(max-width:780px){.s2-list{grid-template-columns:minmax(0,1fr)}}
.s2-list li{background:#fff;border:1px solid var(--line);border-left:3px solid var(--steel);
  border-radius:0 8px 8px 0;padding:15px 18px;font-size:.92rem;color:var(--slate)}
.s2-list li b{display:block;color:var(--ink);margin-bottom:3px;font-size:.97rem;font-family:'Barlow',sans-serif}

/* ---------- callouts ---------- */
.s2-callout{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 24px;font-size:.92rem;color:var(--slate)}
.s2-callout b{color:var(--ink)}
.s2-callout a{color:var(--steel-dk);text-decoration:underline;text-underline-offset:3px}
.s2-flagbox{background:#F2EEDF;border:1px solid #DCCE9E;border-radius:8px;padding:21px 23px;font-size:.9rem;color:#5F5423}
.s2-flagbox b{color:#7A6A1E}
.s2-alert{background:#EAEFE9;border:1px solid #BFD0BE;border-radius:8px;padding:21px 23px;font-size:.9rem;color:#33453A}
.s2-alert b{color:var(--steel-dk)}

/* ---------- reviews ---------- */
.s2-rev-head{display:flex;align-items:center;gap:13px;margin-bottom:11px}
.s2-rev-head img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0}
.s2-rev-name{font-weight:700;font-size:.94rem;color:var(--ink);font-family:'Barlow',sans-serif}
.s2-rev-sub{font-size:.77rem;color:var(--slate)}
.s2-stars{color:#6E9C7E;letter-spacing:2px;font-size:.9rem;margin-bottom:8px}
.s2-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:center;margin-top:34px}
@media(max-width:680px){.s2-board{grid-template-columns:minmax(0,1fr)}}
.s2-board b{display:block;font-family:'Bebas Neue',sans-serif;font-weight:700;font-size:1.85rem;color:var(--ink)}
.s2-board span{font-size:.78rem;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.08em}

/* ---------- pricing ---------- */
.s2-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
@media(max-width:980px){.s2-plans{grid-template-columns:minmax(0,1fr);max-width:430px;margin:0 auto}}
.s2-plan{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px 22px;text-align:center;
  display:flex;flex-direction:column;position:relative}
.s2-plan.top{border-color:var(--sage);box-shadow:0 24px 46px rgba(110,156,126,.2)}
@media(min-width:981px){.s2-plan.top{transform:translateY(-10px)}}
.s2-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--sage);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:999px;
  white-space:nowrap;font-family:'Bebas Neue',sans-serif}
.s2-badge-steel{background:var(--steel);color:#fff}
.s2-plan img.pk{max-width:min(190px,100%);max-height:170px;width:auto;height:170px;object-fit:contain;margin:8px auto 16px}
.s2-plan-ttl{font-family:'Barlow',sans-serif;font-weight:700;font-size:1.28rem;color:var(--ink)}
.s2-plan-sub{font-size:.83rem;color:var(--slate);margin-bottom:14px}
.s2-plan-price{font-family:'Bebas Neue',sans-serif;font-weight:700;font-size:2.2rem;color:var(--ink);line-height:1}
.s2-plan-price small{font-family:'Barlow',sans-serif;font-size:.8rem;font-weight:700;color:var(--slate)}
.s2-plan-was{text-decoration:line-through;color:var(--slate);font-size:.86rem;margin:8px 0 2px}
.s2-plan-tot{font-weight:700;font-size:.97rem;color:var(--ink);margin-bottom:6px}
.s2-plan-ship{font-size:.83rem;font-weight:700;color:var(--steel-dk);margin-bottom:12px}
.s2-plan-ship.pay{color:var(--slate)}
.s2-plan ul{list-style:none;margin:0 0 18px;padding:0;text-align:left;font-size:.86rem;color:var(--slate)}
.s2-plan ul li{position:relative;padding-left:21px;margin-bottom:7px}
.s2-plan ul li::before{content:'\2713';position:absolute;left:0;color:var(--steel-dk);font-weight:700}
.s2-plan .s2-btn{margin-top:auto}
.s2-plan .cards{max-width:min(165px,100%);margin:13px auto 0;opacity:.6}

/* ---------- guarantee ---------- */
.s2-guar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:36px}
@media(max-width:820px){.s2-guar{grid-template-columns:minmax(0,1fr);gap:24px;text-align:center;padding:28px 22px}}
.s2-guar img{max-width:min(175px,100%);margin:0 auto}
.s2-guar p{color:var(--slate)}

/* ---------- steps ---------- */
.s2-steps{display:grid;gap:15px}
.s2-step-row{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 24px;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.s2-step-row .n{width:34px;height:34px;border-radius:6px;background:rgba(78,124,142,.14);color:var(--steel-dk);
  font-family:'Bebas Neue',sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.92rem}
.s2-step-row p{margin:0;color:var(--slate);font-size:.93rem}

/* ---------- FAQ ---------- */
.s2-faq{border-top:1px solid var(--line)}
.s2-faq-row{border-bottom:1px solid var(--line)}
.s2-faq-btn{width:100%;background:none;border:none;text-align:left;cursor:pointer;padding:20px 4px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:'Bebas Neue',sans-serif;font-weight:600;font-size:1.04rem;color:var(--ink)}
.s2-faq-btn::after{content:'+';font-size:1.5rem;color:var(--steel-dk);flex-shrink:0;transition:transform .2s;font-family:'Barlow',sans-serif}
.s2-faq-row.on .s2-faq-btn::after{transform:rotate(45deg)}
.s2-faq-body{max-height:0;overflow:hidden;transition:max-height .28s ease}
.s2-faq-body p{padding:0 4px 20px;margin:0;color:var(--slate);font-size:.94rem}

/* ---------- refs ---------- */
.s2-refs{list-style:none;margin:0 0 18px;padding:0}
.s2-refs li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.91rem;color:var(--slate)}
.s2-refs a{color:var(--steel-dk);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- final CTA ---------- */
.s2-final{background:linear-gradient(150deg,var(--ink) 0%,var(--ink-dk) 100%);border-radius:14px;
  padding:52px 30px;text-align:center}
.s2-final h2{color:#fff}
.s2-final p{color:#B9CBC4}
.s2-final img{max-width:min(260px,100%);margin:22px auto}
.s2-final .old{color:#B9CBC4;text-decoration:line-through}
.s2-final .new{font-family:'Bebas Neue',sans-serif;font-weight:700;font-size:2.05rem;color:var(--sage);margin:4px 0 20px}
.s2-final .sm{font-size:.84rem;color:#B9CBC4;margin:16px 0 0}

/* ---------- breadcrumb ---------- */
.s2-crumb{font-size:.81rem;color:var(--slate);padding:16px 0 0}
.s2-crumb a{color:var(--steel-dk);font-weight:700}
.s2-crumb i{font-style:normal;margin:0 7px;opacity:.5}

/* ---------- related ---------- */
.s2-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:780px){.s2-rel{grid-template-columns:minmax(0,1fr)}}
.s2-rel a{display:block;background:#fff;border:1px solid var(--line);border-radius:8px;padding:19px 20px;transition:.15s}
.s2-rel a:hover{border-color:var(--sage);transform:translateY(-2px)}
.s2-rel b{display:block;font-size:.98rem;color:var(--ink);margin-bottom:5px;font-family:'Barlow',sans-serif}
.s2-rel span{font-size:.84rem;color:var(--slate)}

/* ---------- article ---------- */
.s2-article h2{margin-top:1.6em}
.s2-article h3{margin-top:1.35em}
.s2-article p{color:var(--slate)}
.s2-article a{color:var(--steel-dk);text-decoration:underline;text-underline-offset:3px}
.s2-meta{font-size:.86rem;color:var(--slate);margin-bottom:26px}
.s2-meta a{color:var(--steel-dk);font-weight:700}

/* ---------- footer ---------- */
.s2-foot{background:var(--ink-dk);color:#8AA098;padding:48px 0 34px;font-size:.87rem}
.s2-foot a{color:#CBDAD3}
.s2-foot a:hover{color:var(--sage)}
.s2-foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 25px;list-style:none;margin:0 0 20px;padding:0;font-weight:700}
.s2-foot-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 21px;list-style:none;margin:0 0 26px;padding:0;font-size:.84rem}
.s2-foot hr{border:none;border-top:1px solid rgba(255,255,255,.1);margin:22px 0}
.s2-foot p{margin:0 0 14px;line-height:1.68}
.s2-foot .cr{text-align:center;font-size:.84rem;opacity:.85;margin-top:22px}

/* ---------- free bonuses ---------- */
.s2-bonus-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
@media(max-width:980px){.s2-bonus-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.s2-bonus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.s2-bonus-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 18px 24px;
  text-align:center;transition:transform .16s,box-shadow .16s}
.s2-bonus-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(31,27,24,.09);border-color:var(--steel)}
.s2-bonus-tag{display:inline-block;background:var(--steel);color:#fff;font-size:.63rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 12px;border-radius:999px;margin-bottom:14px}
.s2-bonus-card img{max-width:135px;margin:0 auto 15px;border-radius:3px;
  box-shadow:0 14px 26px rgba(31,27,24,.18)}
.s2-bonus-card h4{font-size:.94rem;margin-bottom:7px}
.s2-bonus-card p{font-size:.82rem;color:var(--slate);margin:0}

/* ---------- guarantee badge ---------- */
.s2-guar-badge{display:flex;align-items:center;justify-content:center;position:relative;padding:10px}
.s2-guar-badge::before{content:'';position:absolute;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,rgba(122,31,43,.13) 0%,transparent 72%);z-index:0}
.s2-guar-badge img,.s2-guar-badge svg{position:relative;z-index:1;margin:0}

/* ================= SECTION-UNIQUE TREATMENT #1 =================
   Ingredients: icon-cards with a copper top-bar (used ONLY here) */
.s2-ing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:980px){.s2-ing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.s2-ing-grid{grid-template-columns:minmax(0,1fr)}}
.s2-ing-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.s2-ing-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(31,27,24,.09);border-color:var(--steel)}
.s2-ing-top{height:5px}
.s2-ing-body{padding:21px 21px 19px;flex:1;display:flex;flex-direction:column}
.s2-ing-head{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.s2-ing-icon{width:42px;height:42px;min-width:42px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:1.25rem}
.s2-ing-name{font-family:'Barlow',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);line-height:1.22;margin:0}
.s2-ing-cat{font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);margin-top:3px}
.s2-ing-body p{color:var(--slate);font-size:.87rem;margin:0 0 15px;flex:1;line-height:1.6}
.s2-ing-dose{font-size:.7rem;font-weight:700;color:var(--steel-dk);background:var(--stone);border:1px solid var(--line);
  border-radius:6px;padding:6px 10px;display:inline-flex;align-items:center;gap:6px;width:fit-content}
.s2-ing-dose.warn{color:#9C4221;background:#FBEEE8;border-color:#F0D3C2}
.s2-ing-dose.on{color:#1F6B5C;background:#E4F3EC;border-color:#C4E3D4}

/* pathway breakdown table (replaces a typical dose-table since doses ARE disclosed here;
   this instead shows the NO/circulation-pathway redundancy honestly) */
.s2-pathtable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:.85rem}
.s2-pathtable th{background:var(--ink);color:#fff;text-align:left;padding:12px 14px;font-family:'Barlow',sans-serif;font-weight:700;font-size:.85rem}
.s2-pathtable td{padding:12px 14px;border-top:1px solid var(--line);color:var(--slate)}
.s2-pathtable tr:nth-child(even) td{background:var(--sand)}
.s2-pathtable td b{color:var(--ink)}
.s2-pathtable-wrap{overflow-x:auto}
@media(max-width:680px){.s2-pathtable{font-size:.76rem}.s2-pathtable th,.s2-pathtable td{padding:9px 10px}}

/* ================= SECTION-UNIQUE TREATMENT #2 =================
   Benefits: a horizontal ribbon-list, icon left / text right, used
   ONLY in the Benefits section — deliberately different from the
   ingredient icon-card grid above */
.s2-ribbon-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.s2-ribbon{display:flex;align-items:flex-start;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
.s2-ribbon:last-child{border-bottom:none}
.s2-ribbon:nth-child(even){background:var(--stone)}
.s2-ribbon-icon{width:44px;height:44px;min-width:44px;border-radius:50%;background:var(--sand);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--steel-dk)}
.s2-ribbon-body h4{margin:0 0 4px;font-size:1.02rem;color:var(--ink)}
.s2-ribbon-body p{margin:0;color:var(--slate);font-size:.9rem}

/* ================= SECTION-UNIQUE TREATMENT #3 =================
   Quick How-To-Use: a connected vertical timeline, used ONLY here —
   distinct from both the icon-card grid and the ribbon list */
.s2-timeline{position:relative;padding-left:38px}
.s2-timeline::before{content:'';position:absolute;left:13px;top:6px;bottom:6px;width:2px;background:var(--line)}
.s2-tl-item{position:relative;padding-bottom:26px}
.s2-tl-item:last-child{padding-bottom:0}
.s2-tl-dot{position:absolute;left:-38px;top:0;width:28px;height:28px;border-radius:50%;background:var(--ink);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;font-family:'Bebas Neue',sans-serif;
  box-shadow:0 0 0 4px #fff, 0 0 0 5px var(--line)}
.s2-tl-item h4{margin:0 0 4px;font-size:1rem;color:var(--ink)}
.s2-tl-item p{margin:0;color:var(--slate);font-size:.9rem}

/* ================= SECTION-UNIQUE TREATMENT #4 =================
   The Difference: a two-column comparison callout ("Typical Formula"
   vs "VapoCept's Formula"), used ONLY here — distinct from every
   other section's visual treatment */
.s2-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
@media(max-width:760px){.s2-compare{grid-template-columns:minmax(0,1fr)}}
.s2-compare>div{padding:24px 24px 26px}
.s2-compare .a{background:var(--stone)}
.s2-compare .b{background:var(--ink);color:#fff}
.s2-compare h4{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;margin:0 0 14px}
.s2-compare .a h4{color:var(--steel-dk)}
.s2-compare .b h4{color:var(--steel)}
.s2-compare ul{margin:0;padding:0;list-style:none}
.s2-compare li{position:relative;padding-left:22px;margin-bottom:11px;font-size:.9rem;line-height:1.5}
.s2-compare .a li{color:var(--slate)}
.s2-compare .b li{color:#D8DBE6}
.s2-compare li::before{content:'\2022';position:absolute;left:2px;top:0;font-size:1.1rem}
.s2-compare .a li::before{color:var(--steel)}
.s2-compare .b li::before{color:var(--steel)}

/* ---------- blog hub hero + cards ---------- */
.s2-bhero{background:linear-gradient(160deg,var(--sand) 0%,var(--stone) 100%);padding:58px 0 44px;text-align:center;
  border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.s2-bhero::before{content:'';position:absolute;top:-40%;right:-10%;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(122,31,43,.12) 0%,transparent 70%);z-index:0}
.s2-bhero::after{content:'';position:absolute;bottom:-50%;left:-8%;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(184,134,11,.1) 0%,transparent 70%);z-index:0}
.s2-bhero>.s2-wrap{position:relative;z-index:1}
.s2-bhero .s2-pill{margin-bottom:18px}
.s2-bhero h1{margin-bottom:12px}
.s2-bhero p.lede{color:var(--slate);max-width:560px;margin:0 auto;font-size:1.02rem}
.s2-bhero-meta{display:flex;justify-content:center;align-items:center;gap:10px 22px;margin-top:24px;flex-wrap:wrap}
.s2-bhero-meta span{font-size:.72rem;font-weight:700;color:var(--steel-dk);text-transform:uppercase;letter-spacing:.08em;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px}

.s2-bsection-ttl{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-dk);
  margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--line);display:inline-block}
.s2-bgroup{margin-bottom:46px}
.s2-bgroup:last-child{margin-bottom:0}

.s2-bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:900px){.s2-bgrid{grid-template-columns:minmax(0,1fr)}}
.s2-bcard{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.s2-bcard:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(31,27,24,.1);border-color:var(--steel)}
.s2-bcard-head{background:var(--ink);padding:22px 22px 19px}
.s2-bcard-head .tag{display:block;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin-bottom:9px}
.s2-bcard-head h3{color:#fff;margin:0;font-size:1.08rem;line-height:1.3}
.s2-bcard-body{padding:19px 22px 22px;flex:1;display:flex;flex-direction:column}
.s2-bcard-body p{color:var(--slate);font-size:.89rem;flex:1;margin:0 0 14px}
.s2-bcard-body .read{color:var(--steel-dk);font-weight:700;font-size:.85rem;margin-top:auto;display:inline-flex;align-items:center;gap:5px}
.s2-bcard-body .read:hover{color:var(--steel)}

/* ---------- sticky bar ---------- */
.s2-sticky{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--ink-dk);
  border-top:2px solid var(--sage);padding:9px 15px;display:none;align-items:center;justify-content:space-between;
  gap:12px;box-shadow:0 -8px 24px rgba(0,0,0,.2)}
.s2-sticky .t{min-width:0;line-height:1.25;color:#fff}
.s2-sticky .t b{display:block;font-size:.92rem;color:var(--sage);font-family:'Bebas Neue',sans-serif}
.s2-sticky .t small{color:#B9CBC4;font-size:.71rem}
.s2-sticky .s2-btn{padding:11px 18px;font-size:.86rem;flex-shrink:0}
@media(max-width:920px){.s2-sticky{display:flex}body{padding-bottom:68px}}