/* "The Loan File Is the Interface" — next-gen module styles. Layers on article.css.
   Signature interactives use a dark "forensic workspace" treatment; analytical
   modules stay light. Palette stays within the PowerUW design system. */

/* ---------- shared dark workspace shell ---------- */
.fbox-dark { background: var(--puw-teal-900); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-2xl); box-shadow: 0 26px 70px rgba(3,54,61,0.18); padding: 26px; position: relative; overflow: hidden; }
.fbox-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(60% 50% at 84% 6%, rgba(254,106,87,0.16), transparent 70%),
  radial-gradient(50% 46% at 8% 96%, rgba(36,142,156,0.16), transparent 72%); }
.fbox-dark > * { position: relative; }
.ws-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.ws-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #fff; }
.ws-sub { font-family: var(--font-meta); font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 3px; }

/* segmented control on dark */
.seg-dark { display: inline-flex; padding: 4px; background: rgba(255,255,255,0.07); border-radius: var(--radius-full); }
.seg-dark button { border: none; background: none; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: rgba(255,255,255,0.62); padding: 8px 15px; border-radius: var(--radius-full); transition: all .25s; }
.seg-dark button.on { background: var(--puw-coral-500); color: #fff; box-shadow: 0 6px 16px rgba(254,106,87,0.32); }
.seg-dark button:not(.on):hover { color: #fff; }

/* dark pill toggle button */
.ws-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-action); font-weight: 600; font-size: 13px; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-full); padding: 9px 16px; cursor: pointer; transition: all .22s; }
.ws-btn svg { width: 15px; height: 15px; }
.ws-btn:hover { border-color: var(--puw-coral-500); color: #fff; }
.ws-btn.on { background: var(--puw-coral-600); border-color: var(--puw-coral-600); color: #fff; box-shadow: 0 8px 20px rgba(255,54,33,0.28); }

/* ---------------- evidence graph (hero interactive) ---------------- */
.eg { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 22px; align-items: stretch; }
.eg-stage { position: relative; min-height: 360px; }
.eg-svg { width: 100%; height: auto; display: block; overflow: visible; }
.eg-edge { stroke: rgba(120,190,200,0.28); stroke-width: 1.5; fill: none; transition: stroke .3s, stroke-width .3s, opacity .3s; }
.eg-edge.conflict { stroke: var(--puw-coral-500); }
.eg.dimmed .eg-edge { opacity: .12; }
.eg-edge.hot { stroke: var(--puw-coral-500); stroke-width: 2.4; opacity: 1 !important; }
.eg-edge.hot.teal { stroke: var(--puw-teal-mid); }
@media (prefers-reduced-motion: no-preference) {
  .eg.contradicting .eg-edge.conflict { stroke-width: 2.4; animation: egPulse 1.6s ease-in-out infinite; }
}
@keyframes egPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

.eg-node { cursor: pointer; }
.eg-node rect { fill: #1C2C33; stroke: rgba(255,255,255,0.14); stroke-width: 1; transition: stroke .3s, fill .3s; }
.eg-node text { fill: rgba(255,255,255,0.88); font-family: var(--font-body); font-weight: 600; font-size: 12px; pointer-events: none; }
.eg-node .eg-dot { transition: fill .3s; }
.eg.dimmed .eg-node:not(.hot) { opacity: .32; }
.eg-node.hot rect { stroke: var(--puw-coral-500); fill: #243a42; }
.eg-node.center rect { fill: var(--puw-coral-600); stroke: var(--puw-coral-500); }
.eg-node.center text { fill: #fff; font-family: var(--font-display); font-weight: 600; }
.eg-node:focus { outline: none; }
.eg-node:focus rect { stroke: var(--puw-teal-mid); stroke-width: 2; }

/* info panel */
.eg-info { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; min-height: 100%; }
.eg-info .ei-kicker { font-family: var(--font-meta); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--puw-coral-500); }
.eg-info h4 { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: #fff; margin: 8px 0 0; }
.eg-info .ei-row { margin-top: 16px; }
.eg-info .ei-lbl { font-family: var(--font-meta); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.eg-info .ei-lbl .d { width: 7px; height: 7px; border-radius: 2px; }
.eg-info p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0; }
.eg-info .ei-agrees { display: flex; flex-direction: column; gap: 7px; }
.eg-info .ei-chip { font-size: 13px; color: rgba(255,255,255,0.82); padding: 8px 11px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm); display: flex; align-items: center; gap: 9px; }
.eg-info .ei-chip svg { width: 14px; height: 14px; color: var(--puw-teal-mid); flex: 0 0 auto; }
.eg-info .ei-hint { margin-top: auto; padding-top: 16px; font-family: var(--font-meta); font-size: 12px; color: rgba(255,255,255,0.4); }
.eg-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--font-meta); font-size: 12.5px; color: var(--puw-coral-500); opacity: 0; transition: opacity .3s; }
.eg.contradicting .eg-status { opacity: 1; }
.eg-status .d { width: 8px; height: 8px; border-radius: 50%; background: var(--puw-coral-500); }

@media (max-width: 860px) {
  .eg { grid-template-columns: 1fr; }
  .eg-info { min-height: 0; }
}

/* ---------------- contradiction detector (3-pane) ---------------- */
.cd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cd-chip { font-family: var(--font-body); font-weight: 600; font-size: 13px; cursor: pointer; border: 1px solid var(--puw-border-light); background: #fff; color: var(--puw-teal-700); border-radius: var(--radius-full); padding: 9px 15px; transition: all .22s; }
.cd-chip:hover { border-color: var(--puw-coral-500); color: var(--puw-coral-600); }
.cd-chip.on { background: var(--puw-teal-900); color: #fff; border-color: var(--puw-teal-900); }
.cd-grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 14px; }
.cd-col { display: flex; flex-direction: column; }
.cd-col-h { font-family: var(--font-meta); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--puw-slate-400); margin-bottom: 11px; display: flex; align-items: center; gap: 8px; }
.cd-col-h .n { width: 18px; height: 18px; border-radius: 5px; background: var(--puw-surface-3); color: var(--puw-teal-700); display: grid; place-items: center; font-size: 10px; }
.cd-snip { background: var(--puw-surface-1); border: 1px solid var(--puw-border-light); border-radius: var(--radius-md); padding: 12px 13px; margin-bottom: 10px; font-family: var(--font-mono, monospace); font-size: 12px; }
.cd-snip .src { font-family: var(--font-meta); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--puw-slate-400); margin-bottom: 7px; }
.cd-snip .ln { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--puw-teal-900); }
.cd-snip .ln .k { color: var(--puw-slate-400); font-family: var(--font-meta); font-size: 11px; }
.cd-snip mark { background: transparent; color: inherit; padding: 1px 4px; border-radius: 4px; }
.cd-snip mark.flag { background: var(--puw-coral-50); color: var(--puw-coral-600); box-shadow: inset 0 0 0 1px rgba(254,106,87,0.4); }

.cd-claim { background: #fff; border: 1px solid var(--puw-border-light); border-left: 3px solid var(--puw-teal-mid); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 9px; opacity: 1; transition: transform .4s; }
@media (prefers-reduced-motion: no-preference) { .js .cd .cd-claim { transform: translateX(-10px); } .js .cd.run .cd-claim { transform: none; } }
.cd.run .cd-claim:nth-child(2) { transition-delay: .08s; }
.cd.run .cd-claim:nth-child(3) { transition-delay: .16s; }
.cd.run .cd-claim:nth-child(4) { transition-delay: .24s; }
.cd-claim.bad { border-left-color: var(--puw-coral-500); }
.cd-claim .cl-t { font-size: 13px; font-weight: 600; color: var(--puw-teal-900); }
.cd-claim .cl-s { font-family: var(--font-meta); font-size: 11px; color: var(--puw-slate-400); margin-top: 3px; }

.cd-conflict { background: var(--puw-coral-50); border: 1px solid var(--puw-danger-border, rgba(254,106,87,0.4)); border-radius: var(--radius-lg); padding: 16px; opacity: 1; transition: transform .5s .15s; }
@media (prefers-reduced-motion: no-preference) { .js .cd .cd-conflict { transform: translateY(10px); } .js .cd.run .cd-conflict { transform: none; } }
.cd-conflict .cc-top { display: flex; align-items: center; gap: 9px; }
.cd-conflict .cc-ic { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--puw-coral-600); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.cd-conflict .cc-ic svg { width: 16px; height: 16px; }
.cd-conflict h5 { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--puw-coral-600); margin: 0; }
.cd-conflict p { font-size: 13px; line-height: 1.55; color: var(--puw-teal-900); margin: 10px 0 0; }
.cd-policy { margin-top: 12px; }
.cd-policy button { font-family: var(--font-meta); font-size: 12px; font-weight: 600; color: var(--puw-teal-mid); background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.cd-policy button svg { width: 13px; height: 13px; transition: transform .25s; }
.cd-policy.open button svg { transform: rotate(90deg); }
.cd-policy .pol-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.cd-policy.open .pol-body { max-height: 200px; }
.cd-policy .pol-body p { font-size: 12.5px; color: var(--puw-teal-600); margin-top: 9px; padding: 11px 13px; background: #fff; border: 1px solid var(--puw-border-light); border-radius: var(--radius-sm); }
.cd-empty { font-family: var(--font-meta); font-size: 13px; color: var(--puw-slate-400); padding: 22px; text-align: center; border: 1px dashed var(--puw-border-light); border-radius: var(--radius-lg); }
.cd.run .cd-empty { display: none; }

@media (max-width: 760px) { .cd-grid { grid-template-columns: 1fr; } }

/* ---------------- old vs new interface split ---------------- */
.iface-roles { display: flex; justify-content: center; margin-bottom: 22px; }
.iface { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.iface-pane { border-radius: var(--radius-xl); padding: 20px; min-height: 280px; }
.iface-legacy { background: var(--puw-surface-2); border: 1px solid var(--puw-border-light); }
.iface-new { background: var(--puw-teal-900); border: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; }
.iface-new::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 90% 0%, rgba(254,106,87,0.14), transparent 70%); pointer-events: none; }
.iface-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-meta); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--radius-full); }
.iface-legacy .iface-tag { background: #fff; color: var(--puw-slate-400); border: 1px solid var(--puw-border-light); }
.iface-new .iface-tag { background: rgba(254,106,87,0.16); color: var(--puw-coral-500); position: relative; }
.iface-legacy h5, .iface-new h5 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 14px 0 0; }
.iface-legacy h5 { color: var(--puw-teal-900); }
.iface-new h5 { color: #fff; position: relative; }
.iface-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.iface-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--puw-teal-700); }
.iface-steps li .fr { font-family: var(--font-meta); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--puw-coral-600); background: var(--puw-coral-50); border: 1px solid rgba(254,106,87,0.3); border-radius: var(--radius-full); padding: 3px 8px; white-space: nowrap; }
.iface-steps li .ic { width: 20px; height: 20px; flex: 0 0 auto; color: var(--puw-slate-400); }
.iface-steps li .ic svg { width: 16px; height: 16px; }
.iface-friction { margin-top: 14px; font-family: var(--font-meta); font-size: 12px; color: var(--puw-coral-600); }

.iface-query { position: relative; margin: 14px 0 0; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.iface-query svg { width: 16px; height: 16px; color: var(--puw-coral-500); flex: 0 0 auto; }
.iface-query span { font-size: 13.5px; color: rgba(255,255,255,0.92); font-family: var(--font-body); }
.iface-answer { position: relative; margin: 12px 0 0; }
.iface-answer .ans-t { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.92); }
.iface-answer .ans-t strong { color: #fff; }
.iface-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.iface-cites .ev { font-family: var(--font-meta); font-size: 11px; color: rgba(255,255,255,0.7); background: rgba(36,142,156,0.18); border: 1px solid rgba(36,142,156,0.4); border-radius: var(--radius-full); padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }
.iface-cites .ev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--puw-teal-mid); }

@media (max-width: 720px) { .iface { grid-template-columns: 1fr; } }

/* ---------------- nonlinear complexity chart ---------------- */
.nlc { display: flex; flex-direction: column; gap: 6px; }
.nlc-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; height: 260px; padding-top: 10px; }
.nlc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; }
.nlc-bar { width: 100%; max-width: 56px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: linear-gradient(180deg, var(--puw-teal-mid), #1c6e79); height: 0; transition: height 1s cubic-bezier(.2,.8,.2,1); position: relative; }
.nlc-col:nth-child(5) .nlc-bar, .nlc-col:nth-child(6) .nlc-bar { background: linear-gradient(180deg, var(--puw-coral-500), var(--puw-coral-600)); }
.nlc-bar .v { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--puw-teal-900); }
.nlc-col .lab { font-family: var(--font-meta); font-size: 11px; line-height: 1.3; color: var(--puw-slate-400); text-align: center; }
.nlc-note { margin-top: 14px; display: flex; align-items: center; gap: 9px; font-family: var(--font-meta); font-size: 12.5px; color: var(--puw-coral-600); }
.nlc-note svg { width: 16px; height: 16px; flex: 0 0 auto; }
@media (max-width: 620px) {
  .nlc-bars { height: 200px; gap: 7px; }
  .nlc-col .lab { font-size: 9.5px; }
}

/* time-to-decision strip */
.ttd { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--puw-border-light); }
.ttd-cell .k { font-family: var(--font-meta); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--puw-slate-400); }
.ttd-cell .v { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px,5vw,42px); letter-spacing: -0.03em; line-height: 1; margin-top: 6px; }
.ttd-cell.legacy .v { color: var(--puw-slate-400); }
.ttd-cell.modern .v { color: var(--puw-coral-600); }
.ttd-cell .u { font-size: 14px; font-family: var(--font-meta); color: var(--puw-slate-400); margin-left: 4px; }
.ttd-arrow { color: var(--puw-teal-mid); }
.ttd-arrow svg { width: 30px; height: 30px; display: block; }

/* ---------------- queryable sandbox ---------------- */
.sbx { display: grid; grid-template-columns: 240px 1fr; gap: 20px; }
.sbx-side { display: flex; flex-direction: column; gap: 14px; }
.sbx-file { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 16px; }
.sbx-file .ttl { font-family: var(--font-meta); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.sbx-file .nm { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #fff; margin-top: 5px; }
.sbx-file .meta { font-family: var(--font-meta); font-size: 11.5px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.sbx-docs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.sbx-docs .d { font-family: var(--font-meta); font-size: 10px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-full); padding: 3px 8px; }
.sbx-qs { display: flex; flex-direction: column; gap: 8px; }
.sbx-q { text-align: left; font-family: var(--font-body); font-weight: 500; font-size: 13px; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); padding: 11px 13px; cursor: pointer; transition: all .2s; }
.sbx-q:hover { border-color: var(--puw-coral-500); color: #fff; }
.sbx-q.on { background: var(--puw-coral-600); border-color: var(--puw-coral-600); color: #fff; }

.sbx-panel { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 22px; min-height: 280px; display: flex; flex-direction: column; }
.sbx-thinking { font-family: var(--font-meta); font-size: 12.5px; color: var(--puw-teal-mid); display: flex; align-items: center; gap: 9px; }
.sbx-thinking .dots span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--puw-teal-mid); margin-left: 3px; animation: sbxDot 1.2s infinite; }
.sbx-thinking .dots span:nth-child(2) { animation-delay: .2s; }
.sbx-thinking .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes sbxDot { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }
.sbx-ans .verdict { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-meta); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-full); }
.sbx-ans .verdict.ok { background: rgba(31,138,91,0.18); color: #5fd6a0; }
.sbx-ans .verdict.warn { background: rgba(254,106,87,0.16); color: var(--puw-coral-500); }
.sbx-ans .verdict.review { background: rgba(36,142,156,0.18); color: #5fc7d6; }
.sbx-ans .concl { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.3; color: #fff; margin: 14px 0 0; }
.sbx-ans .ev-h { font-family: var(--font-meta); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 18px 0 9px; }
.sbx-ev { display: flex; flex-direction: column; gap: 8px; }
.sbx-ev li { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.85); }
.sbx-ev li .src { font-family: var(--font-meta); font-size: 10px; font-weight: 600; color: var(--puw-teal-mid); background: rgba(36,142,156,0.16); border-radius: 5px; padding: 3px 7px; white-space: nowrap; height: fit-content; }
.sbx-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 18px; }
.sbx-conf { font-family: var(--font-meta); font-size: 12px; color: rgba(255,255,255,0.6); }
.sbx-conf b { color: #fff; }
.sbx-drawer-btn { font-family: var(--font-meta); font-size: 12px; font-weight: 600; color: var(--puw-coral-500); background: none; border: 1px solid rgba(254,106,87,0.4); border-radius: var(--radius-full); padding: 7px 13px; cursor: pointer; transition: all .2s; }
.sbx-drawer-btn:hover { background: rgba(254,106,87,0.12); }
.sbx-placeholder { margin: auto; text-align: center; color: rgba(255,255,255,0.45); font-family: var(--font-meta); font-size: 13px; }
.sbx-placeholder svg { width: 30px; height: 30px; margin: 0 auto 12px; display: block; color: rgba(255,255,255,0.3); }
.sbx-guard { margin-top: 14px; font-family: var(--font-meta); font-size: 11px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 7px; }
.sbx-guard svg { width: 13px; height: 13px; }

@media (max-width: 760px) { .sbx { grid-template-columns: 1fr; } }

/* ---------------- ROI calculator ---------------- */
.roi2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.roi2-inputs { display: flex; flex-direction: column; gap: 18px; }
.roi-field .rf-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.roi-field label { font-size: 13.5px; font-weight: 600; color: var(--puw-teal-900); }
.roi-field .rf-val { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--puw-coral-600); }
.roi-field input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 5px; background: var(--puw-surface-3); outline: none; }
.roi-field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--puw-coral-600); cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(255,54,33,0.35); transition: transform .15s; }
.roi-field input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.roi-field input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--puw-coral-600); cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(255,54,33,0.35); }

.roi2-out { background: var(--puw-teal-900); border-radius: var(--radius-xl); padding: 26px; position: relative; overflow: hidden; }
.roi2-out::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 100% 0%, rgba(254,106,87,0.18), transparent 70%); pointer-events: none; }
.roi2-out > * { position: relative; }
.roi-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.roi-hero .rh { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 16px; }
.roi-hero .rh .k { font-family: var(--font-meta); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.roi-hero .rh .v { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px,3.6vw,34px); letter-spacing: -0.02em; color: #fff; margin-top: 6px; line-height: 1; }
.roi-hero .rh .v .u { font-size: 13px; font-family: var(--font-meta); color: rgba(255,255,255,0.55); margin-left: 3px; }
.roi-hero .rh.accent .v { color: var(--puw-coral-500); }
.roi-rows { margin-top: 16px; display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,0.08); border-radius: var(--radius-md); overflow: hidden; }
.roi-rows .rr { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,0.03); }
.roi-rows .rr .k { font-size: 13px; color: rgba(255,255,255,0.7); }
.roi-rows .rr .v { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #fff; }
.roi-disc { margin-top: 14px; font-family: var(--font-meta); font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.45); }

@media (max-width: 760px) { .roi2 { grid-template-columns: 1fr; gap: 22px; } }

/* ---------------- inline citations + sources (shared with post family) ---------------- */
sup.ref { font-size: 0.62em; line-height: 0; font-family: var(--font-meta); font-weight: 600; margin-left: 1px; white-space: nowrap; vertical-align: super; }
sup.ref a { color: var(--puw-coral-600); padding: 0 1px; transition: color .2s; }
sup.ref a:hover { color: var(--puw-teal-900); text-decoration: underline; }
.stat-l sup.ref a { color: var(--puw-coral-500); }
.fbox-dark sup.ref a { color: var(--puw-coral-500); }

.article .src-note { font-size: 15px; color: var(--puw-slate-400); margin-top: 18px; line-height: 1.6; }
.article .src-note strong { color: var(--puw-teal-900); }
ol.sources { counter-reset: src; list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
ol.sources li { position: relative; counter-increment: src; padding: 16px 18px 16px 52px; background: #fff; border: 1px solid var(--puw-border-light); border-radius: var(--radius-lg); scroll-margin-top: 100px; transition: border-color .25s, box-shadow .25s; }
ol.sources li::before { content: counter(src); position: absolute; left: 14px; top: 16px; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--puw-coral-50); color: var(--puw-coral-600); font-family: var(--font-meta); font-weight: 600; font-size: 13px; display: grid; place-items: center; }
ol.sources li:target { border-color: var(--puw-coral-500); box-shadow: 0 10px 26px rgba(3,54,61,0.07); }
ol.sources li a { display: block; font-family: var(--font-body); font-weight: 600; font-size: 15.5px; color: var(--puw-teal-900); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
ol.sources li a:hover { color: var(--puw-coral-600); border-color: var(--puw-coral-100); }
ol.sources li span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--puw-teal-600); margin-top: 5px; }
@media (max-width: 560px) { ol.sources li { padding: 14px 15px 14px 46px; } ol.sources li::before { left: 12px; top: 14px; } }

/* hero badge variant for this post */
.ah-cat.gen { color: var(--puw-teal-mid); }
.ah-cat.gen .dot { background: var(--puw-teal-mid); }