/* ==========================================================================
   SlimTide Capsules Review — Custom Theme "Tidal"
   Built on Bootstrap 5.3
   ========================================================================== */

:root{
  --ink:#0B2E3B;
  --ink-2:#144654;
  --tide:#0E7C86;
  --tide-dk:#0A5C64;
  --surf:#4FC3C7;
  --sand:#F7F2E9;
  --sand-2:#EFE7D8;
  --foam:#FFFFFF;
  --coral:#E4572E;
  --coral-dk:#C2431F;
  --kelp:#2F6D4F;
  --muted:#5B6E75;
  --line:rgba(11,46,59,.14);

  --ff-display:'Fraunces',Georgia,serif;
  --ff-body:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-mono:'Roboto Mono',ui-monospace,'SFMono-Regular',monospace;

  --r:14px;
  --r-sm:8px;
  --shadow:0 10px 34px -18px rgba(11,46,59,.45);
  --shadow-lg:0 22px 60px -26px rgba(11,46,59,.55);
}

*{ -webkit-tap-highlight-color:transparent }
html{ scroll-behavior:smooth; scroll-padding-top:78px }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important }
}

body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--sand);
  font-size:1.0625rem;
  line-height:1.72;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{
  font-family:var(--ff-display);
  font-variation-settings:'SOFT' 20,'WONK' 1;
  font-weight:600;
  color:var(--ink);
  line-height:1.18;
  letter-spacing:-.015em;
}
h1{ font-size:clamp(1.7rem,4vw,2.7rem); font-weight:700; line-height:1.14 }
h2{ font-size:clamp(1.55rem,3.9vw,2.35rem) }
h3{ font-size:clamp(1.25rem,2.9vw,1.7rem) }
h4{ font-size:clamp(1.1rem,2.2vw,1.3rem) }
p{ margin-bottom:1.05rem }
a{ color:var(--tide); text-decoration-thickness:1px; text-underline-offset:3px }
a:hover{ color:var(--tide-dk) }
strong{ font-weight:700 }

:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:4px }

/* --- Eyebrow label ------------------------------------------------------ */
.eyebrow{
  font-family:var(--ff-mono);
  font-size:.7rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--tide);
  font-weight:500;
  display:inline-block;
  margin-bottom:.7rem;
}
.eyebrow--light{ color:var(--surf) }

/* --- Section rhythm ----------------------------------------------------- */
.sec{ padding:clamp(2.6rem,6vw,4.4rem) 0; position:relative }
.sec--tight{ padding:clamp(1.6rem,4vw,2.6rem) 0 }
.sec--sand{ background:var(--sand) }
.sec--foam{ background:var(--foam) }
.sec--ink{ background:var(--ink); color:#DCE7EA }
.sec--ink h2,.sec--ink h3,.sec--ink h4{ color:var(--foam) }
.sec--ink p{ color:#B9CBD1 }

/* --- Signature: tide-line divider --------------------------------------- */
.tideline{
  height:16px;
  width:100%;
  background-repeat:repeat-x;
  background-size:56px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='16' viewBox='0 0 56 16'%3E%3Cpath d='M0 8 C 7 0, 21 0, 28 8 S 49 16, 56 8' fill='none' stroke='%230E7C86' stroke-width='1.6' opacity='.42'/%3E%3C/svg%3E");
}
.tideline--foam{ background-color:var(--foam) }
.tideline--sand{ background-color:var(--sand) }

/* --- Buttons ------------------------------------------------------------ */
.btn{
  font-family:var(--ff-body);
  font-weight:700;
  letter-spacing:.01em;
  border-radius:999px;
  padding:.82rem 1.75rem;
  border:2px solid transparent;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn:active{ transform:translateY(1px) }

.btn-tide{ background:var(--coral); color:#fff; box-shadow:0 8px 22px -10px rgba(228,87,46,.8) }
.btn-tide:hover{ background:var(--coral-dk); color:#fff; box-shadow:0 12px 30px -10px rgba(228,87,46,.9) }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink) }
.btn-ghost:hover{ background:var(--ink); color:var(--foam) }

.btn-ghost-light{ background:transparent; color:var(--foam); border-color:rgba(255,255,255,.55) }
.btn-ghost-light:hover{ background:var(--foam); color:var(--ink) }

.btn-lg-cta{ font-size:1.06rem; padding:1rem 2.1rem }

/* Pulse only on the primary hero CTA, motion-safe */
@media (prefers-reduced-motion:no-preference){
  .btn-pulse{ animation:pulse 2.6s ease-in-out infinite }
  @keyframes pulse{
    0%,100%{ box-shadow:0 8px 22px -10px rgba(228,87,46,.8) }
    50%{ box-shadow:0 8px 30px -6px rgba(228,87,46,.95) }
  }
}

/* --- Navbar ------------------------------------------------------------- */
.nav-tide{
  background:rgba(11,46,59,.97);
  backdrop-filter:blur(8px);
  padding:.55rem 0;
  border-bottom:1px solid rgba(79,195,199,.22);
}
.nav-tide .navbar-brand{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:1.4rem;
  color:var(--foam);
  letter-spacing:-.02em;
}
.nav-tide .navbar-brand span{ color:var(--surf) }
.nav-tide .nav-link{
  color:#CBDDE2;
  font-weight:600;
  font-size:.94rem;
  padding:.45rem .85rem!important;
  border-radius:999px;
}
.nav-tide .nav-link:hover,.nav-tide .nav-link:focus{ color:var(--foam); background:rgba(79,195,199,.16) }
.nav-tide .navbar-toggler{ border-color:rgba(255,255,255,.35); padding:.35rem .55rem }
.nav-tide .navbar-toggler:focus{ box-shadow:0 0 0 3px rgba(228,87,46,.55) }
.nav-tide .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* --- Promo strip -------------------------------------------------------- */
.promo-strip{
  background:linear-gradient(96deg,var(--tide-dk),var(--tide) 55%,var(--surf));
  color:#fff;
  text-align:center;
  padding:.72rem 1rem;
  font-size:.95rem;
  font-weight:600;
  line-height:1.5;
}
.promo-strip .price-pop{
  font-family:var(--ff-mono);
  background:rgba(255,255,255,.19);
  padding:.1rem .5rem;
  border-radius:5px;
  font-weight:700;
  white-space:nowrap;
}

/* --- Affiliate disclosure ----------------------------------------------- */
.aff-note{
  background:var(--sand-2);
  border-left:4px solid var(--tide);
  border-radius:var(--r-sm);
  padding:.85rem 1.1rem;
  font-size:.855rem;
  line-height:1.62;
  color:var(--muted);
  margin:1.4rem 0 0;
}
.aff-note strong{ color:var(--ink) }

/* --- Hero --------------------------------------------------------------- */
.hero{
  background:
    radial-gradient(1100px 520px at 78% -8%,rgba(79,195,199,.30),transparent 62%),
    radial-gradient(760px 420px at 4% 108%,rgba(14,124,134,.16),transparent 60%),
    var(--sand);
  padding:clamp(1.6rem,4vw,3rem) 0 clamp(2rem,4.5vw,3.4rem);
}

/* Hero layout.
   Mobile  : single flex column -> H1, then image, then body copy.
   Desktop : CSS grid, text stacked in column 1, image spanning both rows in column 2.
   Bootstrap's .row/.col ordering is deliberately NOT used here — three columns
   totalling more than 12 units force a wrap that drops the image below the fold. */
.hero-grid{ display:flex; flex-direction:column; gap:1.1rem }
.hero-head,.hero-body,.hero-media{ min-width:0 }

@media (min-width:992px){
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:clamp(2rem,4vw,3.5rem);
    row-gap:.9rem;
    align-items:start;
  }
  .hero-head { grid-column:1; grid-row:1; align-self:end }
  .hero-body { grid-column:1; grid-row:2 }
  .hero-media{ grid-column:2; grid-row:1 / span 2; align-self:center }
}

.hero h1{ max-width:22ch; margin-bottom:0 }
@media (min-width:992px){ .hero h1{ max-width:100% } }

.hero-img-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
.hero-img-wrap::before{
  content:'';
  position:absolute;
  inset:6% 10%;
  background:radial-gradient(circle,rgba(79,195,199,.42),transparent 68%);
  filter:blur(34px);
  z-index:0;
}
.hero-img-wrap img{
  position:relative; z-index:1;
  width:100%; height:auto;
  max-width:240px;
  filter:drop-shadow(0 22px 34px rgba(11,46,59,.30));
}
@media (min-width:992px){ .hero-img-wrap img{ max-width:290px } }

.hero-sub{ font-size:1.06rem; color:var(--ink-2) }

.hero-badges{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin:1.15rem 0 .4rem; padding:0; list-style:none;
}
@media (min-width:992px){ .hero-badges{ justify-content:flex-start } }
.hero-badges li{
  font-family:var(--ff-mono);
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  background:var(--foam);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.36rem .8rem;
  color:var(--ink-2);
  font-weight:500;
}

/* --- SIGNATURE: supplement-facts label panel ---------------------------- */
.facts{
  background:var(--foam);
  border:2.5px solid var(--ink);
  border-radius:6px;
  padding:1.1rem 1.25rem 1.25rem;
  font-family:var(--ff-mono);
  font-size:.82rem;
  line-height:1.5;
  box-shadow:var(--shadow);
  max-width:430px;
}
.facts__title{
  font-family:var(--ff-display);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 .15rem;
  line-height:1.1;
}
.facts__serving{ display:flex; justify-content:space-between; font-size:.76rem; padding:.2rem 0 }
.facts__rule{ border:0; border-top:1px solid var(--ink); margin:.35rem 0; opacity:1 }
.facts__rule--thick{ border-top:8px solid var(--ink); margin:.4rem 0 }
.facts__rule--mid{ border-top:4px solid var(--ink); margin:.4rem 0 }
.facts__row{ display:flex; justify-content:space-between; gap:1rem; padding:.34rem 0; border-bottom:1px solid rgba(11,46,59,.16) }
.facts__row:last-of-type{ border-bottom:0 }
.facts__row span:first-child{ font-weight:500 }
.facts__row span:last-child{ font-weight:700; white-space:nowrap }
.facts__row--sub{ padding-left:1rem; font-size:.76rem; color:var(--muted); border-bottom:0; padding-top:.1rem; padding-bottom:.1rem }
.facts__foot{ font-size:.68rem; color:var(--muted); margin-top:.6rem; line-height:1.5 }

/* --- Cards -------------------------------------------------------------- */
.card-tide{
  background:var(--foam);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.5rem;
  height:100%;
  transition:transform .2s ease,box-shadow .2s ease;
}
.card-tide:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.card-tide h3,.card-tide h4{ margin-bottom:.5rem }

.trust-card{ text-align:center; background:var(--foam); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1rem; height:100% }
.trust-card img{ max-width:118px; width:100%; height:auto; margin-bottom:.75rem }
.trust-card h3{ font-size:1.06rem; margin-bottom:.4rem }
.trust-card p{ font-size:.9rem; color:var(--muted); margin:0 }

/* --- Ingredient blocks -------------------------------------------------- */
.ingr{
  background:var(--foam);
  border:1px solid var(--line);
  border-left:5px solid var(--tide);
  border-radius:var(--r-sm);
  padding:1.35rem 1.5rem;
  height:100%;
}
.ingr__dose{
  font-family:var(--ff-mono);
  font-size:.78rem;
  font-weight:700;
  color:var(--foam);
  background:var(--tide);
  padding:.2rem .6rem;
  border-radius:5px;
  display:inline-block;
  margin-bottom:.55rem;
}
.ingr__name{ font-size:1.14rem; margin-bottom:.45rem }
.ingr__latin{ font-style:italic; color:var(--muted); font-size:.9rem }
.ingr p{ font-size:.94rem; margin-bottom:.6rem }
.ingr p:last-child{ margin-bottom:0 }

/* --- Benefit list ------------------------------------------------------- */
.blist{ list-style:none; padding:0; margin:0 }
.blist li{
  position:relative;
  padding:.62rem 0 .62rem 2.15rem;
  border-bottom:1px dashed var(--line);
  font-size:1rem;
}
.blist li:last-child{ border-bottom:0 }
.blist li::before{
  content:'';
  position:absolute; left:.15rem; top:1.02rem;
  width:16px; height:9px;
  border-left:2.5px solid var(--tide);
  border-bottom:2.5px solid var(--tide);
  transform:rotate(-45deg);
}

/* --- Pricing ------------------------------------------------------------ */
.price-card{
  background:var(--foam);
  border:2px solid var(--line);
  border-radius:var(--r);
  padding:1.6rem 1.35rem;
  text-align:center;
  height:100%;
  display:flex; flex-direction:column;
  position:relative;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.price-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg) }
.price-card--best{ border-color:var(--coral); box-shadow:var(--shadow) }
.price-card__flag{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--coral); color:#fff;
  font-family:var(--ff-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  padding:.32rem .95rem; border-radius:999px; white-space:nowrap;
}
.price-card img{ max-width:190px; width:100%; height:auto; margin:.4rem auto .9rem }
.price-card__qty{ font-family:var(--ff-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.price-card__big{ font-family:var(--ff-display); font-size:2.7rem; font-weight:700; line-height:1; color:var(--tide); margin:.35rem 0 .1rem }
.price-card__big sup{ font-size:1.2rem; top:-1rem }
.price-card__per{ font-size:.86rem; color:var(--muted); margin-bottom:.7rem }
.price-card__total{ font-family:var(--ff-mono); font-size:.95rem; font-weight:700; margin-bottom:.15rem }
.price-card__ship{ font-size:.85rem; color:var(--kelp); font-weight:600; margin-bottom:1rem }
.price-card .btn{ margin-top:auto; width:100% }

/* --- Notice / warning strip --------------------------------------------- */
.notice{
  background:#FFF4E8;
  border:1px solid #F0C9A4;
  border-radius:var(--r-sm);
  padding:1rem 1.2rem;
  font-size:.95rem;
  color:#7A4318;
}
.notice strong{ color:#5E3210 }

/* --- Guarantee ---------------------------------------------------------- */
.guarantee{ background:var(--foam); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow) }
.guarantee img{ max-width:210px; width:100%; height:auto }

/* --- Review summary cards ----------------------------------------------- */
.rev{
  background:var(--foam);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.4rem;
  height:100%;
  display:flex; flex-direction:column;
}
.rev__src{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--tide); font-weight:500; margin-bottom:.55rem;
}
.rev__quote{ font-size:.96rem; color:var(--ink-2); flex:1 }
.rev__link{ font-size:.83rem; font-weight:700; margin-top:.85rem; display:inline-block }

/* --- Pros / cons -------------------------------------------------------- */
.pc{ border-radius:var(--r); padding:1.4rem 1.5rem; height:100% }
.pc--pro{ background:#EAF6F0; border:1px solid #BCDFCC }
.pc--con{ background:#FDF0EC; border:1px solid #F3CCBF }
.pc h3{ font-size:1.15rem; margin-bottom:.75rem }
.pc ul{ list-style:none; padding:0; margin:0 }
.pc li{ padding:.4rem 0 .4rem 1.6rem; position:relative; font-size:.95rem }
.pc--pro li::before{ content:'✓'; position:absolute; left:0; color:var(--kelp); font-weight:700 }
.pc--con li::before{ content:'!'; position:absolute; left:.28rem; color:var(--coral); font-weight:700 }

/* --- Bonus cards -------------------------------------------------------- */
.bonus{
  background:var(--foam); border:1px solid var(--line); border-radius:var(--r);
  padding:1.35rem; height:100%; border-top:5px solid var(--surf);
}
.bonus__tag{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral); font-weight:700; display:block; margin-bottom:.4rem;
}
.bonus h3{ font-size:1.1rem; margin-bottom:.5rem }
.bonus p{ font-size:.92rem; color:var(--muted); margin:0 }

/* --- FAQ accordion ------------------------------------------------------ */
.accordion-item{ border:1px solid var(--line); border-radius:var(--r-sm)!important; margin-bottom:.7rem; overflow:hidden; background:var(--foam) }
.accordion-button{
  font-family:var(--ff-display); font-weight:600; font-size:1.04rem;
  color:var(--ink); background:var(--foam); padding:1.05rem 1.25rem;
}
.accordion-button:not(.collapsed){ background:#E9F4F5; color:var(--tide-dk); box-shadow:none }
.accordion-button:focus{ box-shadow:0 0 0 3px rgba(228,87,46,.4); z-index:3 }
.accordion-button::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230E7C86'%3E%3Cpath d='M8 11.5 1.5 5l1.1-1.1L8 9.3l5.4-5.4L14.5 5z'/%3E%3C/svg%3E");
}
.accordion-body{ padding:.35rem 1.25rem 1.25rem; font-size:.97rem; color:var(--ink-2) }

/* --- Anchor / quick-link row -------------------------------------------- */
.quicklinks{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; padding:0; margin:0; list-style:none }
.quicklinks a{
  font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.28); color:#CBDDE2;
  padding:.42rem .9rem; border-radius:999px; text-decoration:none; display:block;
}
.quicklinks a:hover{ background:var(--surf); border-color:var(--surf); color:var(--ink) }

/* --- Final CTA band ----------------------------------------------------- */
.cta-band{
  background:linear-gradient(140deg,var(--tide-dk),var(--ink) 70%);
  color:#fff; border-radius:var(--r); padding:clamp(1.7rem,4vw,2.8rem);
  text-align:center; box-shadow:var(--shadow-lg);
}
.cta-band h2{ color:#fff }
.cta-band p{ color:#B9CBD1 }

/* --- Disclaimer & footer ------------------------------------------------ */
.legal-block{ font-size:.83rem; line-height:1.68; color:var(--muted) }
.legal-block h2{ font-size:1.02rem; color:var(--ink); margin-bottom:.6rem }

.site-footer{ background:var(--ink); color:#93AAB2; padding:2.2rem 0 1.5rem; font-size:.88rem }
.site-footer a{ color:#CBDDE2; text-decoration:none }
.site-footer a:hover{ color:var(--surf); text-decoration:underline }
.site-footer .foot-links{ display:flex; flex-wrap:wrap; gap:.35rem 1.3rem; list-style:none; padding:0; margin:0 0 1rem }

/* --- Sticky mobile CTA -------------------------------------------------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  background:rgba(11,46,59,.97); backdrop-filter:blur(8px);
  padding:.6rem .8rem; display:none;
  box-shadow:0 -6px 22px -10px rgba(0,0,0,.6);
}
.sticky-cta .btn{ width:100%; padding:.75rem 1rem; font-size:.98rem }
@media (max-width:767.98px){
  .sticky-cta{ display:block }
  body{ padding-bottom:66px }
}

/* --- Reveal on scroll --------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease }
  .reveal.is-in{ opacity:1; transform:none }
}

/* --- Legal sub-pages ---------------------------------------------------- */
.page-head{ background:var(--ink); color:#fff; padding:clamp(2.2rem,5vw,3.4rem) 0 }
.page-head h1{ color:#fff; margin:0 }
.page-head p{ color:#9FB8C0; margin:.5rem 0 0 }
.prose h2{ font-size:1.3rem; margin:1.9rem 0 .7rem }
.prose h3{ font-size:1.08rem; margin:1.4rem 0 .5rem }
.prose ul{ padding-left:1.15rem }
.prose li{ margin-bottom:.4rem }

/* --- Small screens ------------------------------------------------------ */
@media (max-width:575.98px){
  body{ font-size:1rem }
  .facts{ font-size:.78rem }
  .price-card__big{ font-size:2.35rem }
  .btn{ padding:.78rem 1.4rem }
}