/* ==========================================================================
   SlimTide Reviews — Theme "Dossier"
   Editorial evidence-review layout. Bootstrap 5.3 base.
   Deliberately shares no tokens, fonts or components with slimtide-capsules.com
   ========================================================================== */

:root{
  --night:#181125;
  --night-2:#2A1F42;
  --plum:#5B3FA8;
  --plum-dk:#452D86;
  --lilac:#A78BFA;
  --lilac-2:#EDE7FE;
  --paper:#FBFAF7;
  --paper-2:#F2EFEA;
  --amber:#E08A0B;
  --amber-dk:#B86E04;
  --sage:#4D7C5A;
  --rust:#B4402F;
  --grey:#6A6478;
  --hair:rgba(24,17,37,.13);

  --ff-display:'Bricolage Grotesque',system-ui,sans-serif;
  --ff-body:'Newsreader',Georgia,serif;
  --ff-mono:'IBM Plex Mono',ui-monospace,monospace;

  --shadow:0 2px 0 var(--night);
  --shadow-soft:0 14px 40px -22px rgba(24,17,37,.5);
}

*{ -webkit-tap-highlight-color:transparent }
html{ scroll-behavior:smooth; scroll-padding-top:70px }
@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.115rem;
  line-height:1.68;
  color:var(--night);
  background:var(--paper);
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{
  font-family:var(--ff-display);
  font-weight:700;
  font-variation-settings:'wdth' 90,'opsz' 24;
  line-height:1.13;
  letter-spacing:-.022em;
  color:var(--night);
}
h1{ font-size:clamp(1.75rem,4.1vw,2.75rem) }
h2{ font-size:clamp(1.45rem,3.4vw,2.1rem) }
h3{ font-size:clamp(1.15rem,2.4vw,1.45rem) }
h4{ font-size:1.06rem }
p{ margin-bottom:1.1rem }
a{ color:var(--plum); text-underline-offset:3px; text-decoration-thickness:1px }
a:hover{ color:var(--plum-dk) }
:focus-visible{ outline:3px solid var(--amber); outline-offset:3px }

/* --- Kicker / meta labels ------------------------------------------------ */
.kicker{
  font-family:var(--ff-mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--plum);
  display:block;
  margin-bottom:.65rem;
}
.kicker--pale{ color:var(--lilac) }

/* --- Sections ------------------------------------------------------------ */
.blk{ padding:clamp(2.4rem,5.5vw,4rem) 0 }
.blk--slim{ padding:clamp(1.5rem,3.5vw,2.4rem) 0 }
.blk--paper{ background:var(--paper) }
.blk--paper2{ background:var(--paper-2) }
.blk--night{ background:var(--night); color:#D6D0E4 }
.blk--night h2,.blk--night h3,.blk--night h4{ color:#fff }
.blk--night p{ color:#B3ABC6 }

/* --- Signature 1: ruled section header ----------------------------------- */
.ruled{
  border-top:2px solid var(--night);
  padding-top:.85rem;
  margin-bottom:1.6rem;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.4rem 1.2rem;
}
.ruled__no{
  font-family:var(--ff-mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--plum);
  flex:0 0 auto;
}
.ruled h2{ margin:0; flex:1 1 320px }

/* --- Buttons ------------------------------------------------------------- */
.btn{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.01em;
  border-radius:3px;
  padding:.78rem 1.6rem;
  border:2px solid var(--night);
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
}
.btn-solid{ background:var(--amber); color:var(--night); box-shadow:var(--shadow) }
.btn-solid:hover{ background:var(--amber-dk); color:#fff; transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--night) }
.btn-solid:active{ transform:translate(0,0); box-shadow:0 1px 0 var(--night) }

.btn-outline-ink{ background:transparent; color:var(--night) }
.btn-outline-ink:hover{ background:var(--night); color:var(--paper) }

.btn-pale{ background:var(--paper); color:var(--night); border-color:var(--paper) }
.btn-pale:hover{ background:var(--lilac); border-color:var(--lilac); color:var(--night) }

.btn-wide{ font-size:1.06rem; padding:.92rem 1.9rem }

/* --- Navbar -------------------------------------------------------------- */
.topbar{ background:var(--paper); border-bottom:2px solid var(--night); padding:.5rem 0 }
.topbar .navbar-brand{
  font-family:var(--ff-display);
  font-weight:800;
  font-size:1.28rem;
  color:var(--night);
  letter-spacing:-.035em;
  font-variation-settings:'wdth' 85;
}
.topbar .navbar-brand em{ font-style:normal; color:var(--plum) }
.topbar .nav-link{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:.93rem;
  color:var(--night);
  padding:.4rem .75rem!important;
}
.topbar .nav-link:hover{ color:var(--plum); text-decoration:underline }
.topbar .navbar-toggler{ border:2px solid var(--night); border-radius:3px; padding:.3rem .5rem }
.topbar .navbar-toggler:focus{ box-shadow:0 0 0 3px rgba(224,138,11,.5) }
.topbar .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='%23181125' stroke-width='2.4' stroke-linecap='round' d='M5 8h20M5 15h20M5 22h20'/%3E%3C/svg%3E");
}

/* --- Verdict ticker ------------------------------------------------------ */
.ticker{
  background:var(--night);
  color:var(--lilac);
  font-family:var(--ff-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  padding:.6rem 1rem;
  text-align:center;
  border-bottom:2px solid var(--night);
}
.ticker b{ color:#fff; font-weight:600 }
.ticker .dot{ color:var(--amber); padding:0 .45rem }

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

/* Mobile: H1 first, then image, then body. Desktop: grid places art in col 2.
   Bootstrap column ordering is avoided here on purpose — 3 columns exceeding
   12 units wrap and push the artwork below the fold. */
.hgrid{ display:flex; flex-direction:column; gap:1.1rem }
.hgrid__head,.hgrid__art,.hgrid__body{ min-width:0 }
@media (min-width:992px){
  .hgrid{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:clamp(2rem,4vw,3.4rem);
    row-gap:.8rem;
    align-items:start;
  }
  .hgrid__head{ grid-column:1; grid-row:1; align-self:end }
  .hgrid__body{ grid-column:1; grid-row:2 }
  .hgrid__art { grid-column:2; grid-row:1 / span 2; align-self:center }
}
.hero h1{ margin-bottom:0; max-width:22ch }
@media (min-width:992px){ .hero h1{ max-width:100% } }

.hero-art{ position:relative; display:flex; justify-content:center; align-items:center }
.hero-art::before{
  content:'';
  position:absolute; inset:4% 6%;
  background:var(--lilac-2);
  border:2px solid var(--night);
  border-radius:4px;
  transform:rotate(-2.5deg);
}
.hero-art img{
  position:relative; z-index:1;
  width:100%; height:auto; max-width:225px;
  filter:drop-shadow(0 16px 26px rgba(24,17,37,.34));
}
@media (min-width:992px){ .hero-art img{ max-width:270px } }

.standfirst{ font-size:1.16rem; color:var(--night-2) }
.byline{
  font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--grey);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:.55rem 0; margin:1.1rem 0;
}

/* --- Affiliate note ------------------------------------------------------ */
.affbox{
  background:var(--lilac-2);
  border:2px solid var(--night);
  border-radius:3px;
  padding:.9rem 1.1rem;
  font-size:.92rem;
  line-height:1.6;
  color:var(--night-2);
  margin-top:1.3rem;
}
.affbox b{ font-family:var(--ff-display) }

/* --- Signature 2: verdict scorecard -------------------------------------- */
.score{
  background:var(--night);
  border:2px solid var(--night);
  border-radius:4px;
  padding:1.3rem 1.4rem 1.5rem;
  color:#fff;
}
.score__top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.2rem }
.score__label{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--lilac) }
.score__num{ font-family:var(--ff-display); font-size:2.9rem; font-weight:800; line-height:1; color:#fff }
.score__num small{ font-size:1.05rem; color:var(--lilac); font-weight:600 }
.score__hr{ border:0; border-top:1px solid rgba(167,139,250,.32); margin:.9rem 0 1rem }
.score__row{ margin-bottom:.85rem }
.score__row:last-child{ margin-bottom:0 }
.score__rowtop{ display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:.76rem; color:#D6D0E4; margin-bottom:.3rem }
.score__rowtop b{ color:#fff }
.score__bar{ height:7px; background:rgba(255,255,255,.14); border-radius:2px; overflow:hidden }
.score__fill{ height:100%; background:var(--lilac); border-radius:2px }
.score__fill--warn{ background:var(--amber) }
.score__fill--low{ background:var(--rust) }

/* --- TL;DR panel --------------------------------------------------------- */
.tldr{
  border:2px solid var(--night);
  border-left-width:9px;
  border-radius:3px;
  background:#fff;
  padding:1.4rem 1.5rem;
}
.tldr h2{ font-size:1.3rem; margin-bottom:.9rem }
.tldr ul{ list-style:none; padding:0; margin:0 }
.tldr li{ padding:.42rem 0 .42rem 1.75rem; position:relative; font-size:1.02rem; border-bottom:1px dotted var(--hair) }
.tldr li:last-child{ border-bottom:0 }
.tldr li::before{
  content:'▸'; position:absolute; left:.15rem; top:.42rem;
  color:var(--plum); font-size:.92rem;
}

/* --- Signature 3: week-by-week timeline rail ----------------------------- */
.rail{ position:relative; padding-left:2.5rem; margin:0; list-style:none }
.rail::before{
  content:''; position:absolute; left:.65rem; top:.6rem; bottom:.6rem;
  width:2px; background:var(--night);
}
.rail li{ position:relative; padding-bottom:1.5rem }
.rail li:last-child{ padding-bottom:0 }
.rail li::before{
  content:''; position:absolute; left:-2.2rem; top:.42rem;
  width:14px; height:14px; border-radius:50%;
  background:var(--paper); border:3px solid var(--plum);
}
.rail__wk{
  font-family:var(--ff-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--plum);
  display:block; margin-bottom:.15rem;
}
.rail h3{ font-size:1.1rem; margin-bottom:.3rem }
.rail p{ font-size:1rem; margin-bottom:0; color:var(--night-2) }

/* --- Cards --------------------------------------------------------------- */
.dcard{
  background:#fff;
  border:2px solid var(--night);
  border-radius:3px;
  padding:1.4rem;
  height:100%;
  box-shadow:var(--shadow);
}
.dcard h3{ margin-bottom:.55rem }
.dcard p:last-child{ margin-bottom:0 }

.badge-card{ text-align:center; background:#fff; border:2px solid var(--night); border-radius:3px; padding:1.2rem 1rem; height:100% }
.badge-card img{ max-width:110px; width:100%; height:auto; margin-bottom:.7rem }
.badge-card h3{ font-size:1rem; margin-bottom:.35rem }
.badge-card p{ font-size:.9rem; color:var(--grey); margin:0; line-height:1.55 }

/* --- Comparison table ---------------------------------------------------- */
.cmp{ width:100%; border-collapse:collapse; background:#fff; font-size:.98rem }
.cmp th,.cmp td{ padding:.75rem .85rem; border:1px solid var(--hair); text-align:left; vertical-align:top }
.cmp thead th{
  background:var(--night); color:#fff; border-color:var(--night);
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
}
.cmp tbody th{ font-family:var(--ff-display); font-weight:700; background:var(--paper-2); width:30% }
.cmp .yes{ color:var(--sage); font-weight:700 }
.cmp .no{ color:var(--rust); font-weight:700 }
.cmp .mid{ color:var(--amber-dk); font-weight:700 }

/* --- Ingredient rows ----------------------------------------------------- */
.ing{
  display:grid; gap:.35rem 1.4rem;
  grid-template-columns:1fr;
  border-bottom:2px solid var(--hair);
  padding:1.2rem 0;
}
.ing:last-child{ border-bottom:0 }
@media (min-width:768px){ .ing{ grid-template-columns:190px 1fr } }
.ing__meta{ }
.ing__dose{
  font-family:var(--ff-mono); font-size:.95rem; font-weight:700;
  color:var(--night); background:var(--lilac-2);
  border:2px solid var(--night); border-radius:3px;
  padding:.15rem .55rem; display:inline-block; margin-bottom:.4rem;
}
.ing h3{ font-size:1.12rem; margin-bottom:.2rem }
.ing__latin{ font-style:italic; color:var(--grey); font-size:.94rem }
.ing p{ font-size:1rem; margin-bottom:.6rem }
.ing p:last-child{ margin-bottom:0 }
.ing__flag{ font-size:.92rem; color:var(--rust) }

/* --- Pricing ------------------------------------------------------------- */
.plan{
  background:#fff; border:2px solid var(--night); border-radius:3px;
  padding:1.5rem 1.3rem; height:100%; display:flex; flex-direction:column;
  position:relative; box-shadow:var(--shadow);
}
.plan--pick{ background:var(--lilac-2); box-shadow:5px 5px 0 var(--plum) }
.plan__tag{
  position:absolute; top:-1px; right:-1px;
  background:var(--plum); color:#fff;
  font-family:var(--ff-mono); font-size:.65rem; letter-spacing:.13em;
  text-transform:uppercase; padding:.3rem .7rem; border:2px solid var(--night);
  border-radius:0 3px 0 3px;
}
.plan img{ max-width:170px; width:100%; height:auto; margin:.3rem auto 1rem; display:block }
.plan__qty{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--grey); display:block; text-align:center }
.plan__price{ font-family:var(--ff-display); font-size:2.5rem; font-weight:800; line-height:1; text-align:center; margin:.4rem 0 .1rem }
.plan__unit{ font-size:.9rem; color:var(--grey); text-align:center; margin-bottom:.8rem }
.plan__meta{ font-family:var(--ff-mono); font-size:.85rem; text-align:center; margin-bottom:.25rem }
.plan__ship{ font-size:.88rem; text-align:center; color:var(--sage); font-weight:600; margin-bottom:1.1rem }
.plan .btn{ margin-top:auto; width:100% }

/* --- Callout ------------------------------------------------------------- */
.callout{
  background:#FFF6E4;
  border:2px solid var(--night);
  border-left-width:9px;
  border-radius:3px;
  padding:1.1rem 1.3rem;
  font-size:1rem;
}
.callout b{ font-family:var(--ff-display) }

/* --- Verdict split ------------------------------------------------------- */
.vlist{ list-style:none; padding:0; margin:0 }
.vlist li{ padding:.45rem 0 .45rem 1.75rem; position:relative; font-size:1rem }
.vgood li::before{ content:'+'; position:absolute; left:.25rem; color:var(--sage); font-weight:800; font-family:var(--ff-display) }
.vbad li::before{ content:'–'; position:absolute; left:.25rem; color:var(--rust); font-weight:800; font-family:var(--ff-display) }

/* --- FAQ ----------------------------------------------------------------- */
.accordion-item{ border:2px solid var(--night)!important; border-radius:3px!important; margin-bottom:.65rem; background:#fff; overflow:hidden }
.accordion-button{
  font-family:var(--ff-display); font-weight:700; font-size:1.03rem;
  color:var(--night); background:#fff; padding:1rem 1.2rem;
}
.accordion-button:not(.collapsed){ background:var(--lilac-2); color:var(--night); box-shadow:none }
.accordion-button:focus{ box-shadow:0 0 0 3px rgba(224,138,11,.45); 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='%235B3FA8'%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:1.02rem; color:var(--night-2) }

/* --- Final CTA ----------------------------------------------------------- */
.finale{
  background:var(--night); color:#fff;
  border:2px solid var(--night); border-radius:4px;
  padding:clamp(1.6rem,4vw,2.6rem);
}
.finale h2{ color:#fff }
.finale p{ color:#B3ABC6 }

/* --- Index / jump list --------------------------------------------------- */
.jump{ display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; padding:0; margin:0; justify-content:center }
.jump a{
  font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.3); color:#D6D0E4;
  padding:.4rem .85rem; border-radius:2px; text-decoration:none; display:block;
}
.jump a:hover{ background:var(--lilac); border-color:var(--lilac); color:var(--night) }

/* --- Legal & footer ------------------------------------------------------ */
.smallprint{ font-size:.88rem; line-height:1.65; color:var(--grey) }
.smallprint h2{ font-size:1.05rem; color:var(--night); margin-bottom:.6rem }

.foot{ background:var(--night); color:#9A93AD; padding:2.2rem 0 1.4rem; font-size:.92rem }
.foot a{ color:#D6D0E4; text-decoration:none }
.foot a:hover{ color:var(--lilac); text-decoration:underline }
.foot ul{ list-style:none; padding:0; margin:0 0 1rem; display:flex; flex-wrap:wrap; gap:.35rem 1.3rem }
.foot .brand{ font-family:var(--ff-display); font-weight:800; font-size:1.3rem; color:#fff; letter-spacing:-.03em }
.foot .brand em{ font-style:normal; color:var(--lilac) }

/* --- Sticky mobile bar --------------------------------------------------- */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  background:var(--night); border-top:2px solid var(--lilac);
  padding:.55rem .75rem; display:none;
}
.mbar .btn{ width:100%; padding:.7rem 1rem }
@media (max-width:767.98px){ .mbar{ display:block } body{ padding-bottom:62px } }

/* --- Scroll reveal ------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .fade{ opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s ease }
  .fade.on{ opacity:1; transform:none }
}

/* --- Sub-pages ----------------------------------------------------------- */
.masthead{ background:var(--night); color:#fff; padding:clamp(2rem,5vw,3.2rem) 0 }
.masthead h1{ color:#fff; margin:0 }
.masthead p{ color:#A79FBC; margin:.5rem 0 0 }
.copy h2{ font-size:1.28rem; margin:1.9rem 0 .7rem }
.copy h3{ font-size:1.08rem; margin:1.4rem 0 .5rem }
.copy ul{ padding-left:1.15rem }
.copy li{ margin-bottom:.4rem }

@media (max-width:575.98px){
  body{ font-size:1.05rem }
  .plan__price{ font-size:2.2rem }
  .score__num{ font-size:2.4rem }
}