/* ===================================================================
   SYNAPTRIL — theme layer over Bootstrap 5.3
   Bootstrap supplies grid, navbar collapse, accordion, tables, cards.

   Layout idea (an evolution of the "coloured heading band" rhythm):
   instead of dead 92px colour bars, every major block opens with a
   numbered rule-header that carries a step number + kicker + question
   heading. Same scanning benefit, far less wasted height.

   Palette: ink #1b2a4a | amber #f2913d | paper #f7f8fa
            deep ink #121d33 | slate #5a6478 | rule #e2e6ee
   Display: 'Instrument Serif'   Body: 'Roboto'
   Signature: synaptic gap (signal crossing the cleft)
=================================================================== */

:root{
  --sy-ink:#1b2a4a;
  --sy-ink-dk:#121d33;
  --sy-amber:#f2913d;
  --sy-amber-dk:#c96f21;
  --sy-paper:#f7f8fa;
  --sy-tint:#eceff5;
  --sy-slate:#5a6478;
  --sy-rule:#e2e6ee;

  --bs-body-bg:#f7f8fa;
  --bs-body-color:#1f2533;
  --bs-body-font-family:'Roboto',system-ui,sans-serif;
  --bs-body-font-size:1.0625rem;
  --bs-body-line-height:1.72;
  --bs-border-color:#e2e6ee;
  --bs-link-color:#1b2a4a;
  --bs-link-hover-color:#c96f21;
  --bs-emphasis-color:#121d33;
}

h1,h2,h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.01em;color:var(--sy-ink-dk);line-height:1.16;}
h4,h5,h6{font-family:'Roboto',sans-serif;font-weight:700;color:var(--sy-ink-dk);}

.sy-kick{
  font-family:'Roboto',sans-serif;text-transform:uppercase;letter-spacing:2.4px;
  font-weight:700;font-size:.72rem;color:var(--sy-amber-dk);
}

/* ---------- Buttons ---------- */
.btn-amber{
  background:var(--sy-amber);color:var(--sy-ink-dk);font-weight:700;
  border:none;border-radius:.35rem;padding:.85rem 1.7rem;
}
.btn-amber:hover,.btn-amber:focus{background:var(--sy-amber-dk);color:#fff;}
.btn-ink-line{
  background:transparent;border:1.5px solid var(--sy-ink);color:var(--sy-ink);
  font-weight:700;border-radius:.35rem;padding:.78rem 1.5rem;
}
.btn-ink-line:hover{background:var(--sy-ink);color:#fff;}

/* ---------- Disclosure + navbar ---------- */
.sy-disc{background:var(--sy-ink-dk);color:#8f9ab4;font-size:.72rem;}
.sy-nav{background:var(--sy-paper);border-bottom:1px solid var(--sy-rule);}
.sy-logo{font-family:'Instrument Serif',Georgia,serif;font-size:1.55rem;color:var(--sy-ink-dk);}
.sy-logo b{color:var(--sy-amber-dk);font-weight:400;}
.navbar-nav .nav-link{font-weight:500;font-size:.92rem;color:var(--sy-ink);}
.navbar-nav .nav-link:hover{color:var(--sy-amber-dk);}
.navbar-toggler{border-color:var(--sy-rule);}
.navbar-toggler:focus{box-shadow:none;}

/* ---------- Hero ---------- */
.sy-hero{background:linear-gradient(180deg,#eef1f7 0%,var(--sy-paper) 100%);border-bottom:1px solid var(--sy-rule);}
.sy-hero h1{font-size:clamp(2.1rem,4.6vw,3.25rem);}
.sy-hero h1 em{font-style:italic;color:var(--sy-amber-dk);}
.sy-hero-img img{max-width:min(340px,100%);margin-inline:auto;}
.sy-tag{
  display:inline-block;background:#fff;border:1px solid var(--sy-rule);border-radius:.3rem;
  padding:.3rem .75rem;font-size:.77rem;font-weight:500;color:var(--sy-ink);
}

/* synaptic gap signature */
.sy-synapse svg{width:100%;max-width:440px;height:88px;}
.sy-term{fill:var(--sy-ink);}
.sy-term-edge{fill:none;stroke:var(--sy-amber);stroke-width:2;}
.sy-signal{fill:var(--sy-amber);}
.sy-gap-line{stroke:var(--sy-rule);stroke-width:1;stroke-dasharray:2 4;}
.sy-sig-text{font-family:'Roboto',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.4px;fill:var(--sy-slate);}

/* ---------- Numbered section header (the rhythm device) ---------- */
.sy-head{border-top:2px solid var(--sy-ink);padding-top:1.1rem;margin-bottom:2.25rem;}
.sy-head .no{
  font-family:'Instrument Serif',Georgia,serif;font-size:1.4rem;color:var(--sy-amber-dk);
  line-height:1;margin-right:.6rem;
}
.sy-head h2{font-size:clamp(1.6rem,3vw,2.15rem);margin:.35rem 0 0;}
.sy-head p{color:var(--sy-slate);margin:.6rem 0 0;max-width:44rem;}
.sy-dark .sy-head{border-top-color:var(--sy-amber);}
.sy-dark .sy-head h2{color:#fff;}
.sy-dark .sy-head p{color:#a5aec4;}

/* ---------- Sections ---------- */
.sy-sec{padding:3.75rem 0;}
.sy-tinted{background:var(--sy-tint);}
.sy-dark{background:var(--sy-ink);color:#b9c1d4;}
.sy-dark h2,.sy-dark h3,.sy-dark h4{color:#fff;}
.sy-muted{color:var(--sy-slate);}
.sy-dark .sy-muted{color:#a5aec4;}

/* answer-first lead line (AEO) */
.sy-answer{
  font-size:1.08rem;font-weight:500;color:var(--sy-ink-dk);
  border-left:4px solid var(--sy-amber);padding-left:1rem;margin-bottom:1.25rem;
}
.sy-dark .sy-answer{color:#fff;border-left-color:var(--sy-amber);}

/* ---------- Quick facts table ---------- */
.sy-facts{background:#fff;border:1px solid var(--sy-rule);border-radius:.6rem;overflow:hidden;}
.sy-facts table{margin:0;}
.sy-facts th{width:42%;background:#fbfcfe;font-weight:700;color:var(--sy-ink-dk);font-size:.92rem;}
.sy-facts td{color:var(--sy-slate);font-size:.92rem;}
.sy-facts th,.sy-facts td{padding:.75rem 1rem;border-color:var(--sy-rule);vertical-align:middle;}

/* ---------- Panels / cards ---------- */
.sy-panel{background:#fff;border:1px solid var(--sy-rule);border-radius:.6rem;height:100%;padding:1.5rem;}
.sy-dark .sy-panel{background:#22335a;border-color:#2d4066;}
.sy-panel h4{font-size:1rem;margin-bottom:.5rem;}
.sy-panel p{color:var(--sy-slate);font-size:.92rem;margin-bottom:0;}
.sy-dark .sy-panel p{color:#a5aec4;}
.sy-step{
  display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;
  border-radius:.3rem;background:var(--sy-amber);color:var(--sy-ink-dk);
  font-weight:700;font-size:.8rem;margin-bottom:.85rem;
}
.sy-dark .sy-step{background:var(--sy-amber);}

/* ---------- Ingredient list ---------- */
.sy-ing{border-bottom:1px solid var(--sy-rule);padding:1.1rem 0;}
.sy-ing:first-child{border-top:1px solid var(--sy-rule);}
.sy-ing h4{font-size:1rem;margin-bottom:.3rem;}
.sy-ing .dose{font-size:.75rem;font-weight:700;letter-spacing:1px;color:var(--sy-amber-dk);text-transform:uppercase;}
.sy-ing p{color:var(--sy-slate);font-size:.91rem;margin:.35rem 0 0;}

/* ---------- Seals ---------- */
.sy-seal{background:#fff;border:1px solid var(--sy-rule);border-radius:.5rem;padding:1.1rem .7rem;text-align:center;height:100%;}
.sy-seal img{max-width:min(110px,100%);margin:0 auto .5rem;}
.sy-seal p{margin:0;font-size:.82rem;font-weight:700;color:var(--sy-ink-dk);}

/* ---------- Tiles ---------- */
.sy-tile{border-radius:.6rem;overflow:hidden;border:1px solid var(--sy-rule);}
.sy-tile img{width:100%;}

/* ---------- Quotes ---------- */
.sy-quote{background:#fff;border:1px solid var(--sy-rule);border-radius:.6rem;padding:1.4rem;height:100%;}
.sy-quote .st{color:var(--sy-amber);letter-spacing:2px;font-size:.9rem;}
.sy-quote p{color:var(--sy-slate);font-size:.92rem;}
.sy-quote .nm{font-weight:700;font-size:.9rem;color:var(--sy-ink-dk);}
.sy-quote .lc{font-size:.78rem;color:var(--sy-slate);}

/* ---------- Pricing ---------- */
.sy-plan{background:#fff;border:1.5px solid var(--sy-rule);border-radius:.7rem;padding:1.6rem 1.15rem;text-align:center;height:100%;display:flex;flex-direction:column;position:relative;}
.sy-plan.best{border-color:var(--sy-amber);border-width:2.5px;}
.sy-ribbon{
  position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);
  background:var(--sy-amber);color:var(--sy-ink-dk);font-size:.68rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;padding:.25rem .9rem;border-radius:.25rem;white-space:nowrap;
}
.sy-ribbon.ink{background:var(--sy-ink);color:#fff;}
.sy-plan img{max-width:min(160px,100%);margin:.3rem auto 1rem;}
.sy-plan .pb{font-family:'Instrument Serif',Georgia,serif;font-size:2.15rem;line-height:1;color:var(--sy-ink-dk);}
.sy-plan .pb small{font-family:'Roboto',sans-serif;font-size:.8rem;color:var(--sy-slate);}
.sy-plan .tt{font-weight:700;font-size:.93rem;margin:.5rem 0 .1rem;}
.sy-plan .sh{font-size:.8rem;color:var(--sy-slate);margin-bottom:.85rem;}
.sy-plan .sh.free{color:var(--sy-amber-dk);font-weight:700;}
.sy-plan .btn-amber{margin-top:auto;width:100%;}

/* compact re-order strip */
.sy-strip{background:var(--sy-ink);border-radius:.7rem;padding:1.5rem 1.75rem;color:#fff;}
.sy-strip .big{font-family:'Instrument Serif',Georgia,serif;font-size:1.9rem;color:var(--sy-amber);line-height:1;}
.sy-strip .sm{color:#a5aec4;font-size:.86rem;}

/* ---------- Caution ---------- */
.sy-caution{background:#fff6ea;border:1.5px solid var(--sy-amber);border-radius:.7rem;padding:1.6rem 1.75rem;}
.sy-caution h4{color:#8a5714;font-size:1rem;}
.sy-caution p,.sy-caution li{color:#5d4523;font-size:.91rem;}
.sy-caution ul{padding-left:1.15rem;margin-bottom:0;}
.sy-caution li{margin-bottom:.45rem;}

/* ---------- Who for table ---------- */
.sy-fit th{background:var(--sy-ink);color:#fff;font-weight:700;font-size:.9rem;}
.sy-fit td,.sy-fit th{padding:.7rem .9rem;border-color:var(--sy-rule);font-size:.9rem;vertical-align:top;}
.sy-fit td{color:var(--sy-slate);background:#fff;}

/* ---------- Guarantee ---------- */
.sy-guar{background:#fff;border:1px solid var(--sy-rule);border-radius:.7rem;padding:2rem;}
.sy-guar img{max-width:min(160px,100%);margin-inline:auto;}

/* ---------- Accordion re-skin ---------- */
.accordion-item{background:transparent;border:none;border-bottom:1px solid var(--sy-rule);}
.accordion-item:first-of-type{border-top:1px solid var(--sy-rule);}
.accordion-button{
  background:transparent;font-family:'Roboto',sans-serif;font-weight:700;
  font-size:1rem;color:var(--sy-ink-dk);padding:1.05rem .2rem;box-shadow:none;
}
.accordion-button:not(.collapsed){background:transparent;color:var(--sy-amber-dk);box-shadow:none;}
.accordion-button:focus{box-shadow:none;}
.accordion-body{padding:0 .2rem 1.05rem;color:var(--sy-slate);font-size:.93rem;}

/* ---------- Footer ---------- */
.sy-foot{background:var(--sy-ink-dk);color:#8791a8;font-size:.84rem;padding:2.6rem 0 1.6rem;}
.sy-foot a{color:#b9c1d4;text-decoration:none;}
.sy-foot a:hover{color:var(--sy-amber);}
.sy-foot hr{border-color:rgba(255,255,255,.13);}

/* ---------- Sticky ---------- */
.sy-sticky{
  position:fixed;inset:auto 0 0 0;z-index:1040;background:var(--sy-ink-dk);
  padding:.5rem 1rem;display:none;align-items:center;justify-content:space-between;gap:.75rem;
  border-top:3px solid var(--sy-amber);
}
.sy-sticky b{font-family:'Instrument Serif',Georgia,serif;color:var(--sy-amber);font-size:1.15rem;}
.sy-sticky small{display:block;color:#8791a8;font-size:.7rem;}
@media(max-width:991.98px){.sy-sticky{display:flex;}body{padding-bottom:64px;}}

img{max-width:100%;height:auto;}