/* compare.css — Dayatas Profab comparison pages (Phase 3, 25 Oct 2026; round 2 the same day):
   recycled-vs-virgin-resin.html (split hero, A/B rows, face-off table, dated rules, bench, route)
   and abs-vs-ps-vs-hips.html (ladder hero, start key, family diagram, impact meter, finish trio, conditions grid,
   property matrix with example datasheet values, demand-profile cards, key pinned on the right).
   Linked after tokens.css + inner.css; uses only their tokens. Ember keeps its four jobs: buttons, scene-code numbers,
   link underlines, the current chapter. Both tables restack below 760 px (one card per point / per property). */

/* ---------- shared: inline sources, source list, read-next row, dated lines, dashed chips ---------- */
.sref, .ip span.sref { display: inline; margin: 0; font-family: var(--f-m); font-size: 12px; line-height: inherit; letter-spacing: .04em; color: var(--mute); white-space: nowrap; }
.sref a, .prose .sref a { color: var(--text); border-bottom: 1px solid var(--ember); }
.sref a:hover { color: var(--ember-2); }
.cmp-src { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: src; }
.cmp-src li { counter-increment: src; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-2); font-size: 15.5px; line-height: 1.5; }
.cmp-src li::before { content: counter(src, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--f-m); font-size: 13px; letter-spacing: .08em; color: var(--mute); padding-top: 2px; }
.cmp-src a { color: var(--text); border-bottom: 1px solid var(--ember); justify-self: start; }
.cmp-src a:hover { color: var(--ember-2); }
.cmp-src span { margin-top: 3px; font-size: 14.5px; color: var(--body); }
.cmp-src li:target { background: var(--panel); }

.upd { margin: 20px 0 0; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; color: var(--mute); }
.upd span { display: inline-flex; align-items: center; gap: 10px; }
.upd span::before { content: ''; width: 18px; border-top: 1px solid var(--warm); }

.std { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.std > span, .gapst { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px dashed var(--rule); font-family: var(--f-m); font-size: 12px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: var(--text); }
.gapst { color: var(--warm); }
.std .sref { color: var(--mute); }

.nx-row { padding-top: var(--ip-pad); padding-bottom: clamp(56px, 6vw, 96px); }
.nx-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.nx { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 22px 54px; background: var(--panel); border: 1px solid var(--rule); transition: border-color .3s, background .3s; }
.nx:hover { border-color: var(--warm); background: var(--panel-2); }
.nx-k { font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.nx-t { font-size: clamp(20px, 1.6vw, 26px); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; color: var(--text); }
.nx-p { font-size: 15px; line-height: 1.55; color: var(--body); }
.nx > svg { position: absolute; left: 22px; bottom: 22px; width: 16px; height: 16px; fill: none; stroke: var(--warm); stroke-width: 1.6; transition: transform .4s var(--ease); }
.nx:hover > svg { transform: translateX(4px); }

/* crop marks that hold on a bright frame: a dark keyline under each mark */
.still.keyed .cm { border-color: rgba(236, 231, 222, .9); filter: drop-shadow(0 0 1px rgba(0, 0, 0, .95)) drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }

/* ---------- the comparison tables (both pages): boxed; on phones each row becomes a card ---------- */
.cmp-box { position: relative; overflow-x: auto; border: 1px solid var(--rule); background: var(--panel); -webkit-overflow-scrolling: touch; }
.cmp-box:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.cmp-t { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.cmp-t caption { caption-side: bottom; text-align: left; padding: 14px 20px; border-top: 1px solid var(--rule); font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; color: var(--mute); }
.cmp-t th, .cmp-t td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.cmp-t td { color: var(--body); }
.cmp-t tbody tr:last-child > * { border-bottom: 0; }
.cmp-t tbody tr:hover > * { background: rgba(236, 231, 222, .03); }

/* face-off (recycled vs virgin): A | the point | B, the point in the middle on its own ground */
.faceoff { min-width: 680px; }
.faceoff thead th { padding: 20px; background: var(--panel-2); border-bottom: 2px solid var(--warm); font-size: clamp(20px, 1.7vw, 28px); font-weight: 300; line-height: 1.2; letter-spacing: -.02em; color: var(--text); white-space: nowrap; vertical-align: baseline; }
.faceoff thead th b { display: inline-block; margin-right: 12px; font-family: var(--f-m); font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--text); }
.faceoff thead th.fo-k { font-family: var(--f-m); font-size: var(--fs-lab); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.faceoff tbody th { width: 17%; background: var(--panel-2); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); font-family: var(--f-m); font-size: var(--fs-lab); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.faceoff td { width: 41.5%; }
.faceoff td.fo-b { color: var(--text); }

/* matrix (ABS vs PS vs HIPS): the header row is the document's paper, the codes heavy in ink, all on one top line */
.matrix { min-width: 760px; }
.matrix thead th { padding: 18px 20px 16px; background: var(--paper); color: var(--ink); border-bottom: 0; vertical-align: top; }
.matrix thead th + th { border-left: 1px solid rgba(21, 19, 15, .22); }
.matrix thead th.mx-p { font-family: var(--f-m); font-size: var(--fs-lab); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding-top: 22px; }
.mx-code { display: block; font-size: clamp(28px, 2.6vw, 44px); font-weight: 800; line-height: .9; letter-spacing: -.04em; font-variation-settings: 'wdth' 125; }
.mx-name { display: block; margin-top: 8px; font-family: var(--f-m); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #3d3a33; }
.matrix tbody th { width: 21%; font-family: var(--f-m); font-size: var(--fs-lab); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.matrix tbody th .sref { letter-spacing: .04em; }
.matrix td { width: 26.3%; }
.matrix td + td, .matrix tbody th + td { border-left: 1px solid var(--line-2); }
.matrix .mx-dp td { color: var(--text); }
.matrix .mx-ex { border-top: 1px solid var(--rule); }
.matrix .mx-grp th { padding: 14px 20px; background: var(--panel-2); border-top: 2px solid var(--warm); font-family: var(--f-m); font-size: var(--fs-lab); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; color: var(--text); }
.matrix .mx-grp th > span { display: block; margin-top: 4px; color: var(--mute); }
.matrix .mx-num td { font-variant-numeric: tabular-nums; color: var(--text); }
.lvl { display: inline-flex; gap: 3px; margin-right: 10px; vertical-align: 1px; }
.lvl i { width: 13px; height: 7px; border: 1px solid var(--warm); }
.lvl i.f { background: var(--warm); }

/* ================================================================ recycled vs virgin */
.vs-hero { padding-top: clamp(28px, 4vw, 64px); }
.ip-h1.vs-h1 { max-width: 17ch; font-size: clamp(44px, 5.6vw, 100px); }
.vs-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(32px, 4vw, 60px); }
.vs-side { margin: 0; }
.vs-side .frame-in { aspect-ratio: 16 / 10; border: 1px solid var(--line-2); }
.vs-side figcaption { display: grid; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.vs-tag { font-size: clamp(20px, 1.7vw, 28px); font-weight: 300; letter-spacing: -.02em; color: var(--text); }
.vs-tag b { display: inline-block; margin-right: 12px; font-family: var(--f-m); font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--text); vertical-align: 3px; }
.vs-what { font-size: 16px; line-height: 1.5; color: var(--body); }
.vs-src { font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.vs-seam { position: relative; display: flex; align-items: center; justify-content: center; width: clamp(44px, 4vw, 72px); }
.vs-seam::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--rule); }
.vs-seam span { position: relative; padding: 10px 0; background: var(--bg); font-family: var(--f-s); font-style: italic; font-size: clamp(34px, 3.2vw, 56px); line-height: 1; color: var(--warm); }
.vs-lede { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 120px); align-items: start; margin-top: clamp(48px, 5vw, 80px); }
.vs-lede .ip-answer.big { font-size: clamp(19px, 1.4vw, 21px); line-height: 1.6; }
.vs-lede .chap-rail { position: static; justify-self: end; width: min(100%, 300px); padding-top: 6px; }

.rv-chaps { padding-bottom: 8px; }
.rv-chap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); margin-top: clamp(64px, 7vw, 120px); padding-top: 28px; border-top: 1px solid var(--rule); }
.rv-chap > .chap-h { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--nav-h) + 28px); align-self: start; margin: 0; padding: 0; border-top: 0; }
.rv-chap > .chap-h h2 { font-size: clamp(30px, 3vw, 52px); }
.rv-b { grid-column: 2; grid-row: 1; min-width: 0; }
.rv-chap .rv-b > * + * { margin-top: 36px; }
.rv-wide { grid-column: 1 / -1; grid-row: 2; min-width: 0; margin-top: 44px; }
.rv-b .still { max-width: var(--measure); }

.verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.verdict > div { padding: 22px 22px 24px; background: var(--panel); border: 1px solid var(--rule); }
.verdict ul { list-style: none; margin: 14px 0 0; padding: 0; }
.verdict li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--line-2); font-size: 15.5px; line-height: 1.5; color: var(--body); }
.verdict li::before { content: ''; position: absolute; left: 0; top: 19px; width: 10px; border-top: 1px solid var(--warm); }

/* SC.04 A/B ruled rows (ledger style) */
.abrows { border-top: 1px solid var(--rule); }
.ab-r { display: grid; grid-template-columns: 140px minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.ab-h { padding: 10px 0; }
.ab-h p, .ab-k { margin: 0; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; }
.ab-h p { color: var(--mute); }
.ab-h b { margin-right: 8px; font-weight: 500; color: var(--text); }
.ab-k { color: var(--text); padding-top: 3px; }
.ab-c { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.ab-r:not(.ab-h) .ab-c b { display: none; }
.ab-b { color: var(--text); }

.rules-k .upd { margin: 0; }
.rcards { display: grid; gap: 12px; }
.rcard { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 20px; padding: 18px 20px; border: 1px solid var(--rule); border-left: 2px solid var(--warm); background: var(--bg-2); }
.rcard .ip-k { align-self: start; padding-top: 3px; }
.rcard-t { grid-column: 2; margin: 0; font-size: clamp(16.5px, 1.2vw, 18.5px); line-height: 1.5; color: var(--text); }
.rcard-s { grid-column: 2; margin: 10px 0 0; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }

.bench { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.bench li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 18px; row-gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.bench .ic { width: 26px; height: 26px; }
.bench b { display: block; font-size: 17.5px; font-weight: 500; color: var(--text); }
.bench div span { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.bench div span a { color: var(--text); border-bottom: 1px solid var(--ember); }
.bench .std { grid-column: 2; }

.rv-led { max-width: var(--measure); }
.rv-led dd a { color: var(--text); border-bottom: 1px solid var(--ember); }
.route { margin: 0; }
.route ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--rule); background: var(--panel); }
.route li { display: flex; flex-direction: column; gap: 12px; padding: 18px 14px 16px; }
.route li + li { border-left: 1px solid var(--line-2); }
.route .ic { width: 28px; height: 28px; }
.route li > span { font-size: 14.5px; line-height: 1.4; color: var(--text); }
.route li > span b { display: block; margin-bottom: 4px; font-family: var(--f-m); font-size: 12px; font-weight: 400; letter-spacing: .1em; color: var(--mute); }
.route figcaption { margin-top: 12px; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.rv-src .cmp-src { max-width: 52rem; }

/* ================================================================ ABS vs PS vs HIPS */
.lad-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; padding-top: clamp(28px, 4vw, 64px); }
.ip-h1.lad-h1 { font-size: clamp(44px, 5vw, 88px); }
.ip-answer.big.lad-ans { margin-top: clamp(28px, 3vw, 44px); max-width: var(--measure); font-size: clamp(19px, 1.4vw, 21px); line-height: 1.6; }
.lad { margin: 0; }
.lad-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; border-bottom: 1px solid var(--rule); }
.lad-s { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 20px; background: var(--panel); border: 1px solid var(--rule); border-bottom: 0; container-type: inline-size; }
.lad-s.s1 { min-height: clamp(200px, 17vw, 260px); }
.lad-s.s2 { min-height: clamp(280px, 25vw, 380px); }
.lad-s.s3 { min-height: clamp(360px, 34vw, 500px); background: var(--panel-2); }
.lad-n { font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.lad-code { margin-top: auto; font-size: clamp(28px, 2.6vw, 52px); font-size: clamp(22px, 31cqi, 64px); font-weight: 800; line-height: .86; letter-spacing: -.045em; font-variation-settings: 'wdth' 125; color: var(--text); }
.lad-name { font-size: 14.5px; line-height: 1.35; color: var(--text); }
.lad-t { font-size: 14px; line-height: 1.45; color: var(--body); }
.lad figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 12px; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.lad-axis { color: var(--text); }
.lad-axis::after { content: ' \2192'; color: var(--warm); }

.ax-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; column-gap: clamp(32px, 4vw, 72px); align-items: start; }
.ax-key { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; margin-top: var(--ip-pad); }
.ax-k { margin: 0 0 12px; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.ax-codes { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--rule); }
.ax-codes li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; line-height: 1.35; color: var(--body); }
.ax-key ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.ax-key ol a { display: flex; align-items: baseline; gap: 12px; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.35; color: var(--mute); transition: color .3s, border-color .3s; }
.ax-key ol a i { font-style: normal; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .1em; }
.ax-key ol a:hover { color: var(--text); }
.ax-key ol a.on { color: var(--text); border-left-color: var(--ember); }
.ax-key ol a.on i { color: var(--ember); }
.ax-layout .chaps > .chap:last-child { padding-bottom: 0; }
.chap .fam + .prose, .chap .prose + .fam, .chap .prose + .cmp-box, .chap .prose + .pcards, .chap .pcards + .prose,
.chap .prose + .checks, .chap .checks + .prose, .chap .prose + .meter, .chap .meter + .prose, .chap .prose + .trio,
.chap .trio + .prose, .chap .prose + .cond, .chap .cond + .prose, .chap .split + .prose { margin-top: 36px; }

.ax-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.ax-split .still.tall { max-width: 420px; }
.ax-ds .still { max-width: var(--measure); }
.ax-start { margin-top: 32px; padding: 18px 20px 6px; background: var(--panel); border: 1px solid var(--rule); max-width: var(--measure); }
.ax-start ol { list-style: none; margin: 12px 0 0; padding: 0; }
.ax-start li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 15.5px; line-height: 1.45; color: var(--body); }
.ax-start li b { font-family: var(--f-m); font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--text); white-space: nowrap; }

.fam { display: grid; border-top: 1px solid var(--rule); }
.fam-r { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.fam-c { grid-row: 1 / span 2; font-size: clamp(30px, 2.6vw, 42px); font-weight: 800; line-height: .9; letter-spacing: -.04em; font-variation-settings: 'wdth' 125; color: var(--text); }
.fam-m { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.fam-m > i { font-style: normal; font-family: var(--f-s); font-size: 26px; line-height: 1; color: var(--warm); }
.chip { display: inline-grid; gap: 3px; padding: 9px 12px; border: 1px solid var(--rule); background: var(--panel); }
.chip b { font-size: 15.5px; font-weight: 560; color: var(--text); }
.chip em { font-style: normal; font-family: var(--f-m); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.fam-n { grid-column: 2; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }

/* SC.03 impact meter */
.meter { margin: 0; padding: 22px 22px 20px; background: var(--panel); border: 1px solid var(--rule); }
.meter-k { margin: 0 0 16px; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; color: var(--text); }
.meter-k span { display: block; color: var(--mute); }
.meter ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.meter li { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 15rem); align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.m-code { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variation-settings: 'wdth' 125; color: var(--text); }
.m-bar { position: relative; height: 14px; border: 1px solid var(--rule); }
.m-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--warm); }
.m-ps .m-bar { border-style: dashed; }
.m-v { font-family: var(--f-m); font-size: 13px; letter-spacing: .04em; color: var(--text); font-variant-numeric: tabular-nums; }
.m-v.gapst { justify-self: start; font-size: 12px; }
.meter .std { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }

/* SC.04 finish trio */
.trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.trio li { display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; background: var(--panel); border: 1px solid var(--rule); }
.trio li > :not(.sw) { padding: 0 20px; }
.sw { position: relative; display: block; height: 128px; margin-bottom: 8px; overflow: hidden; border-bottom: 1px solid var(--line-2); background: #121418; }
.sw i { position: absolute; inset: 24px 28px; }
.sw-clear { background: repeating-linear-gradient(135deg, rgba(236, 231, 222, .16) 0 1px, transparent 1px 13px), #121418; }
.sw-clear i { border: 1px solid rgba(236, 231, 222, .6); background: linear-gradient(115deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .03) 38%, rgba(255, 255, 255, .1) 62%, rgba(255, 255, 255, .02)); }
.sw-matt i { background: #8c9097; }
.sw-gloss i { background: linear-gradient(160deg, #3d4046 0%, #1d1f23 46%, #2b2e33 58%, #111214 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.sw-gloss i::after { content: ''; position: absolute; left: 12%; top: 14%; width: 46%; height: 18%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); transform: skewX(-24deg); }
.tr-code { font-size: 28px; font-weight: 800; line-height: .9; letter-spacing: -.035em; font-variation-settings: 'wdth' 125; color: var(--text); }
.trio b { font-size: 17px; font-weight: 500; color: var(--text); }
.tr-t { font-size: 15px; line-height: 1.55; color: var(--body); }

/* SC.05 conditions grid: rows = what the part meets, columns = the three resins */
.cond { border-top: 1px solid var(--rule); }
.cond-r { display: grid; grid-template-columns: 140px repeat(3, minmax(0, 1fr)); gap: 0 20px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.cond-h { padding: 12px 0; }
.cond-k { display: flex; align-items: center; gap: 10px; margin: 0; }
.cond-k b { font-family: var(--f-m); font-size: var(--fs-lab); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.cond-c { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.cond-code { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variation-settings: 'wdth' 125; color: var(--text); }
.cond-r:not(.cond-h) .cond-code { display: none; }

/* SC.07 part cards as demand profiles, 2 x 2 */
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pc { display: flex; flex-direction: column; gap: 16px; padding: 22px 22px 24px; background: var(--panel); border: 1px solid var(--rule); }
.pc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ip .pc h3 { font-size: 19px; font-weight: 500; line-height: 1.3; }
.pc-pick { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; flex: none; }
.pc-arrow { font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pc-code { font-size: 36px; font-weight: 800; line-height: .9; letter-spacing: -.035em; font-variation-settings: 'wdth' 125; color: var(--text); }
.pc-dem { list-style: none; margin: 0; padding: 12px 0; display: flex; flex-wrap: wrap; gap: 10px 20px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.pc-dem li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; line-height: 1.3; color: var(--text); }
.pc-dem .ic { width: 20px; height: 20px; }
.pc-why { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }

/* ---------- widths ---------- */
@media (max-width: 1399px) {
  .ax-layout .split { grid-template-columns: minmax(0, 1fr); }
  .rcard { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .rcard-t, .rcard-s { grid-column: 1; }
}
@media (max-width: 1080px) {
  .ax-layout { grid-template-columns: minmax(0, 1fr); }
  .ax-key { display: none; }
  .vs-lede { grid-template-columns: minmax(0, 1fr); }
  .rv-chap { grid-template-columns: minmax(0, 1fr); }
  .rv-chap > .chap-h { position: static; margin-bottom: 28px; }
  .rv-b { grid-column: 1; grid-row: 2; }
  .rv-wide { grid-row: 3; margin-top: 36px; }
  .lad-hero { grid-template-columns: minmax(0, 1fr); }
  .lad-s.s1 { min-height: 170px; } .lad-s.s2 { min-height: 240px; } .lad-s.s3 { min-height: 310px; }
  .fam-r { grid-template-columns: 96px minmax(0, 1fr); }
  .cond-r { grid-template-columns: 120px repeat(3, minmax(0, 1fr)); gap: 0 14px; }
}
@media (max-width: 900px) {
  .route ol { grid-template-columns: minmax(0, 1fr); }
  .route li { flex-direction: row; align-items: center; gap: 16px; padding: 12px 16px; }
  .route li + li { border-left: 0; border-top: 1px solid var(--line-2); }
  .trio { grid-template-columns: minmax(0, 1fr); }
  .trio li { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; padding: 0 18px 0 0; align-items: start; }
  .trio li > :not(.sw) { padding: 0; grid-column: 2; }
  .trio .sw { grid-row: 1 / span 3; height: 100%; min-height: 120px; margin: 0; border-bottom: 0; border-right: 1px solid var(--line-2); }
  .trio .tr-code { padding-top: 16px; }
  .trio .tr-t { padding-bottom: 16px; }
  .cond-h { display: none; }
  .cond-r { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cond-r:not(.cond-h) .cond-code { display: inline-block; min-width: 54px; font-size: 16px; }
  .cond-c { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .cond-c.c-abs { order: 1; } .cond-c.c-hips { order: 2; } .cond-c.c-ps { order: 3; }
  .cond-r { display: flex; flex-direction: column; }
  .cond-r.cond-h { display: none; }
}
@media (max-width: 760px) {
  .vs-pair { gap: 8px; }
  .vs-seam { width: 30px; }
  .vs-seam span { font-size: 28px; padding: 6px 0; }
  .vs-side .frame-in { aspect-ratio: 1 / 1; }
  .vs-side .tc-tag { display: none; }
  .vs-tag { font-size: 18px; }
  .vs-tag b { margin-right: 8px; }
  .vs-what { font-size: 14.5px; }
  .verdict, .nx-grid, .pcards { grid-template-columns: minmax(0, 1fr); }
  .ab-h { display: none; }
  .ab-r { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ab-r:not(.ab-h) .ab-c b { display: inline-block; min-width: 22px; margin-right: 8px; font-family: var(--f-m); font-size: 12px; font-weight: 500; color: var(--text); }
  .ab-c { display: flex; align-items: baseline; }
  .lad-row { gap: 8px; }
  .lad-s { padding: 14px 10px 16px; gap: 6px; }
  .lad-code { font-size: clamp(20px, 31cqi, 30px); }
  .lad-name { font-size: 13px; }
  .lad-t { font-size: 13px; }
  .fam-r { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fam-c { grid-row: auto; }
  .fam-n { grid-column: 1; }
  .meter li { grid-template-columns: 80px minmax(0, 1fr); row-gap: 8px; }
  .meter .m-v { grid-column: 2; }
  .pc-top { flex-direction: column; gap: 10px; }
  .pc-pick { flex-direction: row; align-items: baseline; gap: 12px; }

  /* the tables: one card per row, the row's own label on top, each cell labelled */
  .cmp-stack { overflow: visible; background: none; border: 0; }
  .cmp-stack .cmp-t, .cmp-stack .cmp-t tbody, .cmp-stack .cmp-t tr, .cmp-stack .cmp-t th, .cmp-stack .cmp-t td { display: block; width: auto; }
  .cmp-stack .cmp-t { min-width: 0; }
  .cmp-stack .cmp-t thead { display: none; }   /* each cell carries its column's name (data-label) instead */
  .cmp-stack .cmp-t caption { display: block; padding: 0 0 12px; border-top: 0; }
  .cmp-stack .cmp-t tbody tr { display: flex; flex-direction: column; margin-bottom: 10px; border: 1px solid var(--rule); background: var(--panel); }
  .cmp-stack .cmp-t tbody th { order: 0; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--rule); background: var(--panel-2); }
  .cmp-stack .cmp-t td { padding: 10px 16px 12px; border: 0; border-bottom: 1px solid var(--line-2); }
  .cmp-stack .cmp-t td:last-child { border-bottom: 0; }
  .cmp-stack .cmp-t td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
  .cmp-stack .cmp-t tbody tr:hover > * { background: none; }
  .faceoff td.fo-a { order: 1; } .faceoff td.fo-b { order: 2; border-bottom: 0; }
  .matrix td.c-abs { order: 1; } .matrix td.c-hips, .matrix td.c-pships { order: 2; } .matrix td.c-ps { order: 3; border-bottom: 0; }
  .matrix td.c-abs { color: var(--text); }
  .cmp-stack .matrix td.c-abs { border-bottom: 1px solid var(--line-2); }
  .cmp-stack .matrix .mx-dp td.c-pships { border-bottom: 0; }
  .cmp-stack .matrix .mx-ex { border-top: 0; }
  .cmp-stack .matrix .mx-grp { margin-top: 24px; }
  .cmp-stack .matrix .mx-grp th { border-bottom: 0; }
  .matrix td + td, .matrix tbody th + td { border-left: 0; }
}
@media (max-width: 480px) {
  .fam-m { flex-direction: column; align-items: stretch; gap: 6px; }
  .fam-m > i { align-self: center; }
  .ax-start li { grid-template-columns: 22px minmax(0, 1fr); }
  .ax-start li b { grid-column: 2; }
  .trio li { grid-template-columns: 88px minmax(0, 1fr); }
}