/* ══════════════════════════════════════════════════════════════════════
   DESKDEPLOY VISUAL DIGESTIBILITY LAYER (.article-wrap)
   Teal #2563eb + sky #d97706 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:#2563eb;--rx-b:#d97706}

/* 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(37,99,235,.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,'Fraunces',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,#eff6ff,#fff)}
.article-wrap .lc-split .b{background:linear-gradient(160deg,#fffbeb,#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:#1d4ed8}
.article-wrap .lc-split .b .ph{color:#b45309}
.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,'Fraunces',Georgia),serif;font-weight:800;font-size:1.16rem;margin:.1rem 0 .55rem;letter-spacing:-.02em}
.article-wrap .lc-split .a .big{color:#1d4ed8}
.article-wrap .lc-split .b .big{color:#b45309}
.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,#eff6ff,#fffbeb);border:1px solid #bfdbfe;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,'Fraunces',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:#dbeafe;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,'Fraunces',Georgia),serif;font-size:1.75rem;font-weight:800;color:#1d4ed8;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(37,99,235,.4)}
.article-wrap .vcard.top{background:linear-gradient(160deg,#eff6ff,#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,'Fraunces',Georgia),serif;font-weight:800;font-size:1.18rem;color:#1d4ed8;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}

.article-wrap .ddbar rect.b{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;animation:ddGrow .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ddGrow{to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.article-wrap .ddbar rect.b{animation:none;transform:none}}
.article-tags .article-tag:not(:last-child){margin-right:.5rem}


/* === RESPONSIVE TABLES (network heal 2026-07-30) === */
/* Wide comparison tables were pushing article pages into horizontal scroll on mobile (measured at
   390px by lattice-core/scripts/render-audit.mjs). Give the table its own scroll container so the
   PAGE never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse
   and the table remains readable. Both rules are required; the first alone destroys the layout. */
table.data-table, table.pricing-table, table.capability-matrix, table.comparison-table,
.article-body table, main table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.data-table > thead, table.data-table > tbody,
table.pricing-table > thead, table.pricing-table > tbody,
table.capability-matrix > thead, table.capability-matrix > tbody,
table.comparison-table > thead, table.comparison-table > tbody,
.article-body table > thead, .article-body table > tbody,
main table > thead, main table > tbody {
  display: table;
  width: 100%;
  min-width: max-content;
}


/* === RESPONSIVE TABLES v2 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
}


/* === RESPONSIVE TABLES v3 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}


/* === RESPONSIVE TABLES v4 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}

/* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and
   an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page
   keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and
   `!important` is the only lever that reaches an inline declaration — used deliberately here and
   scoped to one control rather than sprayed across the sheet. */
form input[type="email"] {
  min-width: 0 !important;
}


/* === RESPONSIVE TABLES v5 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}

/* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and
   an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page
   keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and
   `!important` is the only lever that reaches an inline declaration — used deliberately here and
   scoped to one control rather than sprayed across the sheet. */
form input[type="email"] {
  min-width: 0 !important;
}

/* Long unbroken links. On LensPOV the widest element on four pages was an <a> at 547-678px against
   a 390px viewport: raw URLs used as citation link text, which have no spaces to wrap at, so the
   browser lets them run past the edge and the whole page scrolls sideways. The U3 citation campaign
   adds MORE external links, so this gets worse as the network gets better sourced unless it is
   fixed at the stylesheet. */
a, code, kbd, samp {
  overflow-wrap: anywhere;
  word-break: break-word;
}