/* ==========================================================================
   Gumitide Gummies Review — Theme "Counter"
   Poster-grotesque evidence audit layout. Bootstrap 5.3 base.
   Shares no tokens, fonts or components with the other review builds.
   ========================================================================== */

:root{
  --carbon:#16171C;
  --carbon-2:#2B2D36;
  --berry:#A81E48;
  --berry-dk:#7D1435;
  --blush:#F7DFE6;
  --lime:#C4DE22;
  --lime-dk:#93A70F;
  --bone:#F5F3EE;
  --bone-2:#E7E3D9;
  --slate:#5A616B;
  --warn:#C2620F;
  --good:#3F7A4B;
  --rule:rgba(22,23,28,.16);

  --ff-display:'Archivo',system-ui,sans-serif;
  --ff-body:'Figtree',system-ui,-apple-system,sans-serif;
  --ff-mono:'Space Mono',ui-monospace,monospace;
}

*{ -webkit-tap-highlight-color:transparent }
html{ scroll-behavior:smooth; scroll-padding-top:74px }
@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);
  font-size:1.06rem;
  line-height:1.66;
  color:var(--carbon);
  background:var(--bone);
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-variation-settings:'wdth' 108;
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.028em;
  text-transform:uppercase;
  color:var(--carbon);
}
h1{ font-size:clamp(1.85rem,4.3vw,3rem) }
h2{ font-size:clamp(1.5rem,3.5vw,2.25rem) }
h3{ font-size:clamp(1.05rem,2.1vw,1.28rem); font-variation-settings:'wdth' 100; letter-spacing:-.018em }
h4{ font-size:1rem; font-variation-settings:'wdth' 100 }
p{ margin-bottom:1.05rem }
a{ color:var(--berry); text-underline-offset:3px; text-decoration-thickness:1px }
a:hover{ color:var(--berry-dk) }
:focus-visible{ outline:3px solid var(--berry); outline-offset:3px }

/* --- Tag / label --------------------------------------------------------- */
.tag{
  font-family:var(--ff-mono);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--berry);
  display:inline-block;
  margin-bottom:.6rem;
}
.tag--lime{ color:var(--lime) }
.tag--slate{ color:var(--slate) }

/* --- Sections ------------------------------------------------------------ */
.sect{ padding:clamp(2.4rem,5.5vw,4rem) 0 }
.sect--tight{ padding:clamp(1.5rem,3.5vw,2.3rem) 0 }
.sect--bone{ background:var(--bone) }
.sect--bone2{ background:var(--bone-2) }
.sect--dark{ background:var(--carbon); color:#C6C9D1 }
.sect--dark h2,.sect--dark h3,.sect--dark h4{ color:#fff }
.sect--dark p{ color:#A8ADB8 }
.sect--berry{ background:var(--berry); color:#fff }
.sect--berry h2,.sect--berry h3{ color:#fff }
.sect--berry p{ color:#F5D6E0 }

/* --- Signature: numbered slab header ------------------------------------- */
.slab{ margin-bottom:1.7rem }
.slab__bar{ display:flex; align-items:center; gap:.85rem; margin-bottom:.6rem }
.slab__num{
  font-family:var(--ff-mono); font-size:.78rem; font-weight:700;
  background:var(--carbon); color:var(--lime);
  padding:.16rem .55rem; border-radius:2px; letter-spacing:.08em;
}
.slab__line{ flex:1; height:3px; background:var(--carbon) }
.slab h2{ margin:0 }
.slab p{ margin:.6rem 0 0; color:var(--slate); max-width:min(70ch,100%) }
.sect--dark .slab__line{ background:var(--lime) }
.sect--dark .slab p{ color:#A8ADB8 }

/* --- Buttons ------------------------------------------------------------- */
.btn{
  font-family:var(--ff-display);
  font-variation-settings:'wdth' 100;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:.95rem;
  border-radius:999px;
  padding:.8rem 1.7rem;
  border:2px solid transparent;
  transition:background .15s ease,color .15s ease,transform .12s ease;
}
.btn:active{ transform:translateY(1px) }
.btn-berry{ background:var(--berry); color:#fff }
.btn-berry:hover{ background:var(--berry-dk); color:#fff }
.btn-lime{ background:var(--lime); color:var(--carbon) }
.btn-lime:hover{ background:var(--lime-dk); color:var(--carbon) }
.btn-line{ background:transparent; color:var(--carbon); border-color:var(--carbon) }
.btn-line:hover{ background:var(--carbon); color:var(--bone) }
.btn-line-pale{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5) }
.btn-line-pale:hover{ background:#fff; color:var(--carbon) }
.btn-xl{ font-size:1.02rem; padding:.95rem 2rem }

/* --- Navbar -------------------------------------------------------------- */
.bar{ background:var(--carbon); padding:.5rem 0 }
.bar .navbar-brand{
  font-family:var(--ff-display); font-variation-settings:'wdth' 112;
  font-weight:800; text-transform:uppercase; font-size:1.22rem;
  color:#fff; letter-spacing:-.02em;
}
.bar .navbar-brand i{ font-style:normal; color:var(--lime) }
.bar .nav-link{
  font-family:var(--ff-body); font-weight:600; font-size:.92rem;
  color:#B6BAC4; padding:.42rem .78rem!important;
}
.bar .nav-link:hover{ color:var(--lime) }
.bar .navbar-toggler{ border:2px solid rgba(255,255,255,.4); border-radius:4px; padding:.3rem .5rem }
.bar .navbar-toggler:focus{ box-shadow:0 0 0 3px rgba(196,222,34,.5) }
.bar .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.4' stroke-linecap='round' d='M5 9h20M5 15h20M5 21h20'/%3E%3C/svg%3E");
}

/* --- Alert strip --------------------------------------------------------- */
.alertbar{
  background:var(--lime); color:var(--carbon);
  font-family:var(--ff-mono); font-size:.76rem; font-weight:700;
  letter-spacing:.05em; text-align:center; padding:.6rem 1rem; line-height:1.5;
}
.alertbar a{ color:var(--carbon); text-decoration:underline }

/* --- Hero ---------------------------------------------------------------- */
.hero{ background:var(--bone); padding:clamp(1.6rem,4vw,3rem) 0 clamp(2rem,4.5vw,3.2rem) }

/* Mobile order: H1 -> image -> body. Desktop: grid moves art to column 2.
   Bootstrap col ordering is not used — 3 cols over 12 units wrap and drop
   the artwork below the fold. */
.hw{ display:flex; flex-direction:column; gap:1.1rem }
.hw__head,.hw__art,.hw__body{ min-width:0 }
@media (min-width:992px){
  .hw{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:clamp(2rem,4vw,3.4rem);
    row-gap:.85rem;
    align-items:start;
  }
  .hw__head{ grid-column:1; grid-row:1; align-self:end }
  .hw__body{ grid-column:1; grid-row:2 }
  .hw__art { grid-column:2; grid-row:1 / span 2; align-self:center }
}
.hero h1{ margin-bottom:0; max-width:20ch }
@media (min-width:992px){ .hero h1{ max-width:100% } }

.hero-shot{ position:relative; display:flex; justify-content:center; align-items:center }
.hero-shot::before{
  content:''; position:absolute; inset:2% 0;
  background:radial-gradient(circle at 50% 45%,var(--blush),transparent 66%);
}
.hero-shot img{
  position:relative; z-index:1; width:100%; height:auto; max-width:290px;
  filter:drop-shadow(0 18px 30px rgba(22,23,28,.24));
}
@media (min-width:992px){ .hero-shot img{ max-width:370px } }

.lede{ font-size:1.1rem; color:var(--carbon-2) }
.stamp{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--slate);
  border-top:3px solid var(--carbon); border-bottom:1px solid var(--rule);
  padding:.55rem 0; margin:1.1rem 0;
}

/* --- Affiliate disclosure ------------------------------------------------ */
.affnote{
  background:var(--bone-2); border-left:6px solid var(--berry);
  border-radius:0 4px 4px 0; padding:.9rem 1.1rem;
  font-size:.9rem; line-height:1.6; color:var(--slate); margin-top:1.3rem;
}
.affnote b{ color:var(--carbon) }

/* --- Signature 1: claim vs evidence ledger ------------------------------- */
.ledger{ border-top:3px solid var(--carbon) }
.lrow{
  display:grid; gap:.5rem 1.5rem; grid-template-columns:1fr;
  padding:1.25rem 0; border-bottom:1px solid var(--rule);
}
@media (min-width:768px){ .lrow{ grid-template-columns:1fr 1.35fr 130px; align-items:start } }
.lrow__claim{ font-family:var(--ff-display); font-variation-settings:'wdth' 100; font-weight:700; font-size:1.02rem; line-height:1.3 }
.lrow__claim::before{ content:'CLAIM · '; font-family:var(--ff-mono); font-size:.66rem; font-weight:700; letter-spacing:.13em; color:var(--slate); display:block; margin-bottom:.25rem }
.lrow__ev{ font-size:.98rem; color:var(--carbon-2) }
.lrow__ev::before{ content:'EVIDENCE'; font-family:var(--ff-mono); font-size:.66rem; font-weight:700; letter-spacing:.13em; color:var(--slate); display:block; margin-bottom:.25rem }
.chip{
  font-family:var(--ff-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:3px; display:inline-block; white-space:nowrap;
}
.chip--no{ background:#F6DEDA; color:#8C2A16; border:1px solid #E0A99C }
.chip--part{ background:#FBEDD6; color:#8A4C09; border:1px solid #E5C48C }
.chip--ok{ background:#DEEDE1; color:#2C5E38; border:1px solid #A7C9B0 }

/* --- Signature 2: proprietary blend box ---------------------------------- */
.blend{
  border:3px solid var(--carbon); border-radius:5px;
  background:#fff; padding:1.3rem 1.4rem; max-width:min(460px,100%);
}
.blend__top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-bottom:3px solid var(--carbon); padding-bottom:.6rem; margin-bottom:.85rem }
.blend__name{ font-family:var(--ff-display); font-variation-settings:'wdth' 100; font-weight:800; text-transform:uppercase; font-size:1.02rem; margin:0 }
.blend__mg{ font-family:var(--ff-mono); font-weight:700; font-size:1.15rem }
.blend__stack{ display:flex; flex-direction:column; gap:.4rem }
.blend__item{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:var(--carbon); color:#fff; padding:.55rem .8rem; border-radius:3px;
  font-family:var(--ff-mono); font-size:.86rem;
}
.blend__q{ color:var(--lime); font-weight:700; font-size:1.05rem }
.blend__foot{ font-size:.82rem; color:var(--slate); margin:.9rem 0 0; line-height:1.55 }

/* --- Cards --------------------------------------------------------------- */
.pc{
  background:#fff; border:1px solid var(--rule); border-radius:5px;
  padding:1.35rem; height:100%; border-top:5px solid var(--berry);
}
.pc h3{ margin-bottom:.5rem }
.pc p:last-child{ margin-bottom:0 }

.badge-tile{ text-align:center; background:#fff; border:1px solid var(--rule); border-radius:5px; padding:1.2rem 1rem; height:100% }
.badge-tile img{ max-width:112px; width:100%; height:auto; margin-bottom:.7rem }
.badge-tile h3{ font-size:.98rem; margin-bottom:.35rem }
.badge-tile p{ font-size:.88rem; color:var(--slate); margin:0; line-height:1.55 }

/* --- Ingredient panel ---------------------------------------------------- */
.ipanel{
  background:#fff; border:1px solid var(--rule); border-radius:5px;
  padding:1.4rem; height:100%;
}
.ipanel__hd{ display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; flex-wrap:wrap }
.ipanel__n{
  font-family:var(--ff-mono); font-size:1.05rem; font-weight:700;
  background:var(--lime); color:var(--carbon);
  width:2rem; height:2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.ipanel h3{ margin:0 }
.ipanel p{ font-size:.97rem }
.ipanel p:last-child{ margin-bottom:0 }
.ipanel__cav{ font-size:.9rem; color:var(--warn); border-top:1px dashed var(--rule); padding-top:.7rem; margin-top:.3rem }

/* --- Stat strip ---------------------------------------------------------- */
.stats{ display:grid; gap:1px; background:var(--rule); grid-template-columns:repeat(2,1fr); border:1px solid var(--rule) }
@media (min-width:768px){ .stats{ grid-template-columns:repeat(4,1fr) } }
.stat{ background:#fff; padding:1.1rem .9rem; text-align:center }
.stat__n{ font-family:var(--ff-display); font-variation-settings:'wdth' 110; font-weight:800; font-size:1.85rem; line-height:1; color:var(--berry) }
.stat__l{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); margin-top:.35rem; display:block }

/* --- Callout ------------------------------------------------------------- */
.note{
  background:#FFF3E0; border:1px solid #E8C79A; border-left:6px solid var(--warn);
  border-radius:0 4px 4px 0; padding:1.05rem 1.25rem; font-size:.99rem; color:#6E3D06;
}
.note b{ color:#4E2B02 }
.note--berry{ background:var(--blush); border-color:#E5AEC0; border-left-color:var(--berry); color:#6B1230 }
.note--berry b{ color:#4A0B21 }

/* --- Pricing ------------------------------------------------------------- */
.tier{
  background:#fff; border:1px solid var(--rule); border-radius:5px;
  padding:1.5rem 1.3rem; height:100%; display:flex; flex-direction:column;
  text-align:center; position:relative; transition:transform .18s ease,box-shadow .18s ease;
}
.tier:hover{ transform:translateY(-4px); box-shadow:0 16px 34px -20px rgba(22,23,28,.5) }
.tier--best{ border:3px solid var(--berry) }
.tier__flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--berry); color:#fff; font-family:var(--ff-mono);
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .85rem; border-radius:999px; white-space:nowrap;
}
.tier img{ max-width:200px; width:100%; height:auto; margin:.4rem auto 1rem; display:block }
.tier__q{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate) }
.tier__p{ font-family:var(--ff-display); font-variation-settings:'wdth' 108; font-weight:800; font-size:2.6rem; line-height:1; margin:.35rem 0 .05rem }
.tier__u{ font-size:.88rem; color:var(--slate); margin-bottom:.75rem }
.tier__t{ font-family:var(--ff-mono); font-size:.92rem; font-weight:700 }
.tier__s{ font-size:.87rem; color:var(--good); font-weight:600; margin-bottom:1rem }
.tier .btn{ margin-top:auto; width:100% }

/* --- Pros / cons --------------------------------------------------------- */
.pcbox{ border-radius:5px; padding:1.4rem 1.5rem; height:100% }
.pcbox--y{ background:#EAF3EC; border:1px solid #B9D6C1 }
.pcbox--n{ background:#FAE9E5; border:1px solid #EBBFB4 }
.pcbox ul{ list-style:none; padding:0; margin:0 }
.pcbox li{ padding:.42rem 0 .42rem 1.65rem; position:relative; font-size:.98rem }
.pcbox--y li::before{ content:'✓'; position:absolute; left:.1rem; color:var(--good); font-weight:800 }
.pcbox--n li::before{ content:'✕'; position:absolute; left:.1rem; color:var(--berry); font-weight:800 }

/* --- Bonuses ------------------------------------------------------------- */
.bonus{ background:#fff; border:1px solid var(--rule); border-radius:5px; overflow:hidden; height:100% }
.bonus img{ width:100%; height:auto; display:block; background:var(--carbon) }
.bonus__b{ padding:1rem 1.1rem }
.bonus__b h3{ font-size:1rem; margin-bottom:.35rem }
.bonus__b p{ font-size:.9rem; color:var(--slate); margin:0 }

/* --- FAQ ----------------------------------------------------------------- */
.accordion-item{ border:1px solid var(--rule)!important; border-radius:5px!important; margin-bottom:.6rem; background:#fff; overflow:hidden }
.accordion-button{
  font-family:var(--ff-display); font-variation-settings:'wdth' 100;
  font-weight:700; text-transform:uppercase; font-size:.95rem; letter-spacing:-.01em;
  color:var(--carbon); background:#fff; padding:1rem 1.2rem;
}
.accordion-button:not(.collapsed){ background:var(--blush); color:var(--berry-dk); box-shadow:none }
.accordion-button:focus{ box-shadow:0 0 0 3px rgba(168,30,72,.35); 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='%23A81E48'%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:.4rem 1.2rem 1.2rem; font-size:1rem; color:var(--carbon-2); text-transform:none }

/* --- Final CTA ----------------------------------------------------------- */
.close-cta{ background:var(--carbon); color:#fff; border-radius:6px; padding:clamp(1.6rem,4vw,2.6rem); text-align:center }
.close-cta h2{ color:#fff }
.close-cta p{ color:#A8ADB8 }

/* --- Jump links ---------------------------------------------------------- */
.jumps{ display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; padding:0; margin:0; justify-content:center }
.jumps a{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.28); color:#C6C9D1;
  padding:.4rem .85rem; border-radius:999px; text-decoration:none; display:block;
}
.jumps a:hover{ background:var(--lime); border-color:var(--lime); color:var(--carbon) }

/* --- Small print & footer ------------------------------------------------ */
.fineprint{ font-size:.87rem; line-height:1.64; color:var(--slate) }
.fineprint h2{ font-size:1.02rem; color:var(--carbon); margin-bottom:.6rem }

.ftr{ background:var(--carbon); color:#9299A5; padding:2.2rem 0 1.4rem; font-size:.9rem }
.ftr a{ color:#C6C9D1; text-decoration:none }
.ftr a:hover{ color:var(--lime); text-decoration:underline }
.ftr ul{ list-style:none; padding:0; margin:0 0 1rem; display:flex; flex-wrap:wrap; gap:.35rem 1.3rem }
.ftr .mark{ font-family:var(--ff-display); font-variation-settings:'wdth' 112; font-weight:800; text-transform:uppercase; font-size:1.25rem; color:#fff }
.ftr .mark i{ font-style:normal; color:var(--lime) }

/* --- Sticky mobile CTA --------------------------------------------------- */
.stick{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  background:var(--carbon); border-top:3px solid var(--lime);
  padding:.55rem .75rem; display:none;
}
.stick .btn{ width:100%; padding:.72rem 1rem }
@media (max-width:767.98px){ .stick{ display:block } body{ padding-bottom:64px } }

/* --- Reveal -------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .up{ opacity:0; transform:translateY(15px); transition:opacity .55s ease,transform .55s ease }
  .up.shown{ opacity:1; transform:none }
}

/* --- Sub-pages ----------------------------------------------------------- */
.phead{ background:var(--carbon); color:#fff; padding:clamp(2rem,5vw,3.2rem) 0 }
.phead h1{ color:#fff; margin:0 }
.phead p{ color:#9299A5; margin:.5rem 0 0 }
.txt h2{ font-size:1.22rem; margin:1.9rem 0 .7rem }
.txt h3{ font-size:1.02rem; margin:1.4rem 0 .5rem }
.txt ul{ padding-left:1.15rem }
.txt li{ margin-bottom:.4rem }

@media (max-width:575.98px){
  body{ font-size:1.02rem }
  .tier__p{ font-size:2.25rem }
  .stat__n{ font-size:1.6rem }
}