/* ══════════════════════════════════════════════════════════════════════
   RXGRAB VISUAL DIGESTIBILITY LAYER (.article-wrap)
   Teal #0f766e + sky #0ea5e9 port of the light system (matches the
   Prescription Savings Finder tool). Same component class vocabulary
   network-wide; per-article bespoke graphics add CONTENT, this provides
   STYLE + motion + grids. Chassis port — canonized 2026-07-01.
   var(--x, fallback) syntax so it is robust to overhaul-v3 token gaps.
   ══════════════════════════════════════════════════════════════════════ */
.article-wrap{--rx-a:#0f766e;--rx-b:#0ea5e9}

/* hero illustration */
.article-wrap .lc-illus{max-width:560px;margin:1.7rem auto .7rem;display:block}
.article-wrap .lc-illus svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 26px rgba(15,118,110,.18))}

/* accent-bar headings */
.article-wrap h2{position:relative;padding-left:1.05rem}
.article-wrap h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;border-radius:3px;background:linear-gradient(180deg,var(--rx-a),var(--rx-b))}

/* lede */
.article-wrap .article-intro,.article-wrap p.lede{font-size:1.14rem;line-height:1.75;color:var(--text,#44403c)}

/* pull-quote */
.article-wrap .pq{margin:2.2rem 0;padding:.3rem 0 .3rem 1.5rem;border-left:4px solid var(--rx-a);font-family:var(--display,Georgia),serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.6rem);line-height:1.38;color:var(--dark,#1c1917);letter-spacing:-.01em}
.article-wrap .pq .hl{background:linear-gradient(90deg,var(--rx-a),var(--rx-b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.article-wrap .pq .src{display:block;margin-top:.55rem;font-family:var(--mono,monospace),monospace;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#a8a29e)}

/* concept split */
.article-wrap .lc-split{display:grid;grid-template-columns:1fr 1fr;margin:1.7rem 0;border:1px solid var(--border,#e7e5e4);border-radius:14px;overflow:hidden;background:#fff}
.article-wrap .lc-split figcaption{grid-column:1/-1;order:2;font-size:.79rem;color:var(--text-light,#78716c);line-height:1.55;padding:.85rem 1.2rem;background:var(--paper,#faf6ef);border-top:1px solid var(--border,#e7e5e4)}
.article-wrap .lc-split .pane{padding:1.3rem 1.35rem}
.article-wrap .lc-split .a{background:linear-gradient(160deg,#f0fdfa,#fff)}
.article-wrap .lc-split .b{background:linear-gradient(160deg,#f0f9ff,#fff);border-left:1px solid var(--border,#e7e5e4)}
.article-wrap .lc-split .ph{font-family:var(--mono,monospace),monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .2rem;font-weight:700}
.article-wrap .lc-split .a .ph{color:#0d6960}
.article-wrap .lc-split .b .ph{color:#0369a1}
.article-wrap .lc-split .sub{font-size:.76rem;color:var(--text-light,#78716c);margin:0 0 .85rem}
.article-wrap .lc-split .chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.85rem}
.article-wrap .lc-split .chip{font-family:var(--mono,monospace),monospace;font-size:10px;color:var(--text,#44403c);background:#fff;border:1px solid var(--border,#e7e5e4);border-radius:5px;padding:.22rem .52rem}
.article-wrap .lc-split .big{font-family:var(--display,Georgia),serif;font-weight:800;font-size:1.16rem;margin:.1rem 0 .55rem;letter-spacing:-.02em}
.article-wrap .lc-split .a .big{color:#0d6960}
.article-wrap .lc-split .b .big{color:#0369a1}
.article-wrap .lc-split .tags{margin:0;font-size:.84rem;color:var(--text,#44403c);line-height:1.85}
.article-wrap .lc-split .tags .t{display:flex;align-items:flex-start;gap:.45rem}
.article-wrap .lc-split .tags .t::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;margin-top:.5em}
.article-wrap .lc-split .a .tags .t::before{background:var(--rx-a)}
.article-wrap .lc-split .b .tags .t::before{background:var(--rx-b)}

/* key callout */
.article-wrap .key{display:flex;gap:.9rem;align-items:flex-start;margin:1.8rem 0;padding:1.05rem 1.2rem;background:linear-gradient(135deg,#f0fdfa,#f0f9ff);border:1px solid #99f6e4;border-radius:13px}
.article-wrap .key .ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--rx-a),var(--rx-b));font-family:var(--display,Georgia),serif;font-weight:800;color:#fff;font-size:1rem}
.article-wrap .key .kt{margin:0;color:var(--text,#44403c);font-size:.94rem;line-height:1.62}
.article-wrap .key .kt b{color:var(--dark,#1c1917)}

/* screenshot frame */
.article-wrap .shot{margin:1.8rem 0;border:1px solid var(--border,#e7e5e4);border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 8px 28px rgba(24,24,27,.08)}
.article-wrap .shot .bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;background:var(--paper,#faf6ef);border-bottom:1px solid var(--border,#e7e5e4)}
.article-wrap .shot .bar i{width:9px;height:9px;border-radius:50%;background:#d4d4d8;display:inline-block}
.article-wrap .shot .bar .u{margin-left:.6rem;font-family:var(--mono,monospace),monospace;font-size:11px;color:var(--muted,#a8a29e)}
.article-wrap .shot img{display:block;width:100%;height:auto}
.article-wrap .shot figcaption{font-size:.8rem;color:var(--text-light,#78716c);line-height:1.5;padding:.7rem .95rem;border-top:1px solid var(--border,#e7e5e4)}

/* data dashboard */
.article-wrap .crm-dash{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.9rem 0 .6rem}
.article-wrap .crm-dash .dcard{background:#fff;border:1px solid var(--border,#e7e5e4);border-radius:14px;padding:1.05rem 1.1rem 1.15rem;box-shadow:0 8px 24px rgba(24,24,27,.06);display:flex;flex-direction:column}
.article-wrap .crm-dash .dh{font-family:var(--mono,monospace),monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#a8a29e);margin:0 0 .7rem}
.article-wrap .crm-dash .dsub{font-size:.73rem;color:var(--text-light,#78716c);margin:.7rem 0 0;line-height:1.4}
.article-wrap .gauge{position:relative;width:104px;height:104px;margin:.1rem auto .1rem}
.article-wrap .gauge svg{transform:rotate(-90deg)}
.article-wrap .gauge .ring{fill:none;stroke:#ccfbf1;stroke-width:10}
.article-wrap .gauge .prog{fill:none;stroke:url(#gaugeg);stroke-width:10;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;animation:gFill 1.9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes gFill{to{stroke-dashoffset:var(--goff,23)}}
.article-wrap .gauge .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.article-wrap .gauge .num b{font-family:var(--display,Georgia),serif;font-size:1.75rem;font-weight:800;color:#0d6960;line-height:1}
.article-wrap .gauge .num em{font-family:var(--mono,monospace),monospace;font-size:7.5px;letter-spacing:.12em;color:var(--muted,#a8a29e);text-transform:uppercase;font-style:normal;margin-top:.15rem}
.article-wrap .pbars{display:flex;flex-direction:column;gap:.5rem;padding:.55rem 0;flex:1;justify-content:center}
.article-wrap .pbar{height:13px;border-radius:7px;background:linear-gradient(90deg,var(--rx-a),var(--rx-b));transform-origin:left;transform:scaleX(0);animation:pGrow 1.3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pGrow{to{transform:scaleX(1)}}
.article-wrap .echips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 0;flex:1;align-content:center}
.article-wrap .echip{font-family:var(--mono,monospace),monospace;font-size:10px;color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;padding:.26rem .55rem;display:flex;align-items:center;gap:.32rem;opacity:0;animation:eIn .5s ease forwards}
.article-wrap .echip::before{content:"";width:5px;height:5px;border-radius:50%;background:#22c55e;flex:none}
@keyframes eIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* verdict grid */
.article-wrap .verdict-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.9rem 0}
.article-wrap .vcard{background:#fff;border:1px solid var(--border,#e7e5e4);border-radius:13px;padding:1.1rem 1.15rem;border-top:3px solid var(--rx-a);transition:transform .2s,box-shadow .2s}
.article-wrap .vcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px -14px rgba(15,118,110,.4)}
.article-wrap .vcard.top{background:linear-gradient(160deg,#f0fdfa,#fff)}
.article-wrap .vcard .vt{font-family:var(--mono,monospace),monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#a8a29e);margin-bottom:.4rem}
.article-wrap .vcard .vn{font-family:var(--display,Georgia),serif;font-weight:800;font-size:1.18rem;color:#0d6960;letter-spacing:-.02em;margin-bottom:.35rem}
.article-wrap .vcard .vd{font-size:.85rem;color:var(--text,#44403c);line-height:1.5}

/* scroll reveal */
.article-wrap .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.article-wrap .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.article-wrap .reveal{opacity:1;transform:none;transition:none}}

/* ── FLOATING CHAPTER-RAIL (scroll-spy TOC in the right whitespace) ── */
.rx-rail{position:fixed!important;top:50%!important;transform:translateY(-50%)!important;right:max(1.1rem,calc((100vw - 1180px)/2 - 172px))!important;left:auto!important;bottom:auto!important;width:172px!important;z-index:40;display:block!important;margin:0!important;font-family:var(--body,system-ui),sans-serif}
.rx-rail .rt{font-family:var(--mono,monospace),monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#a8a29e);margin:0 0 .7rem;padding-left:.85rem}
.rx-rail ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--border,#e7e5e4)}
.rx-rail li{margin:0}
.rx-rail a{display:block;padding:.28rem 0 .28rem .85rem;margin-left:-1px;border-left:2px solid transparent;font-size:.76rem;line-height:1.35;color:var(--text-light,#78716c);text-decoration:none;transition:color .16s,border-color .16s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rx-rail a:hover{color:var(--rx-a)}
.rx-rail a.on{color:var(--rx-a);border-left-color:var(--rx-a);font-weight:600}
@media(max-width:1300px){.rx-rail{display:none}}

@media(max-width:760px){.article-wrap .crm-dash,.article-wrap .verdict-grid{grid-template-columns:1fr}}
@media(max-width:680px){.article-wrap .lc-split{grid-template-columns:1fr}.article-wrap .lc-split .b{border-left:0;border-top:1px solid var(--border,#e7e5e4)}}

/* drug-page price bars + eyebrow spacing (added 2026-07-01d) */
.article-tags .article-tag:not(:last-child){margin-right:.5rem}
.article-wrap .rxdbar rect.b{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;animation:rxdbarGrow .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rxdbarGrow{to{transform:scaleY(1)}}
.article-wrap .rxdbar text{font-family:'JetBrains Mono',monospace}