/* Diagrams belong to this article. Every final state is the default; motion only replays it once. */
.liability-article{--sage:#b8dbba;--violet:#bdb7ff;--panel:#151512;--frame:#47463f;--ease:cubic-bezier(.2,.75,.2,1)}
.liability-article .reading{max-width:960px}
.liability-article .reading>p,.liability-article .reading>ul,.liability-article .reading>ol{max-width:760px}
.liability-article .article-toc{border:0;border-block:1px solid var(--line);padding:24px 0;margin:32px 0 42px}
.liability-article .article-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:8px 34px;padding-left:22px}
.liability-article .article-toc li{margin:0;padding-left:3px}

.cap-chart,.claim-map,.regime-map{position:relative;margin:28px 0 34px;padding:30px 32px 28px;border:1px solid var(--frame);background:var(--panel)}
.cap-chart::before,.regime-map::before{content:"";position:absolute;left:-1px;top:30px;width:3px;height:48px;background:var(--red)}
.reading .cap-eyebrow{margin:0 0 10px;color:var(--muted);font:11px/1.7 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.reading .cap-chart h3,.reading .regime-map h3{margin:0 0 24px;font:500 clamp(22px,2.6vw,28px)/1.25 var(--sans);letter-spacing:-.02em}
.reading .cap-note{margin:14px 0 0;max-width:760px;color:var(--muted);font-size:13px;line-height:1.6}

/* 1. How the fees paid cap grows against a fixed cap. */
.cap-rows{display:grid;gap:12px}
.cap-row{display:grid;grid-template-columns:190px minmax(0,1fr) 100px;align-items:center;gap:16px}
.cap-label{color:var(--muted);font-size:15px;line-height:1.35}
.cap-row-fixed .cap-label{color:var(--ink)}
.cap-track{position:relative;display:block;height:24px;border:1px solid #3d3b34;border-right:2px dashed #ece9e1b3;background:linear-gradient(90deg,#ffffff0d 1px,transparent 1px) 0 0/calc(100% / 12) 100%}
.cap-track i{position:absolute;top:0;bottom:0;left:0;width:calc(var(--v) / 12 * 100%);background:var(--red);transform-origin:0 50%}
.cap-row-fixed .cap-track i{background:var(--ink);opacity:.85}
.cap-value{color:var(--red);font:500 18px/1 var(--mono);letter-spacing:-.02em;text-align:right}
.cap-row-fixed .cap-value{color:var(--ink)}
.reading .cap-group{margin:12px 0 0;color:var(--muted);font:11px/1.6 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.reading .cap-formula{margin:18px 0 0;color:var(--muted);font:12px/1.7 var(--mono)}
.reading .cap-takeaway{max-width:700px;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:17px;line-height:1.55}

/* 2. One aggregate cap or a cap for each claim, on the same scale. */
.claim-map{padding-bottom:26px}
.claim-options{display:grid;grid-template-columns:1fr 1fr;margin-top:8px}
.claim-option{min-width:0;padding-right:32px}
.claim-option+.claim-option{padding:0 0 0 32px;box-shadow:inset 1px 0 0 var(--line)}
.reading .claim-label{margin:0;font-size:18px;line-height:1.4}
.claim-visual{display:flex;flex-direction:column;justify-content:center;height:112px}
.claim-stack{position:relative;display:flex;gap:3px;height:38px}
.claim-stack i,.claim-lane i{position:relative;display:grid;place-items:center;border:1px solid #b8dbba80;background:#b8dbba29;color:var(--ink);font:11px/1 var(--mono);font-style:normal;transform-origin:0 50%}
.claim-stack i{flex:1}
.claim-stack .claim-over{border-color:var(--red);color:var(--red)}
.claim-stack .claim-over::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,#ff5b4538 0 4px,transparent 4px 9px)}
.claim-cap{position:absolute;top:-24px;bottom:-8px;left:calc(200% / 3);border-left:2px solid var(--red)}
.claim-cap span{position:absolute;top:-2px;left:7px;color:var(--red);font:10px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.claim-lanes{display:grid;gap:6px}
.claim-lane{position:relative;display:block;width:calc(200% / 3 + 2px);height:26px;border-right:2px solid var(--red)}
.claim-lane i{position:absolute;top:0;bottom:0;left:0;width:calc(50% - 2px)}
.reading .claim-result{margin:0;line-height:1.4}
.claim-result span{display:block;color:var(--muted);font-size:13px}
.claim-result strong{display:block;color:var(--ink);font:500 clamp(25px,3vw,34px)/1.3 var(--mono);letter-spacing:-.04em}
.claim-result .claim-lost{color:var(--red)}
.claim-map .cap-note{margin-top:24px}

/* 3. Questions about a draft, scoped to this article. */
.liability-article .reading .promise-table{border-collapse:collapse}
.liability-article .reading .promise-table th{padding:0 16px 10px;border:0;background:none;color:var(--muted);font:400 10px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.liability-article .reading .promise-table td{padding:16px;border:0;border-top:1px solid var(--line)}
.liability-article .reading .promise-table td:first-child{color:var(--ink)}
.liability-article .reading .promise-table td:nth-child(2){color:var(--muted)}
.liability-article .reading .promise-table td:nth-child(3){background:#b8dbba0d;box-shadow:inset 2px 0 0 #b8dbba99;color:var(--sage)}

/* 5. The same obligations before and after negotiation. */
.reading .regime-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;table-layout:auto}
.reading .regime-table th,.reading .regime-table td{width:auto;padding:12px 14px;border:0;border-top:1px solid var(--line);background:none;font-weight:400;text-align:left;vertical-align:middle}
.reading .regime-table thead th{padding-top:0;border-top:0;color:var(--muted);font:400 10px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.reading .regime-table tbody th{width:34%;padding-left:0;color:var(--ink);font-weight:500}
.reading .regime-table td+td{position:relative;padding-left:36px}
.reading .regime-table td+td::before{content:"→";position:absolute;left:10px;top:50%;color:var(--muted);font:14px/1 var(--mono);transform:translateY(-50%)}
.regime{display:inline-block;padding:5px 9px;border:1px solid;border-radius:3px;font:12px/1.4 var(--mono)}
.regime-cap{border-color:#b8dbba66;background:#b8dbba14;color:var(--sage)}
.regime-own{border-color:#bdb7ff66;background:#bdb7ff14;color:var(--violet)}
.regime-open{border-color:#ff5b4573;background:repeating-linear-gradient(-45deg,#ff5b451f 0 4px,transparent 4px 9px);color:var(--red)}
.regime-law{border-color:#ece9e166;color:var(--ink)}

.liability-article .reading .checklist{padding:0;list-style:none}
.liability-article .reading .checklist li{position:relative;margin:12px 0;padding-left:36px}
.liability-article .reading .checklist li::before{content:"✓";position:absolute;left:0;top:3px;display:grid;place-items:center;width:20px;height:20px;border:1px solid #b8dbba80;border-radius:3px;color:var(--sage);font:12px/1 var(--mono)}
.liability-article .help-card{max-width:760px;margin:52px 0 0;padding:28px 30px 30px;border:1px solid var(--frame);border-left:3px solid var(--red);background:var(--panel)}
.reading .help-card h2{margin:0 0 12px;font-size:clamp(22px,2.4vw,28px)}
.reading .help-card p{margin:0 0 20px;color:var(--muted)}
.reading .help-card .help-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:0}
.help-actions a:not(.button){padding:12px 0;font:13px/1.5 var(--mono)}

@media screen and (prefers-reduced-motion:no-preference){
.cap-chart.is-armed .cap-track i,.claim-map.is-armed .claim-stack i,.claim-map.is-armed .claim-lane i{transform:scaleX(0)}
.cap-chart.is-armed .cap-value,.claim-map.is-armed .claim-cap,.claim-map.is-armed .claim-result{opacity:0}
.claim-map.is-armed .claim-stack .claim-over{border-color:#b8dbba80;color:var(--ink)}
.claim-map.is-armed .claim-stack .claim-over::after{opacity:0}
.regime-map.is-armed td+td .regime{opacity:0;transform:translateX(-8px)}
.cap-chart.is-playing .cap-track i{transform:none;transition:transform .8s var(--ease) calc(var(--md,0s) + var(--d,0s))}
.cap-chart.is-playing .cap-value{opacity:1;transition:opacity .35s ease calc(var(--md,0s) + var(--d,0s) + .55s)}
.cap-row:nth-of-type(1){--d:.1s}.cap-row:nth-of-type(2){--d:.55s}.cap-row:nth-of-type(3){--d:.7s}.cap-row:nth-of-type(4){--d:.85s}.cap-row:nth-of-type(5){--d:1s}
.claim-map.is-playing .claim-stack i,.claim-map.is-playing .claim-lane i{transform:none;transition:transform .5s var(--ease) calc(var(--md,0s) + var(--d,0s))}
.claim-stack i:nth-child(1),.claim-lane:nth-child(1) i{--d:.1s}.claim-stack i:nth-child(2),.claim-lane:nth-child(2) i{--d:.3s}.claim-stack i:nth-child(3),.claim-lane:nth-child(3) i{--d:.5s}
.claim-map.is-playing .claim-cap{opacity:1;transition:opacity .4s ease calc(var(--md,0s) + .9s)}
.claim-map.is-playing .claim-stack .claim-over{border-color:var(--red);color:var(--red);transition:transform .5s var(--ease) calc(var(--md,0s) + .5s),border-color .4s ease calc(var(--md,0s) + 1.15s),color .4s ease calc(var(--md,0s) + 1.15s)}
.claim-map.is-playing .claim-stack .claim-over::after{opacity:1;transition:opacity .4s ease calc(var(--md,0s) + 1.15s)}
.claim-map.is-playing .claim-result{opacity:1;transition:opacity .45s ease calc(var(--md,0s) + 1.4s)}
.regime-map.is-playing td+td .regime{opacity:1;transform:none;transition:opacity .4s ease calc(var(--md,0s) + var(--d,0s)),transform .5s var(--ease) calc(var(--md,0s) + var(--d,0s))}
.regime-table tbody tr:nth-child(1){--d:.15s}.regime-table tbody tr:nth-child(2){--d:.4s}.regime-table tbody tr:nth-child(3){--d:.65s}.regime-table tbody tr:nth-child(4){--d:.9s}.regime-table tbody tr:nth-child(5){--d:1.15s}
}

@media(max-width:700px){.reading .regime-table,.reading .regime-table tbody{display:block}.reading .regime-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.reading .regime-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;padding:14px 0;border-top:1px solid var(--line)}.reading .regime-table th,.reading .regime-table td,.reading .regime-table td+td{display:block;padding:0;border:0}.reading .regime-table tbody th{grid-column:1/-1;width:auto}.reading .regime-table td::before,.reading .regime-table td+td::before{position:static;display:block;margin-bottom:6px;color:var(--muted);font:10px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;transform:none;content:attr(data-label)}.reading .regime-table td+td::before{content:"→ " attr(data-label)}.liability-article .reading .promise-table td:nth-child(3){box-shadow:inset 2px 0 0 #b8dbba99}}
@media(max-width:650px){.liability-article .article-toc ol{grid-template-columns:1fr}.cap-chart,.claim-map,.regime-map{padding:24px 18px 22px}.cap-chart::before,.regime-map::before{top:24px}.cap-rows{gap:10px}.cap-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}.cap-track{grid-column:1/-1;grid-row:2}.cap-value{font-size:16px}.reading .cap-takeaway{font-size:16px}.claim-options{grid-template-columns:1fr;gap:24px}.claim-option,.claim-option+.claim-option{padding:0;box-shadow:none}.claim-option+.claim-option{padding-top:22px;border-top:1px solid var(--line)}.claim-visual{height:100px}.liability-article .help-card{padding:22px 20px 24px}}
@media print{.cap-chart,.claim-map,.regime-map,.liability-article .help-card{border-color:#999;background:none;color:#111;break-inside:avoid}.cap-chart::before,.regime-map::before{display:none}.liability-article .reading{max-width:none}.cap-track,.claim-stack,.claim-lanes,.regime{-webkit-print-color-adjust:exact;print-color-adjust:exact}.reading .cap-eyebrow,.reading .cap-formula,.reading .cap-note,.cap-label,.claim-result span{color:#333}.cap-value,.claim-result strong,.regime-law,.reading .regime-table tbody th,.liability-article .reading .promise-table td:first-child,.liability-article .reading .promise-table td:nth-child(3){color:#111}}