/* Launch IQ theme styles. VERSION 13.
   Unchanged from v11. The filename moves with the JS so the pair never splits;
   v12 changed the Academy area colour map and v13 added the Go deeper
   resolver, both of which live in the JS only.
   Loaded from R2 by the link tag in Ghost > Code injection > Site header.
   To change the design, edit this file, upload to R2 under a NEW filename
   (theme-2.css, theme-3.css) and update the link. Renaming is what busts
   the CDN cache; overwriting the same name can serve stale CSS for hours. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- shell + tokens ---------- */
.btl{
  --bg:#0A2230; --surf:#123040; --surf2:#18394B;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --tx:#E9F0F4; --tx2:#9EB3C0; --tx3:#71889A;
  --gold:#D4B85A; --goldsoft:rgba(212,184,90,.16);
  --blue:#4FA3E3; --bluesoft:rgba(79,163,227,.16);
  --red:#E0705F; --redsoft:rgba(224,112,95,.16);
  --paper:#EFEAE0; --paperink:#12242E;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --head:'Montserrat',-apple-system,system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --rs:19px;
  all:initial; display:block; font-family:var(--head);
  background:var(--bg); color:var(--tx);
  -webkit-font-smoothing:antialiased; margin:0 0 2rem;
  /* NEVER set overflow:hidden here. It kills position:sticky inside. */
}
.btl *,.btl *::before,.btl *::after{box-sizing:border-box;}
.btl p,.btl h1,.btl h2,.btl h3,.btl h4,.btl ul,.btl li,.btl table{margin:0;padding:0;}
.btl ul{list-style:none;}
.btl button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
.btl :focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.btl-wrap{max-width:680px;margin:0 auto;padding:0 22px;}
.btl-view{display:none;} .btl-view[data-on="true"]{display:block;}

/* ---------- detail: hero + cover ----------
   The cover is fully theme-driven. A case supplies four values and nothing else:

     <div class="btl-cover" data-year="MAY 2026"
          data-generic="Ensitrelvir · Shionogi"
          data-tagline="The fight they didn't plan to win">XOCOVA</div>

   Colour comes from data-area on the same element, matching the therapeutic
   area tag. Change the design here and every case updates at once. */
.btl-hero{position:relative;padding:22px 22px 18px;text-align:center;overflow:hidden;
  background:linear-gradient(168deg,#26404A 0%,#16323F 55%,var(--bg) 100%);}
.btl-hero::before{content:"";position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  width:280px;height:280px;border-radius:50%;background:rgba(212,184,90,.20);filter:blur(70px);}
.btl-cover{position:relative;width:158px;margin:0 auto;border-radius:10px;
  aspect-ratio:3/4;padding:16px 13px 13px;
  display:grid;grid-template-rows:auto 1fr auto;text-align:center;
  background:var(--cv-bg,#E7DFCB);color:var(--cv-ink,#12242E);
  box-shadow:0 22px 48px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.10);}
.btl-cover::before{content:attr(data-year);font-family:var(--mono);font-size:10px;
  font-weight:600;letter-spacing:.22em;line-height:1;align-self:start;color:var(--cv-accent,#8E7325);}
.btl-cover::after{content:attr(data-tagline);font-family:var(--serif);font-style:italic;
  font-size:9.5px;line-height:1.4;align-self:end;padding-top:9px;
  border-top:1px solid;border-color:color-mix(in srgb,var(--cv-ink,#12242E) 18%,transparent);
  color:var(--cv-mute,#7E7767);}
.btl-cvmid{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:0;transform:translateY(-4%);}
.btl-cvname{font-family:var(--head);font-weight:800;font-size:23px;letter-spacing:-.035em;
  line-height:.98;text-transform:uppercase;}
/* Stepped by length, set by the runtime.
   Drug names are short, so a flat size worked until Academy modules arrived
   with titles like REGULATORY STRATEGY: nineteen characters in a 132px box.
   Without this a module has to override the cover locally, and the font drifts
   off-brand the moment it does. Never restyle a cover in a case or module file.
   Bands key off the LONGEST WORD as well as the total, because a single long
   word cannot wrap and is what actually overflows. */
.btl-cvname[data-len="s"]{font-size:19px;letter-spacing:-.03em;line-height:1.02;}
.btl-cvname[data-len="m"]{font-size:16px;letter-spacing:-.02em;line-height:1.06;}
.btl-cvname[data-len="l"]{font-size:13.5px;letter-spacing:-.01em;line-height:1.12;}
.btl-cvgen{font-family:var(--mono);font-size:6.5px;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.55;margin-top:9px;color:var(--cv-mute,#7E7767);}
.btl-cvgen span{display:block;}
.btl-cvgen span+span{opacity:.78;}


/* ---------- detail: actions + meta ---------- */
.btl-actions{display:flex;align-items:center;gap:12px;margin-top:16px;}
.btl-circ{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.10);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;transition:.15s;}
.btl-circ:hover{background:rgba(255,255,255,.16);}
.btl-circ svg{width:17px;height:17px;fill:none;stroke:var(--tx);stroke-width:1.8;}
.btl-readbtn{display:flex;align-items:center;background:#DCE8EE;border-radius:30px;overflow:hidden;margin-left:auto;}
.btl-readbtn .rd{font-family:var(--head);font-weight:700;font-size:14.5px;color:#0A2230;padding:13px 22px;}
.btl-readbtn .rd:hover{background:rgba(10,34,48,.07);}
.btl-readbtn .pl{width:52px;height:48px;display:flex;align-items:center;justify-content:center;border-left:1px solid rgba(10,34,48,.15);}
.btl-readbtn .pl svg{width:26px;height:26px;fill:#1A5C8A;}
.btl-readbtn .pl[hidden]{display:none;}

.btl-detail{max-width:680px;margin:0 auto;padding:16px 22px 50px;}
.btl-dmeta{font-family:var(--head);font-size:13px;color:var(--tx2);font-weight:600;}
.btl-dtitle{font-family:var(--head);font-weight:800;font-size:32px;letter-spacing:-.025em;line-height:1.05;margin:8px 0 8px;}
.btl-dsub{font-family:var(--serif);font-size:16.5px;color:var(--tx2);line-height:1.5;}
.btl-dauth{font-family:var(--head);font-weight:700;font-size:13.5px;margin-top:10px;color:var(--tx2);}
.btl-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.btl-pill{background:rgba(255,255,255,.09);border-radius:24px;padding:9px 16px;font-family:var(--head);font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px;}
.btl-pill .dotg{width:8px;height:8px;border-radius:50%;background:var(--gold);}

/* ---------- tabs ---------- */
.btl-tabs{display:flex;gap:26px;margin-top:20px;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.btl-tabs::-webkit-scrollbar{display:none;}
.btl-tb{font-family:var(--head);font-weight:700;font-size:15px;color:var(--tx3);padding:0 0 12px;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;}
.btl-tb[aria-selected="true"]{color:var(--tx);border-bottom-color:var(--gold);}
.btl-tp{display:none;padding-top:24px;} .btl-tp[data-on="true"]{display:block;}
.btl-tp h3{font-family:var(--head);font-weight:800;font-size:21px;margin-bottom:12px;}
.btl-tp > p{font-family:var(--serif);font-size:17px;line-height:1.62;color:var(--tx2);}
.btl-tp > p + p{margin-top:.8em;}
.btl-lbl{font-family:var(--head);font-weight:700;font-size:14px;color:var(--tx);margin:24px 0 10px;}
.btl-tp ul.who li{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--tx2);position:relative;padding:6px 0 6px 20px;}
.btl-tp ul.who li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:var(--gold);}

/* ---------- outline list ---------- */
.btl-otl{border-top:1px solid var(--line);}
.btl-or{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;padding:15px 2px;border-bottom:1px solid var(--line);transition:.12s;}
.btl-or:hover{background:rgba(255,255,255,.04);}
.btl-or .n{font-family:var(--mono);font-size:11px;color:var(--gold);}
.btl-or .t{font-family:var(--head);font-weight:600;font-size:14.5px;line-height:1.35;color:var(--tx);}
.btl-or .m{font-family:var(--mono);font-size:10.5px;color:var(--tx3);}

/* ---------- reader ---------- */
.btl-bar{position:sticky;top:0;z-index:30;background:rgba(10,34,48,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.btl-barin{max-width:680px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:12px;}
.btl-ic{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;flex:none;transition:.15s;}
.btl-ic:hover{background:rgba(255,255,255,.15);}
.btl-ic svg{width:16px;height:16px;fill:none;stroke:var(--tx);stroke-width:1.9;}
.btl-ic.aa{font-family:var(--head);font-weight:700;font-size:14px;}
.btl-bmini{flex:1;min-width:0;}
.btl-bmini .t{font-family:var(--head);font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.btl-bmini .s{font-family:var(--head);font-size:11.5px;color:var(--tx3);margin-top:1px;}
.btl-btools{display:flex;gap:7px;margin-left:auto;}

.btl-doc{padding:30px 0 140px;}
.btl-chlab{font-family:var(--serif);font-size:15px;color:var(--tx3);margin:0 0 10px;}
.btl-doc h2{font-family:var(--head);font-weight:800;font-size:clamp(25px,5.4vw,33px);line-height:1.18;letter-spacing:-.02em;margin:0 0 20px;}
.btl-doc p{font-family:var(--serif);font-size:var(--rs);line-height:1.68;color:#D5E2E9;}
.btl-doc p + p{margin-top:1em;}
.btl-ch{padding-top:46px;} .btl-ch:first-child{padding-top:0;}
.btl-rule{height:1px;background:var(--line);margin-top:44px;}
.btl-pull{font-family:var(--head);font-weight:800;font-size:20px;line-height:1.38;color:var(--gold);margin:26px 0;padding-left:18px;border-left:3px solid var(--gold);}

/* ---------- progress pill ---------- */
.btl-hud{position:sticky;bottom:16px;z-index:25;padding:0 22px;pointer-events:none;}
.btl-hudin{max-width:420px;margin:0 auto;background:rgba(24,57,75,.94);backdrop-filter:blur(16px);border:1px solid var(--line2);border-radius:18px;padding:12px 18px 14px;pointer-events:auto;box-shadow:0 14px 34px rgba(0,0,0,.45);}
.btl-hudtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;}
.btl-hudtop .n{font-family:var(--head);font-weight:700;font-size:13px;}
.btl-hudtop .l{font-family:var(--head);font-size:11.5px;color:var(--tx3);font-weight:600;}
.btl-segs{display:flex;gap:3px;}
.btl-seg{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .3s;}
.btl-seg[data-on="1"]{background:var(--gold);}

/* ---------- outline drawer ---------- */
.btl-drawer{position:fixed;inset:0;z-index:60;display:none;}
.btl-drawer[data-on="true"]{display:block;}
.btl-scrim{position:absolute;inset:0;background:rgba(4,16,23,.74);}
.btl-panel{position:absolute;right:0;top:0;bottom:0;width:min(360px,86vw);background:var(--surf);padding:22px 0;overflow-y:auto;box-shadow:-14px 0 40px rgba(0,0,0,.5);}
.btl-panel .ph{font-family:var(--head);font-weight:800;font-size:17px;padding:0 22px 16px;display:flex;justify-content:space-between;align-items:center;}
.btl-pr{display:grid;grid-template-columns:26px 1fr;gap:11px;width:100%;text-align:left;padding:12px 22px;border-bottom:1px solid var(--line);}
.btl-pr:hover{background:rgba(255,255,255,.05);}
.btl-pr .n{font-family:var(--mono);font-size:10.5px;color:var(--gold);padding-top:2px;}
.btl-pr .t{font-family:var(--head);font-weight:600;font-size:13.5px;line-height:1.35;}
.btl-pr[data-cur="1"] .t{color:var(--gold);}

/* ---------- share toast ---------- */
.btl-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);z-index:80;
  background:var(--gold);color:#14232B;font-family:var(--head);font-weight:700;font-size:13px;
  padding:12px 20px;border-radius:24px;box-shadow:0 12px 30px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;}
.btl-toast[data-on="true"]{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- audio player ---------- */
.btl-audio{display:none;position:sticky;top:61px;z-index:29;padding:0 22px;}
.btl-audio[data-on="true"]{display:block;}
.btl-audioin{max-width:680px;margin:12px auto 0;background:var(--surf2);border:1px solid var(--line2);
  border-radius:16px;padding:11px 14px;display:flex;align-items:center;gap:13px;}
.btl-apl{width:40px;height:40px;border-radius:50%;background:var(--gold);flex:none;display:flex;align-items:center;justify-content:center;}
.btl-apl svg{width:15px;height:15px;fill:#14232B;}
/* The bar the reader SEES stays a thin line; the bar they can HIT is 18px.
   A 4px target on a phone means missing it, which is why scrubbing felt
   impossible. Padding gives the height, background-clip keeps the visible
   line thin. */
.btl-abar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.14);position:relative;
  cursor:pointer;touch-action:none;box-sizing:content-box;
  padding:9px 0;background-clip:content-box;margin:-9px 0;}
.btl-abar i{top:9px;bottom:9px;}
/* skip 15 back and forward, injected by the runtime */
.btl-askip{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;cursor:pointer;color:var(--tx2);}
.btl-askip svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}

.btl-askip:active{color:var(--gold);transform:scale(.92);}
.btl-abar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;background:var(--gold);display:block;}
.btl-atime{font-family:var(--mono);font-size:11px;color:var(--tx3);flex:none;}
.btl-arate{font-family:var(--head);font-weight:700;font-size:11.5px;color:var(--tx2);flex:none;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.08);}

/* ---------- STANDING VISUAL COMPONENTS ---------- */
.btl-obj{margin:26px 0;}

/* stat strip */
.btl-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));background:var(--surf);border-radius:14px;overflow:hidden;}
.btl-st{padding:15px 17px;border-right:1px solid var(--line);}
.btl-st:last-child{border-right:none;}
.btl-st .v{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--gold);letter-spacing:-.02em;}
.btl-st .k{font-family:var(--head);font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--tx3);margin-top:6px;line-height:1.4;font-weight:600;}

/* bar race: two or more lanes, .d = drug, .p = comparator */
.btl-race{background:var(--surf);border-radius:14px;padding:19px 21px;}
.btl-race .rt{font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--tx3);margin-bottom:16px;}
.btl-lane{margin-bottom:14px;} .btl-lane:last-of-type{margin-bottom:0;}
.btl-lane .lb{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.btl-lane .ln{font-family:var(--head);font-weight:700;font-size:12.5px;}
.btl-lane .lv{font-family:var(--mono);font-weight:600;font-size:15px;}
.btl-lane.d .lv{color:var(--blue);} .btl-lane.p .lv{color:var(--red);}
.btl-lt{height:11px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;}
.btl-lt span{display:block;height:100%;width:0;border-radius:6px;transition:width 1.1s cubic-bezier(.22,1,.36,1);}
.btl-lane.d .btl-lt span{background:var(--blue);} .btl-lane.p .btl-lt span{background:var(--red);}
.btl.seen .btl-lt span{width:var(--w);}
.btl-verdict{font-family:var(--head);font-weight:700;font-size:12.5px;color:var(--tx2);margin-top:15px;padding-top:13px;border-top:1px solid var(--line);}

/* vertical timeline: add .key for a turning point, .fail for a failure */
.btl-tl{background:var(--surf);border-radius:14px;padding:18px 20px 18px 42px;position:relative;}
.btl-tl::before{content:"";position:absolute;left:26px;top:26px;bottom:26px;width:2px;background:var(--line2);}
.btl-tli{position:relative;padding:9px 0;}
.btl-tli::before{content:"";position:absolute;left:-21px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--surf);border:2.5px solid var(--line2);}
.btl-tli.key::before{border-color:var(--gold);background:var(--gold);}
.btl-tli.fail::before{border-color:var(--red);background:var(--red);}
.btl-tli .d{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--gold);}
.btl-tli .t{font-family:var(--head);font-weight:700;font-size:13.5px;margin-top:3px;line-height:1.3;}

/* step / ranking cards: add .risk for the red variant */
.btl-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:9px;}
.btl-fl{background:var(--surf);border-radius:12px;padding:14px 15px;}
.btl-fl .fn{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;color:var(--gold);}
.btl-fl .ft{font-family:var(--head);font-weight:700;font-size:12.5px;margin-top:5px;line-height:1.3;}
.btl-fl .fd{font-family:var(--head);font-size:11.5px;color:var(--tx3);margin-top:5px;line-height:1.45;font-weight:500;}
.btl-fl.risk{background:var(--redsoft);} .btl-fl.risk .ft,.btl-fl.risk .fn{color:var(--red);}

/* table */
.btl-tw{overflow-x:auto;background:var(--surf);border-radius:14px;}
.btl-tbl{width:100%;border-collapse:collapse;font-family:var(--head);font-size:13px;min-width:400px;}
.btl-tbl th{font-weight:700;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);}
.btl-tbl td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--tx2);line-height:1.45;font-weight:500;}
.btl-tbl tr:last-child td{border-bottom:none;}
.btl-tbl td:first-child{font-weight:700;color:var(--tx);white-space:nowrap;}

/* callouts + evidence tags */
.btl-note{background:var(--goldsoft);border-radius:12px;padding:16px 19px;font-family:var(--head);font-size:14.5px;line-height:1.58;color:var(--tx2);margin:22px 0;font-weight:500;}
.btl-note b{font-weight:700;color:var(--gold);}
.btl-note.r{background:var(--redsoft);} .btl-note.r b{color:var(--red);}
.btl-tag{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:5px;display:inline-block;vertical-align:2px;}
/* The word inside the pill is printed here, not in the case files.
   Case files carry the literal text "Fact"; it is suppressed and replaced so
   the label can be changed once, centrally, without reopening a published
   post. Case files may type either "Fact" or "Source" and both render the
   same. To change the wording again, edit the content string below only. */
.btl-tag-fact{background:var(--bluesoft);color:var(--blue);
  font-size:0;letter-spacing:0;}
.btl-tag-fact::after{content:"Source";font-size:9.5px;letter-spacing:.12em;}
/* A tag carrying data-row prints its ledger number: SOURCE 14 rather than
   SOURCE. The number is what makes the numbered ledger mean anything, since a
   reader can otherwise only guess which of twenty-two rows backs a claim. */
.btl-tag-fact[data-row]::after{content:"Source " attr(data-row);}
.btl-tag-fact[data-row]{cursor:pointer;}
.btl-tag-fact[data-row]:hover{filter:brightness(1.25);}

/* ---------- inline citation, narrative ----------
   The reader names its sources in prose, which is why it reads like a person
   talking, so a footnote here has to be nearly invisible. Small, raised, gold,
   no underline, no brackets. It marks hard claims only: figures, dates, deal
   terms, direct quotes. */
.btl-cite{font-family:var(--mono);font-size:.62em;font-weight:600;
  vertical-align:super;line-height:0;color:var(--gold);cursor:pointer;
  margin-left:2px;padding:0 1px;text-decoration:none;opacity:.85;}
.btl-cite:hover{opacity:1;text-decoration:underline;}
/* the row a citation points at, briefly lit when you arrive */
.btl-src li.lit{animation:btl-lit 2.2s ease-out;}
@keyframes btl-lit{
  0%,20%{background:var(--goldsoft);box-shadow:0 0 0 6px var(--goldsoft);}
  100%{background:transparent;box-shadow:0 0 0 6px transparent;}
}
.btl-tag-an{background:var(--goldsoft);color:var(--gold);}

/* ---------- strategy breakdown ---------- */
.btl-secnav{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:24px;}
.btl-sb{font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--tx2);border:1.5px solid var(--line2);border-radius:22px;padding:9px 14px;transition:.15s;}
.btl-sb:hover{border-color:var(--gold);color:var(--gold);}
.btl-sb[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#14232B;}
.btl-sec{display:none;} .btl-sec[data-on="true"]{display:block;}
.btl-snum{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;}
.btl-sec h2{font-family:var(--head);font-weight:800;font-size:clamp(22px,4.4vw,27px);line-height:1.2;margin:9px 0 14px;}
.btl-sec p{font-family:var(--serif);font-size:17px;line-height:1.65;color:#D5E2E9;}
.btl-sec p + p{margin-top:.8em;}
/* tag strip: neutral = descriptive, .hi = strength, .warn = risk */
.btl-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px;}
.btl-chip{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;background:rgba(255,255,255,.07);border:1px solid var(--line2);color:var(--tx2);border-radius:7px;padding:6px 10px;}
.btl-chip.hi{background:var(--goldsoft);border-color:rgba(212,184,90,.4);color:var(--gold);}
.btl-chip.warn{background:var(--redsoft);border-color:rgba(224,112,95,.4);color:var(--red);}
.btl-lesson{background:var(--goldsoft);border-radius:12px;padding:16px 19px;margin-top:22px;}
.btl-lesson .l{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;}
.btl-lesson p{font-family:var(--head);font-weight:700;font-size:15.5px;line-height:1.45;color:var(--tx);}
.btl-watch{background:var(--redsoft);border-radius:12px;padding:16px 19px;margin-top:10px;}
.btl-watch .l{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:7px;}
.btl-watch p{font-family:var(--head);font-weight:600;font-size:15px;line-height:1.45;color:var(--tx2);}


/* ---------- Academy cross-link ----------
   Sits at the end of a strategy area and points at the concept module that
   teaches it. Used as:
   <a class="btl-learn" href="/slug/"><span class="lb">Academy</span>
     Compare the five distribution models <svg .../></a>
   ---------------------------------------- */
.btl-learn{display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  font-family:var(--head);font-size:12.5px;font-weight:700;color:var(--gold);
  text-decoration:none;border:1.5px solid rgba(212,184,90,.35);border-radius:22px;
  padding:9px 16px;transition:.15s;line-height:1.3;}
.btl-learn:hover{background:var(--goldsoft);border-color:var(--gold);}
.btl-learn .lb{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;opacity:.72;}
.btl-learn svg{width:11px;height:11px;fill:none;stroke:var(--gold);stroke-width:2.4;flex:none;}


/* ---------- disclaimer ----------
   Injected automatically by the runtime: at the TOP of the Sources tab, where
   it frames the ledger before anyone reads it, and at the END of the reader,
   where it closes the narrative. Every case carries it without anything being
   pasted per episode. */
.btl-disc{margin-top:30px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.03);}
/* the copy at the top of the Sources tab leads rather than trails, so the
   margin flips to the underside */
.btl-disc.top{margin-top:0;margin-bottom:26px;}
.btl-disc a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}
.btl-disc .dl{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx3);margin-bottom:9px;}
.btl-disc p{font-family:var(--head);font-size:12.5px;line-height:1.6;color:var(--tx3);font-weight:500;}
.btl-disc p+p{margin-top:.7em;}

/* ---------- citation ledger ---------- */
.btl-src li{position:relative;padding:10px 0 10px 32px;font-family:var(--head);font-size:13px;line-height:1.5;color:var(--tx2);border-bottom:1px solid var(--line);font-weight:500;}
.btl-src li:last-child{border-bottom:none;}
.btl-src .n{position:absolute;left:0;top:12px;font-family:var(--mono);font-size:10px;color:var(--gold);font-weight:600;}
.btl-src a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(79,163,227,.35);}

@media(max-width:600px){
  .btl-st{border-right:none;border-bottom:1px solid var(--line);}
  .btl-dtitle{font-size:32px;}
}
@media(prefers-reduced-motion:reduce){.btl *{transition:none!important;}}

/* ---------- GHOST INTEGRATION ----------
   Ghost themes lay post content out in a narrow grid column. These rules
   break the case study out to full width and hide the duplicate post header,
   since the case carries its own cover and title. Selectors cover Source,
   Casper, Dawn, Edition and most others. Add your theme's wrapper here if
   yours still constrains it. */
.gh-content > .kg-card > .btl,
.gh-content > .btl,
.post-content > .btl,
.post-full-content > .btl,
.kg-card > .btl,
.btl{
  grid-column:1/-1 !important;
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
/* the HTML card wrapper Ghost puts around injected markup */
.kg-card.kg-html-card:has(.btl),
.kg-html-card:has(.btl){
  grid-column:1/-1 !important;
  width:100% !important;
  max-width:100% !important;
}
/* Hide Ghost's own post header on case pages only.
   Two selectors, because a locked post has no .btl in the DOM at all: Ghost
   withholds the body of a gated post, so the case file never arrives and the
   first rule cannot match. The paywall is what IS delivered, so it stands in
   as the signal. Without the second rule a locked case showed Ghost's title,
   excerpt, author and share button above a paywall that repeats all of it. */
body:has(.btl) .gh-article-header,
body:has(.btl) .article-header,
body:has(.btl) .post-full-header,
body:has(.btl) .gh-canvas > header,
body:has(.btl) .gh-article-image,
body:has(.btl) .article-image,
body:has(.gh-post-upgrade-cta) .gh-article-header,
body:has(.gh-post-upgrade-cta) .article-header,
body:has(.gh-post-upgrade-cta) .post-full-header,
body:has(.gh-post-upgrade-cta) .gh-canvas > header,
body:has(.gh-post-upgrade-cta) .gh-article-image,
body:has(.gh-post-upgrade-cta) .article-image{
  display:none !important;
}
/* strip default article padding so the dark shell reaches the edges */
body:has(.btl) .gh-content,
body:has(.gh-post-upgrade-cta) .gh-content{ padding-top:0 !important; margin-top:0 !important; }

/* ============================================================================
   SITE-WIDE DARK
   Ghost's default theme is light, so a dark case study sits on a white page.
   This darkens the whole front end: background, header, nav, footer, forms.
   Covers Source, Casper, Dawn, Edition and most other official themes.
   If you want ONLY case pages dark, wrap each selector in body:has(.btl).
   ============================================================================ */
html, body,
.site, .site-wrapper, .gh-site, .gh-viewport, .gh-main, .gh-canvas,
.site-content, .post-full-content, .gh-content, main, .gh-outer{
  background:#0A2230 !important;
  color:#E9F0F4 !important;
}
/* header + nav */
.gh-head, .site-header, .gh-navigation, .gh-header, .outer.site-nav-main,
.site-nav-main, .gh-head-inner{
  background:#0A2230 !important;
  border-color:rgba(255,255,255,.10) !important;
}
.gh-head a, .site-nav a, .gh-head-link, .gh-navigation a,
.site-title, .gh-head-logo, .gh-head-logo a{
  color:#E9F0F4 !important;
}
.gh-head a:hover, .gh-navigation a:hover{ color:#D4B85A !important; }
/* the subscribe / cta button in the header */
.gh-head-button, .gh-head-btn, .site-nav-button{
  background:#D4B85A !important; color:#14232B !important; border-color:#D4B85A !important;
}
/* footer */
.gh-foot, .site-footer, .gh-footer, .gh-foot-menu a, .site-footer a{
  background:#0A2230 !important; color:#9EB3C0 !important;
  border-color:rgba(255,255,255,.10) !important;
}
/* generic type on non-case pages */
h1,h2,h3,h4,h5,h6,.gh-article-title,.post-card-title,.gh-card-title{ color:#E9F0F4 !important; }
p,li,.gh-article-excerpt,.post-card-excerpt,.gh-card-excerpt{ color:#9EB3C0 !important; }
hr,.gh-post-footer,.gh-article-footer{ border-color:rgba(255,255,255,.10) !important; }
/* post cards on index pages */
.post-card, .gh-card{ background:transparent !important; }
.post-card-image-link, .gh-card-image{ border-radius:10px !important; overflow:hidden !important; }
/* forms and membership modals */
input, textarea, select{
  background:#123040 !important; color:#E9F0F4 !important;
  border-color:rgba(255,255,255,.18) !important;
}
input::placeholder, textarea::placeholder{ color:#71889A !important; }
/* Ghost Portal (signup/signin) honours these */
:root{
  --ghost-accent-color:#D4B85A;
}




/* ---------- Ghost post header ----------
   Source renders its own author block above the post. Its text inherits a dark
   colour from the theme's light defaults, which is invisible on our shell. */
.gh-article-meta, .gh-article-meta *,
.gh-article-author-name, .gh-author-name,
.gh-article-meta a, .gh-article-meta time{
  color:var(--tx2) !important;
}
.gh-article-author-name, .gh-author-name{
  color:var(--tx) !important; font-weight:700 !important;
}
.gh-article-meta a:hover{ color:var(--gold) !important; }
/* the placeholder avatar circle */
.gh-author-image, .gh-avatar, .gh-article-meta img{
  background:var(--surf2) !important;
  border:1px solid var(--line2) !important;
}
.gh-avatar svg, .gh-author-image svg{ fill:var(--tx3) !important; }
/* the primary-tag eyebrow */
.gh-article-tag, .gh-article-meta .gh-article-tag a{
  color:var(--gold) !important; font-weight:700 !important;
}

/* ---------- SOURCE'S SITE-WIDE SIGNUP CTA ----------
   Source drops an email form above the footer on every page. It creates a FREE
   member, not a trial, so its button says something different from every other
   CTA on the site. One ask, everywhere: "Start 7 days free".

   Try Settings > Design & branding > Site-wide first: Source has an email
   signup option with a "None" choice, which is cleaner than hiding it here.
   This rule is the fallback if that setting is missing or ignored. */
.footer-cta{ display:none !important; }

/* ---------- paywall CTA ----------
   Ghost renders this OUTSIDE .btl, so the theme's CSS variables do not reach
   it. Every value here is literal on purpose. Do not swap these for var(),
   they will silently resolve to nothing. */
.gh-post-upgrade-cta{ padding:0 !important; background:transparent !important;
  border:none !important; }
.gh-post-upgrade-cta-content, .post-upgrade-cta{
  background:linear-gradient(150deg,#26404A 0%,#16323F 60%,#123040 100%) !important;
  border:1px solid rgba(212,184,90,.28) !important;
  border-radius:22px !important;
  color:#E9F0F4 !important;
  padding:38px 34px !important; text-align:center !important;
  max-width:660px; margin:0 auto; position:relative; overflow:hidden;
}
.liq-pw{ position:relative;
  font-family:'Montserrat',-apple-system,system-ui,sans-serif; }

/* the case cover, so a blocked reader sees what they are buying */
.liq-pw .cov{ width:132px; margin:0 auto 22px; border-radius:10px; overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.09); }
.liq-pw .covin{ aspect-ratio:3/4; padding:16px 13px 14px; display:grid;
  grid-template-rows:auto minmax(0,1fr) auto; text-align:center; }
.liq-pw .covy{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:9.5px;
  font-weight:600; letter-spacing:.2em; align-self:start; }
.liq-pw .covm{ display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:0; overflow:hidden; }
.liq-pw .covn{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:21px;
  letter-spacing:-.035em; line-height:.98; text-transform:uppercase;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* Stepped by name length, the same way the Library tile does it. The cover is a
   fixed 132px wide, so a long name at 21px wrapped mid-word. Fixed sizes rather
   than the tile's clamp, because there is no fluid width to clamp against. */
.liq-pw .covn[data-len="s"]{ font-size:19px; }
.liq-pw .covn[data-len="m"]{ font-size:16.5px; letter-spacing:-.03em; }
.liq-pw .covn[data-len="l"]{ font-size:14px; letter-spacing:-.02em; }
/* Academy titles run far longer than a drug name. Drop a step further and allow
   a fourth line rather than clamping the end off a heading. */
.liq-pw .covn[data-len="xl"]{ font-size:11.5px; letter-spacing:-.01em;
  line-height:1.14; -webkit-line-clamp:4; }
/* two lines reserved whether or not the area needs them, so the name sits at
   the same height on every cover */
.liq-pw .cova{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:6.5px;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.5; margin-top:9px;
  min-height:3em; }
.liq-pw .covf{ font-family:'Source Serif 4',Georgia,serif; font-style:italic;
  font-size:10px; line-height:1.4; border-top:1px solid; padding-top:9px; align-self:end; }

.liq-pw h3{ font-family:'Montserrat',sans-serif; font-weight:800;
  font-size:clamp(23px,3.8vw,32px); letter-spacing:-.03em; line-height:1.12;
  color:#E9F0F4 !important; margin:0; }
.liq-pw h3 em{ font-style:italic; color:#D4B85A; }
.liq-pw .s{ font-family:'Source Serif 4',Georgia,serif; font-size:16.5px; line-height:1.6;
  color:#9EB3C0 !important; margin:14px auto 0; max-width:33em; }

/* device pair, same construction as the sales page */
.liq-pw .devices{ display:flex; align-items:flex-end; justify-content:center;
  max-width:470px; margin:30px auto 0; }
.liq-pw .laptop{ flex:0 1 68%; min-width:0; position:relative; z-index:1; }
.liq-pw .lscreen{ background:#123040; border:1px solid rgba(255,255,255,.18);
  border-radius:9px 9px 2px 2px; padding:6px 6px 0; box-shadow:0 18px 44px rgba(0,0,0,.5); }
.liq-pw .lscreen img{ display:block; width:100%; height:auto; border-radius:4px 4px 0 0; }
.liq-pw .lbase{ height:8px; background:linear-gradient(180deg,#22394A,#162834);
  border-radius:0 0 9px 9px; margin:0 -10px; }
.liq-pw .phone{ flex:0 1 26%; min-width:0; margin-left:-7%; position:relative; z-index:2;
  background:#0A2230; border:4px solid #1B3241; border-radius:19px; padding:5px 4px;
  box-shadow:0 18px 38px rgba(0,0,0,.55); }
.liq-pw .pnotch{ width:38%; height:4px; border-radius:3px; background:#1B3241; margin:0 auto 5px; }
.liq-pw .phone img{ display:block; width:100%; height:auto; border-radius:12px; }

/* gold check list */
.liq-pw ul{ list-style:none !important; margin:28px auto 0 !important;
  padding:0 !important; max-width:400px; text-align:left; }
.liq-pw li{ position:relative; padding:8px 0 8px 32px !important;
  font-family:'Montserrat',sans-serif; font-size:14.5px; line-height:1.5;
  color:#C6D5DE !important; font-weight:500; list-style:none !important; }
.liq-pw li::before{ content:none !important; }
.liq-pw li svg{ position:absolute; left:0; top:9px; width:17px; height:17px;
  fill:none !important; stroke:#D4B85A !important; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; }

.liq-pw .cta, .gh-post-upgrade-cta a.gh-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:#D4B85A !important; color:#14232B !important;
  font-family:'Montserrat',sans-serif; font-weight:700 !important; font-size:16px;
  padding:16px 34px; border-radius:32px; border:none !important;
  text-decoration:none !important; box-shadow:none !important;
  margin-top:28px; transition:.15s;
}
.liq-pw .cta:hover, .gh-post-upgrade-cta a.gh-btn:hover{
  background:#E2CB79 !important; color:#14232B !important; transform:translateY(-1px); }
.liq-pw .pr{ display:block; font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:#71889A !important; margin-top:14px; }
.liq-pw .si{ font-family:'Montserrat',sans-serif; font-size:13.5px;
  color:#9EB3C0 !important; margin-top:16px; }
.liq-pw .si a, .gh-post-upgrade-cta a:not(.gh-btn):not(.cta){
  color:#D4B85A !important; text-decoration:none !important;
  box-shadow:none !important; border-bottom:1px solid rgba(212,184,90,.4); }
.liq-pw .trust{ font-family:'Montserrat',sans-serif; font-size:12.5px; line-height:1.55;
  color:#71889A !important; margin:22px auto 0; max-width:34em;
  padding-top:18px; border-top:1px solid rgba(255,255,255,.10); }
@media(max-width:600px){
  .gh-post-upgrade-cta-content{ padding:26px 20px !important; }
  .liq-pw .cta{ width:100%; }
  .liq-pw .devices{ max-width:none; }
  .liq-pw .laptop{ flex:0 1 70%; }
  .liq-pw .phone{ flex:0 1 32%; margin-left:-8%; }
}

/* ---------- MOBILE NAV ----------
   Source's mobile menu is separate markup we do not control, so we hide its
   burger and inject our own row instead. Ours is static, always visible, and
   cannot go transparent because we own the element. */
.btl-mnav{display:none;}
@media (max-width: 900px){
  #gh-navigation .gh-burger,
  #gh-navigation [class*="burger"],
  #gh-navigation [class*="toggle"],
  #gh-navigation button[aria-label*="menu" i]{ display:none !important; }

  .btl-mnav{
    display:flex;justify-content:center;align-items:center;gap:26px;
    background:#0A2230;border-bottom:1px solid rgba(255,255,255,.10);
    padding:11px 16px;position:relative;z-index:40;
  }
  .btl-mnav a{
    font-family:'Montserrat',system-ui,sans-serif;font-size:14px;font-weight:600;
    color:#9EB3C0;text-decoration:none;white-space:nowrap;
  }
  .btl-mnav a[aria-current="page"]{ color:#D4B85A; }
}

/* ---------- mobile menu ----------
   Source's dropdown inherits a transparent background from the overrides above,
   so the menu prints on top of the page. Give it a solid surface and a real
   stacking context. */
.gh-navigation-menu.is-open,
.gh-dropdown, .gh-navigation .gh-dropdown,
#gh-navigation .gh-navigation-menu[class*="open"],
.gh-navigation.is-open .gh-navigation-menu{
  background:#0A2230 !important;
  background-color:#0A2230 !important;
}
/* the full-screen overlay Source uses on small screens */
.gh-navigation-menu[data-menu], .gh-menu, .gh-menu-overlay,
body.is-dropdown-loaded .gh-navigation-menu{
  background:#0A2230 !important;
}
@media (max-width: 900px){
  #gh-navigation .gh-navigation-menu{
    background:#0A2230 !important;
    backdrop-filter:none !important;
  }
  /* when the menu is open, stop the page behind it from showing through */
  body:has(#gh-navigation[class*="open"]) .gh-viewport > :not(#gh-navigation){
    visibility:hidden;
  }
}


/* ---------- mobile menu ----------
   Source's expanded menu has no background of its own, so page content shows
   through. Giving the menu and actions a solid navy is invisible on desktop
   (they already sit inside the navy bar) and opaque on mobile. */
#gh-navigation .gh-navigation-menu,
#gh-navigation .gh-navigation-actions{
  background:#0A2230 !important;
}
@media (max-width: 900px){
  #gh-navigation .gh-navigation-menu,
  #gh-navigation .gh-navigation-actions{
    background:#0A2230 !important;
    position:relative;
    z-index:60;
  }
  #gh-navigation{
    background:#0A2230 !important;
    z-index:60;
  }
}

/* ---------- Ghost header search + nav polish ---------- */
/* the search field/pill Ghost drops in the header */
.gh-search, .gh-head-search, #ghost-search-root, .gh-portal-search,
.gh-head-actions .gh-search, [data-ghost-search]{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#9EB3C0 !important;
}
.gh-search svg, .gh-head-search svg{ fill:#9EB3C0 !important; stroke:#9EB3C0 !important; }
.gh-search:hover svg{ fill:#D4B85A !important; stroke:#D4B85A !important; }
/* Ghost's search modal, once opened */
.gh-portal-popup-container, #sodo-search-root input, .gh-search-input,
input[type="search"]{
  background:#123040 !important; color:#E9F0F4 !important;
  border:1px solid rgba(255,255,255,.18) !important; border-radius:12px !important;
}
input[type="search"]::placeholder{ color:#71889A !important; }
/* header layout: keep it tight and let the logo breathe */
.gh-head-inner{ gap:18px !important; }
.gh-head-logo img, .site-logo{ max-height:34px !important; width:auto !important; }
.gh-head-actions{ gap:14px !important; }
/* Sign in link */
.gh-head-members a, .gh-head-actions a{ color:#9EB3C0 !important; }
.gh-head-members a:hover{ color:#D4B85A !important; }


/* ---------- catch-all for the header search field ----------
   Ghost themes name this element differently. These rules cover any
   input, form or search-ish element sitting inside the site header. */
.gh-head input, .gh-head form, .gh-head [class*="search" i], .gh-head [id*="search" i],
.site-header input, .site-header form, .site-header [class*="search" i],
header input, header form, header [class*="search" i], header [id*="search" i],
.gh-head-actions input, .gh-head-actions form{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:24px !important;
  box-shadow:none !important;
  color:#9EB3C0 !important;
}
.gh-head [class*="search" i] svg, header [class*="search" i] svg{
  fill:#9EB3C0 !important; stroke:#9EB3C0 !important;
}
/* if the theme renders search as a bare icon button, keep it borderless */
.gh-head button[class*="search" i], header button[class*="search" i]{
  background:transparent !important; border:none !important;
}
/* Account / Subscribe button */
.gh-head-button, .gh-head-btn, .site-nav-button, .gh-head-actions a[class*="button" i]{
  background:#D4B85A !important; color:#14232B !important;
  border-color:#D4B85A !important; border-radius:24px !important;
}


/* ============================================================================
   SOURCE THEME (Ghost default). Source is variable-driven, so overriding its
   own custom properties fixes the header, search pill, footer and cards in one
   pass. Confirmed against .gh-navigation-actions using var(--background-color).
   ============================================================================ */
:root, html, body{
  --background-color:#0A2230 !important;
  --color-background:#0A2230 !important;
  --text-color:#E9F0F4 !important;
  --color-text:#E9F0F4 !important;
  --color-secondary-text:#9EB3C0 !important;
  --color-border:rgba(255,255,255,.12) !important;
  --border-color:rgba(255,255,255,.12) !important;
  --color-lighter-gray:rgba(255,255,255,.08) !important;
  --color-light-gray:rgba(255,255,255,.14) !important;
  --ghost-accent-color:#D4B85A !important;
}
/* the header bar and its three regions */
#gh-navigation, .gh-navigation, .gh-navigation-inner,
.gh-navigation-brand, .gh-navigation-menu, .gh-navigation-actions{
  background:transparent !important;
  background-color:transparent !important;
}
#gh-navigation{ border-bottom:1px solid rgba(255,255,255,.10) !important; }
.gh-navigation-menu a, .gh-navigation-actions a, .gh-navigation-brand a{
  color:#9EB3C0 !important;
}
.gh-navigation-menu a:hover, .gh-navigation-actions a:hover{ color:#D4B85A !important; }
/* Source's search trigger sits in the actions area */
.gh-search, .gh-navigation-actions .gh-search{
  background:transparent !important; border:none !important; box-shadow:none !important;
}
.gh-search svg{ fill:none !important; stroke:#9EB3C0 !important; }
.gh-search:hover svg{ stroke:#D4B85A !important; }
/* Account / Subscribe pill */
.gh-navigation-actions .gh-button, .gh-button{
  background:#D4B85A !important; color:#14232B !important; border-color:#D4B85A !important;
}
/* body regions */
.gh-viewport, .gh-container, .gh-outer, .gh-inner, .gh-footer, .gh-article{
  background:transparent !important;
}
.gh-footer{ border-top:1px solid rgba(255,255,255,.10) !important; }

/* kill the light hero some themes put above the first post */
.gh-cover, .site-header-cover, .outer.site-header-background{
  background:#0A2230 !important;
}

/* ---------- end-of-read jump to the strategy breakdown ----------
   Appended to the reader by the theme script. Without it, finishing a case
   leaves you at a dead end. */
.btl-next{margin:44px 0 10px;padding-top:26px;border-top:1px solid var(--line);text-align:center;}
.btl-next .l{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);}
.btl-next button{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin-top:14px;background:#D4B85A;color:#14232B;font-family:var(--head);font-weight:700;
  font-size:15px;padding:15px 28px;border-radius:30px;border:none;cursor:pointer;transition:.15s;}
.btl-next button:hover{background:#E2CB79;transform:translateY(-1px);}
.btl-next button svg{width:14px;height:14px;fill:none;stroke:#14232B;stroke-width:2.4;flex:none;}
/* the second step is the ledger, offered quieter than the strategy breakdown so
   the primary action still reads as primary */
.btl-next .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.btl-next button.sec{background:transparent;color:var(--gold);
  border:1px solid rgba(212,184,90,.42);}
.btl-next button.sec:hover{background:var(--goldsoft);border-color:var(--gold);}
.btl-next button.sec svg{stroke:var(--gold);}
@media(max-width:600px){ .btl-next button{width:100%;} }

/* the headphones button the theme adds to the reader top bar */
.btl-btools [data-audiotoggle] svg{fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.btl-btools [data-audiotoggle][data-on="true"]{color:var(--gold);}