/* A shared page grid for the essay and its evidence. */
/* A final callback to the opening arcade scene. */
.story-closing .closing-arcade { width:min(100%,420px); margin:40px auto 0; }
.closing-arcade img { display:block; width:100%; height:auto; }
.story-edition { --page-gutter:clamp(20px,4vw,56px); --scene-gap:64px; }
.story-edition .wrap { width:calc(100% - 2 * var(--page-gutter)); max-width:1120px; margin-inline:auto; }
.story-edition .site-header { padding-inline:max(var(--page-gutter),calc((100vw - 1120px) / 2)); }
.story-title-row { display:block; padding-block:32px 30px; }
.story-title-row h1 { width:100%; font-size:clamp(32px,4vw,56px); line-height:1.15; white-space:normal; letter-spacing:-.045em; }
.story-title-row h1 em { letter-spacing:-.065em; }
.story-prose,.story-section-heading,.story-pullquote,.draft-note,.draft-placeholder,
.story-experiment,.working-draft .environment-grid,.draft-chart,.draft-config,
.finance-evidence-notes,.driver-experiments,.story-modifier-index,.cost-evidence,
.team-agenda ol,.team-agenda>.draft-help { max-width:none; margin-inline:0; width:100%; }
.opening-scene,.pricing-scene,.meter-introduction { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:var(--scene-gap); max-width:none; width:100%; margin-inline:0; }
.opening-scene .story-prose,.pricing-scene .story-prose,.meter-introduction .story-prose { width:100%; max-width:none; margin:0; }
.opening-anecdote>p,.meter-introduction .story-prose p { font-size:18px; }
.pricing-scene>.prompt-scene { width:100%; max-width:none; justify-self:end; }
.meter-introduction .story-meter { width:100%; max-width:none; justify-self:end; margin:0; }
.meter-introduction .power-drawing { max-width:340px; margin-inline:auto; }
.draft-note,.draft-placeholder { padding-inline:0; border-inline:0; background:none; }
.reading-note { padding-inline:0; border-left:0; background:none; border-block:1px solid var(--line); }
.story-edition #methodology { display:block; }
.story-edition #methodology .method-heading { margin-bottom:26px; }
.story-edition #methodology .method-details { width:100%; }
.story-edition .finance-evidence-notes>div { max-width:none; }
.team-agenda ol { padding-left:24px; }

/* One exhibit:two columns of twenty disclosures, followed by the chart. */
#baseline-guide { border-block:1px solid var(--ink); padding-bottom:16px; }
#baseline-guide .baseline-guide-heading { padding:25px 0 24px; display:block; border:0; }
#baseline-guide .baseline-guide-heading h3 { margin:0; font:500 clamp(24px,2.6vw,34px)/1.25 var(--sans); letter-spacing:-.04em; }
.workflow-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.workflow-column { min-width:0; }
.workflow-column>.baseline-row,.workflow-column>.planned-row { border:0; border-top:1px solid var(--hairline); }
.workflow-column>details:last-child { border-bottom:1px solid var(--hairline); }
.workflow-column>details>summary { display:grid; grid-template-columns:minmax(0,1fr) 72px 14px; gap:12px; align-items:center; min-height:44px; padding:10px 0; list-style:none; }
.workflow-column>details>summary::-webkit-details-marker { display:none; }
.workflow-column>details>summary::before,.workflow-column>details>summary::after { content:none; }
.workflow-column .baseline-task { display:block; font:500 13px/1.45 var(--sans); grid-column:1; grid-row:1; }
.workflow-column .baseline-cost { font:500 15px/1.4 var(--sans); letter-spacing:-.035em; font-variant-numeric:tabular-nums; text-align:right; grid-column:2; grid-row:1; }
.workflow-column .expand-mark { grid-column:3; grid-row:1; text-align:right; font:17px/1 var(--sans); transition:transform .2s; }
.workflow-column>details[open]>summary .expand-mark { transform:rotate(45deg); }
.workflow-pending-name { font:13px/1.45 var(--sans); color:var(--ink-3); }
.workflow-pending-cost { font:10px/1.5 var(--sans); color:var(--ink-3); text-align:right; }
.workflow-column>.planned-row>summary>.workflow-pending-cost { grid-column:2; grid-row:1; }
.workflow-column>.planned-row>summary>.expand-mark { grid-column:3; grid-row:1; color:var(--ink-3); }
.workflow-column .baseline-detail { display:block; padding:18px 16px; border:0; margin-bottom:12px; }
.workflow-column .baseline-detail dl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:20px; }
.workflow-column .baseline-detail dt,.workflow-column .baseline-detail dd { font-size:11px; overflow-wrap:anywhere; }
.workflow-column>.planned-row>div { padding:12px 16px 20px; background:var(--surface); }
.workflow-column>.planned-row dl { grid-template-columns:1fr; gap:10px; }
#workflow-explorer { max-width:none; width:100%; border:0; margin:0; padding:30px 0 16px; }
#workflow-explorer .axis-controls { grid-template-columns:1fr 1fr; }
#workflow-plot-note:empty { display:none; }
#workflow-plot .scatter-point .scatter-dot { fill:var(--ink); stroke:var(--white); stroke-width:1.5; }
#workflow-plot .scatter-point .scatter-hit { fill:transparent; stroke:none; }
#workflow-plot .scatter-point.selected .scatter-hit { fill:transparent; stroke:none; }
#workflow-plot .scatter-point.selected .scatter-dot { fill:var(--white); stroke:var(--ink); stroke-width:2.5; }
#workflow-plot .scatter-point:hover .scatter-dot,#workflow-plot .scatter-point:focus-visible .scatter-dot { stroke:var(--ink); stroke-width:3; }
#workflow-plot .scatter-point:focus-visible .scatter-hit { stroke:var(--ink-3); stroke-width:1; stroke-dasharray:2 3; }
.exhibit-notes { border-top:1px solid var(--hairline); padding-top:14px; margin-top:12px; }
.exhibit-notes>summary { font:11px/1.6 var(--sans); color:var(--ink-3); cursor:pointer; }
.exhibit-notes .baseline-caption { font-size:11px; }

@media(max-width:1050px) {
 .story-edition { --scene-gap:36px; }
 .opening-anecdote>p,.meter-introduction .story-prose p { font-size:17px; }
 .workflow-columns { column-gap:28px; }
 .workflow-column>details>summary { min-height:54px; grid-template-columns:minmax(0,1fr) 62px 12px; gap:10px; }
 .workflow-column .baseline-task { font-size:12px; }
 .workflow-column .baseline-cost { font-size:14px; }
}
@media(max-width:700px) {
 .opening-scene,.pricing-scene,.meter-introduction { grid-template-columns:1fr; gap:28px; }
 .pricing-scene>.prompt-scene { width:100%; max-width:480px; }
 .meter-introduction .story-meter { max-width:360px; justify-self:end; }
 .opening-anecdote>p,.meter-introduction .story-prose p { font-size:16px; }
 .workflow-columns { grid-template-columns:1fr; }
 .workflow-column>details>summary { min-height:50px; grid-template-columns:minmax(0,1fr) 65px 14px; gap:12px; }
 .workflow-column .baseline-task { font-size:13px; }
 .workflow-column .baseline-cost { font-size:15px; }
 .workflow-column:first-child>details:last-child { border-bottom:0; }
 #workflow-explorer .axis-controls { grid-template-columns:1fr; }
 .draft-note,.draft-placeholder { padding-inline:0; }
}
@media(prefers-reduced-motion:reduce) { .workflow-column .expand-mark { transition:none; } }

/* The meter is the sum; the four workflows explain the usage behind it. */
.meter-example { width:100%; margin:0 0 52px; }
.meter-example .meter-introduction { margin-bottom:0; align-items:center; }
.meter-example .story-meter { max-width:420px; }
.meter-example .power-drawing { max-width:310px; }
.meter-example .power-figure-top { font-size:9px; letter-spacing:.02em; border-top:1px solid var(--ink); }
.meter-example .meter-reading { font:46px var(--sans); letter-spacing:-2px; fill:var(--white); font-variant-numeric:tabular-nums; }
.meter-explanation { margin-top:34px; padding-top:25px; border-top:1px solid var(--line); }
.meter-explanation .eyebrow,.meter-usage-heading .eyebrow { display:block; margin-bottom:10px; }
.meter-explanation h3,.meter-usage-heading h3 { font:500 30px/1.2 var(--sans); letter-spacing:-.04em; margin:0 0 12px; }
.meter-example .meter-explanation p { font:15px/1.8 var(--sans); color:var(--ink-3); margin:0; }
.meter-usage { position:relative; margin-top:30px; border-top:1px solid var(--ink); padding-top:26px; }
.meter-usage:before { content:""; position:absolute; height:30px; width:1px; background:var(--ink); right:calc((100% - var(--scene-gap)) * .2); top:-31px; }
.meter-usage-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.meter-usage-heading h3 { margin:0; }
.meter-usage-controls { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:10px 16px; }
.meter-usage-controls p { font:12px/1.6 var(--sans); color:var(--ink-3); margin:0; }
#meter-reset { font:11px/1.4 var(--sans); color:var(--ink); background:var(--white); border:1px solid var(--line-strong); padding:10px 12px; cursor:pointer; min-height:40px; }
#meter-reset:disabled { color:var(--ink-3); border-color:var(--hairline); cursor:default; }
.meter-workflows { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0; padding:0; border:0; min-width:0; }
.meter-workflow { min-width:0; padding:22px 22px 0; border-left:1px solid var(--hairline); display:flex; flex-direction:column; }
.meter-workflow:first-of-type { border-left:0; padding-left:0; }
.meter-workflow:last-of-type { padding-right:0; }
.meter-workflow-toggle { display:flex; align-items:flex-start; gap:11px; min-height:48px; cursor:pointer; font:500 16px/1.5 var(--sans); letter-spacing:-.02em; }
.meter-workflow input { appearance:auto; flex:0 0 17px; width:17px; height:17px; padding:0; margin:3px 0 0; accent-color:var(--ink); cursor:pointer; }
.meter-workflow p { font:12px/1.75 var(--sans); color:var(--ink-3); margin:14px 0 22px; }
.meter-workflow dl { margin:0; padding:0; margin-top:auto; display:grid; gap:10px; }
.meter-workflow dl>div { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.meter-workflow dt { font:11px/1.5 var(--sans); color:var(--ink-3); }
.meter-workflow dd { margin:0; font:14px/1.5 var(--sans); font-variant-numeric:tabular-nums; white-space:nowrap; }
.meter-workflow dl>div:last-child { border-top:1px solid var(--hairline); padding-top:10px; }
.meter-workflow dl>div:last-child dd { font-size:20px; }
.meter-workflow a { align-self:flex-start; font:11px/1.6 var(--sans); margin-top:20px; padding-block:6px; text-decoration:underline; text-underline-offset:3px; }
.meter-workflow.is-excluded p,.meter-workflow.is-excluded dl { opacity:.45; }
.meter-workflow.is-excluded .meter-workflow-toggle span { color:var(--ink-3); }
.meter-workflow input:focus-visible,#meter-reset:focus-visible,.meter-workflow a:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.meter-example>figcaption { font:11px/1.8 var(--sans); color:var(--ink-3); margin-top:26px; padding-top:17px; border-top:1px solid var(--hairline); max-width:none; }
.meter-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(max-width:1000px){
 .meter-workflows { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 0; }
 .meter-workflow:nth-of-type(odd) { border-left:0; padding-left:0; }
 .meter-workflow:nth-of-type(even) { padding-right:0; }
 .meter-workflow:nth-of-type(n+3) { border-top:1px solid var(--hairline); }
 .meter-usage-heading { align-items:start; }
 .meter-usage-controls { max-width:260px; }
}
@media(max-width:700px){
 .meter-example .meter-introduction { display:grid; grid-template-columns:1fr; gap:30px; }
 .meter-example .meter-introduction .story-meter { max-width:none; justify-self:stretch; }
 .meter-example .power-drawing { max-width:300px; }
 .meter-usage:before { right:50%; }
 .meter-usage-heading { display:block; }
 .meter-usage-controls { max-width:none; justify-content:space-between; margin-top:17px; }
 .meter-explanation { margin-top:24px; padding-top:20px; }
 .meter-workflow { padding-inline:17px; }
 .meter-workflow-toggle { font-size:14px; }
}
@media(max-width:460px){
 .meter-workflows { grid-template-columns:1fr; gap:0; }
 .meter-workflow,.meter-workflow:first-of-type,.meter-workflow:last-of-type { padding:22px 0; border-left:0; border-top:1px solid var(--hairline); }
 .meter-workflow-toggle { font-size:17px; min-height:0; }
 .meter-workflow p { margin:10px 0 17px; }
 .meter-workflow dl { gap:7px; }
 .meter-workflow dl>div:last-child { border-top:0; padding-top:0; }
 .meter-workflow a { margin-top:13px; }
 .meter-example>figcaption { margin-top:0; }
}

/* Exploratory Fable reports sit apart from the matched finance comparison. */
.fable-model-results { margin:36px 0 30px; padding-top:25px; border-top:1px solid var(--ink); }
.fable-results-heading .eyebrow { display:block; margin-bottom:12px; }
.fable-results-heading h4 { margin:0 0 14px; font:500 28px/1.2 var(--sans); letter-spacing:-.04em; }
.fable-results-heading p { font:15px/1.8 var(--sans); max-width:780px; margin:0 0 24px; color:var(--ink-2); }
.fable-table-head,.fable-run>summary { display:grid; grid-template-columns:minmax(0,1fr) 105px 85px 14px; gap:20px; align-items:center; }
.fable-table-head { font:10px/1.5 var(--sans); color:var(--ink-3); padding:0 0 12px; }
.fable-table-head>span:nth-child(2),.fable-table-head>span:nth-child(3) { text-align:right; }
.fable-run { border-top:1px solid var(--line); }
.fable-run:last-child { border-bottom:1px solid var(--line); }
.fable-run>summary { list-style:none; cursor:pointer; min-height:62px; padding:14px 0; font:14px/1.5 var(--sans); }
.fable-run>summary::-webkit-details-marker { display:none; }
.fable-run>summary strong { font:20px/1.5 var(--sans); text-align:right; font-variant-numeric:tabular-nums; }
.fable-api { font:12px/1.5 var(--sans); text-align:right; font-variant-numeric:tabular-nums; }
.fable-expand { font:17px/1 var(--sans); text-align:right; }
.fable-run[open] .fable-expand { transform:rotate(45deg); }
.fable-run>summary:focus-visible,.fable-source-link:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.fable-run-detail { padding:2px 0 22px; }
.fable-run-detail p { margin:0 0 17px; font:13px/1.8 var(--sans); color:var(--ink-3); max-width:800px; }
.fable-run-detail dl { margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.fable-run-detail dt { font:10px/1.7 var(--sans); color:var(--ink-3); }
.fable-run-detail dd { margin:5px 0 0; font:12px/1.7 var(--sans); }
.fable-results-note { margin:18px 0 12px; font:12px/1.8 var(--sans); color:var(--ink-3); max-width:880px; }
.fable-source-link { display:inline-block; padding-block:6px; font:11px/1.7 var(--sans); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:700px){
 .fable-table-head,.fable-run>summary { grid-template-columns:minmax(0,1fr) 75px 60px 12px; gap:12px; }
 .fable-table-head { font-size:9px; }
 .fable-run>summary { font-size:13px; }
 .fable-run>summary strong { font-size:17px; }
 .fable-api { font-size:11px; }
 .fable-run-detail dl { grid-template-columns:1fr; gap:10px; }
}
@media(max-width:380px){
 .fable-table-head,.fable-run>summary { grid-template-columns:minmax(0,1fr) 63px 48px 10px; gap:8px; }
 .fable-table-head { font-size:8px; }
 .fable-run>summary strong { font-size:15px; }
}

.model-cost-caption { margin-top:22px; font:12px/1.8 var(--sans); color:var(--ink-3); }
.model-result-details { margin-top:22px; border-top:1px solid var(--line-strong); }
.model-result-details>summary { display:flex; justify-content:space-between; gap:20px; align-items:center; list-style:none; cursor:pointer; padding:17px 0; font:13px/1.7 var(--sans); }
.model-result-details>summary::-webkit-details-marker { display:none; }
.model-result-details>summary>span { font:19px/1 var(--sans); }
.model-result-details[open]>summary>span { transform:rotate(45deg); }
.model-result-details>summary:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.model-result-details p { margin:0 0 22px; font:13px/1.8 var(--sans); max-width:850px; }
.model-result-details>div { padding-top:12px; }
.model-task-table { width:100%; border-collapse:collapse; margin:0 0 22px; }
.model-task-table th,.model-task-table td { padding:13px 12px; border-bottom:1px solid var(--line); text-align:right; font:12px/1.7 var(--sans); white-space:nowrap; }
.model-task-table th:first-child { text-align:left; padding-left:0; white-space:normal; font-family:var(--sans); font-weight:400; }
.model-task-table th:last-child,.model-task-table td:last-child { padding-right:0; }
.model-task-table thead th { font:10px/1.5 var(--sans); color:var(--ink-3); white-space:normal; }
.model-task-table tfoot th,.model-task-table tfoot td { border-top:1px solid var(--ink); border-bottom:0; font-weight:600; }
.model-result-details .model-basis-note { font-size:11px; color:var(--ink-3); margin-bottom:0; }
@media(max-width:700px){
 .model-task-table th,.model-task-table td { padding:11px 6px; font-size:10px; }
 .model-task-table th:first-child { max-width:140px; }
 .model-task-table thead th { font-size:9px; }
}
@media(max-width:400px){
 .model-task-table th,.model-task-table td { padding-inline:3px; font-size:9px; }
 .model-task-table thead th { font-size:8px; }
}

/* Each driver reads as an overview, optional evidence, and our reaction. */
#modifiers .story-modifier-index { grid-template-columns:repeat(5,minmax(0,1fr)); }
#modifiers .story-modifier-index a { padding:20px 14px; grid-template-columns:1fr; gap:8px; align-content:start; }
#modifiers .story-modifier-index a>span,#modifiers .story-modifier-index a>strong,#modifiers .story-modifier-index a>small { grid-column:1; grid-row:auto; }
#modifiers .story-modifier-index strong { font-size:14px; line-height:1.5; }
#modifiers .story-modifier-index small { font-size:10px; line-height:1.6; }
#modifiers .story-driver { padding-top:55px; padding-bottom:32px; }
#modifiers .driver-overview p { font-size:18px; line-height:1.85; margin:0; }
#modifiers .driver-results { margin-top:26px; margin-bottom:0; border-color:var(--line-strong); }
#modifiers .driver-results>summary { padding:21px 0; }
#modifiers .driver-results>summary strong { font-size:16px; }
#modifiers .driver-results>summary:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
#modifiers .driver-results>summary:hover strong { text-decoration:underline; text-underline-offset:4px; }
#modifiers .driver-results-content { padding:18px 0 30px; }
#modifiers .driver-results-content>.story-prose { margin:0 0 22px; }
#modifiers .driver-results-content>.story-prose p { font-size:15px; line-height:1.8; }
#modifiers .driver-results-content>.draft-note,#modifiers .driver-results-content>.draft-placeholder { margin:24px 0 0; }
#modifiers .driver-results-content>.draft-note p,#modifiers .driver-results-content>.draft-placeholder p { font-size:13px; }
#modifiers .driver-results [id] { scroll-margin-top:120px; }
#modifiers .driver-reaction { padding:27px 0 6px; margin:0; }
#modifiers .driver-reaction h4 { font:500 12px/1.6 var(--sans); letter-spacing:.025em; margin:0 0 15px; color:var(--ink); }
#modifiers .driver-reaction p { font:16px/1.85 var(--sans); color:var(--ink-2); margin:0 0 14px; }
#modifiers .driver-reaction p:last-child { margin-bottom:0; }
#modifiers .driver-reaction.is-pending .reaction-pending { color:var(--ink-3); font-style:normal; }
#modifiers .memory-experiment { margin:20px 0; }
#modifiers .memory-experiment .experiment-content { padding:26px; }
#modifiers .driver-results-content .driver-experiments { border-top:0; padding-top:8px; margin-top:16px; }
@media(max-width:850px){
 #modifiers .story-modifier-index { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:600px){
 #modifiers .story-modifier-index { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #modifiers .story-modifier-index a:last-child { grid-column:1/-1; }
 #modifiers .story-modifier-index a { padding:16px 12px; }
 #modifiers .story-driver { padding-top:38px; padding-bottom:22px; }
 #modifiers .driver-overview p { font-size:16px; }
 #modifiers .driver-reaction p { font-size:15px; }
 #modifiers .driver-results>summary { gap:18px; padding:18px 0; }
 #modifiers .driver-results>summary small { font-size:11px; }
 #modifiers .memory-experiment .experiment-content { padding:20px 12px; }
}

/* The new comparisons use the same monochrome exhibit language. */
.evidence-controls { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; margin:28px 0; }
.evidence-controls label { font:500 13px/1.5 var(--sans); }
.evidence-controls select { font:14px/1.5 var(--sans); color:var(--ink); background:var(--white); border:1px solid var(--line-strong); border-radius:0; padding:12px 36px 12px 12px; max-width:100%; min-width:0; }
.evidence-track { height:8px; background:var(--hairline); overflow:hidden; }
.evidence-track i { display:block; height:100%; background:var(--ink); }
.environment-grid .evidence-track { width:100%; margin:18px 0; }
.environment-grid small { display:block; }
.environment-grid .environment-time { margin-bottom:7px; color:var(--ink-2); }
#environments .environment-grid article { display:block; }
#environments .environment-grid article>p { text-align:left; padding-right:0; }
#environments .environment-grid article>strong { color:var(--ink); }
#environments .environment-grid small { width:auto; margin-top:0; border:0; padding:0; }
.evidence-note,#context-reading { font:14px/1.7 var(--sans); color:var(--ink-2); margin:20px 0; }
.context-figure { margin:30px 0; padding:8px 0 24px; border-block:1px solid var(--ink); }
.context-bars { display:grid; gap:28px; padding:18px 0; }
.context-row { display:grid; grid-template-columns:150px minmax(0,1fr) 72px; align-items:center; gap:24px; }
.context-row>span { font:15px/1.5 var(--sans); }
.context-row strong { font:20px/1.4 var(--sans); text-align:right; font-variant-numeric:tabular-nums; }
.context-row .evidence-track { height:16px; }
.context-row[data-context="clean"] .evidence-track i { background:var(--line-strong); border:1px solid var(--ink-3); }
.context-figure figcaption { margin-top:20px; max-width:760px; font:12px/1.7 var(--sans); color:var(--ink-3); }
.continuation-note { border-top:1px solid var(--line); padding-top:14px; }
@media(max-width:700px){
 .evidence-controls { display:block; }
 .evidence-controls label { display:block; margin-bottom:10px; }
 .evidence-controls select { width:100%; font-size:12px; }
 .context-row { grid-template-columns:108px minmax(0,1fr) 56px; gap:12px; }
 .context-row>span { font-size:12px; }
 .context-row strong { font-size:16px; }
}
/* Lead with the result; leave the experiment and interpretation on demand. */
#modifiers .driver-overview h3 { margin-bottom:26px; }
.finding-lead { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:40px; align-items:center; }
.finding-stat { min-width:0; }
.finding-number { display:block; font:500 clamp(64px,7vw,100px)/1 var(--sans); letter-spacing:-.065em; font-variant-numeric:tabular-nums; }
#modifiers .driver-overview .finding-line { font:500 clamp(22px,2.4vw,30px)/1.35 var(--sans); letter-spacing:-.03em; color:var(--ink); margin:0 0 12px; }
#modifiers .driver-overview .finding-scope { font:13px/1.75 var(--sans); color:var(--ink-3); margin:0; max-width:650px; }
.finding-numbers { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.finding-numbers strong { display:block; font:500 clamp(38px,4.1vw,58px)/1.1 var(--sans); letter-spacing:-.065em; white-space:nowrap; }
.finding-numbers span { display:block; font:10px/1.65 var(--sans); margin-top:12px; color:var(--ink-3); }
.driver-question { border-bottom:1px solid var(--hairline); padding-bottom:20px; margin-bottom:26px; }
.driver-question .eyebrow { display:block; margin-bottom:10px; }
.driver-question p { font:16px/1.8 var(--sans); color:var(--ink-2); margin:0; }
#modifiers .driver-results-content>.driver-reaction { border-top:1px solid var(--line-strong); padding-top:26px; margin-top:28px; }

/* The cost list is a small electricity bill:three distinct kinds of load. */
#baseline-guide .baseline-guide-heading { padding-bottom:20px; }
.workflow-tier-intro { font:15px/1.7 var(--sans); color:var(--ink-3); margin:12px 0 0; }
.workflow-tier { display:grid; grid-template-columns:190px minmax(0,1fr); gap:34px; padding:24px 0; border-top:1px solid var(--line-strong); }
.workflow-tier-heading { display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.workflow-tier-heading svg { display:block; width:54px; height:54px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.workflow-tier-heading h4 { font:500 22px/1.25 var(--sans); letter-spacing:-.035em; margin:0 0 9px; }
.tier-range { font:13px/1.5 var(--sans); margin:0 0 8px; }
.tier-count { font:10px/1.6 var(--sans); color:var(--ink-3); }
.workflow-tier .workflow-columns { gap:0 28px; align-items:start; }
.workflow-tier .workflow-column { min-width:0; }
.workflow-tier .workflow-column>details:first-child { border-top:0; }
.workflow-tier .workflow-column>details:last-child { border-bottom:0; }
.workflow-tier .workflow-column>details>summary { min-height:48px; }
#workflow-explorer { border-top:1px solid var(--line-strong); }

/* Preview the same cost scenario that the reader can inspect in the calculator. */
.opening-payoff { border-block:1px solid var(--ink); margin:8px 0 38px; padding:26px 0; }
.payoff-heading { display:flex; justify-content:space-between; gap:30px; align-items:baseline; }
.payoff-heading .eyebrow { font-size:10px; }
.payoff-heading h2 { font:500 22px/1.4 var(--sans); letter-spacing:-.025em; margin:0; }
.payoff-prices { display:grid; grid-template-columns:1fr 58px 1fr; gap:24px; align-items:center; padding:28px 0 26px; }
.payoff-prices>div:last-child { padding-left:28px; }
.payoff-plan { font:13px/1.5 var(--sans); }
.payoff-prices p { display:flex; align-items:baseline; gap:14px; margin:9px 0 8px; }
.payoff-prices strong { font:500 clamp(48px,6.5vw,92px)/1.05 var(--sans); letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.payoff-prices p>span { font:12px/1.5 var(--sans); color:var(--ink-3); white-space:nowrap; }
.payoff-prices small { font:11px/1.5 var(--sans); color:var(--ink-3); }
.payoff-versus { font:normal 24px/1 var(--sans); color:var(--ink-3); text-align:center; }
.payoff-context { display:flex; justify-content:space-between; align-items:center; gap:34px; border-top:1px solid var(--hairline); padding-top:20px; }
.payoff-context>div { max-width:770px; }
.payoff-context p { font:14px/1.6 var(--sans); margin:0 0 8px; }
.payoff-context small { display:block; font:12px/1.65 var(--sans); color:var(--ink-3); }
.payoff-context a { flex-shrink:0; font:11px/1.65 var(--sans); text-underline-offset:4px; }
.payoff-context a:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
@media(max-width:1000px){
 .workflow-tier { grid-template-columns:155px minmax(0,1fr); gap:24px; }
 .workflow-tier .workflow-columns { gap:0 22px; }
 .payoff-prices { grid-template-columns:1fr 28px 1fr; gap:18px; }
 .payoff-prices>div:last-child { padding-left:0; }
 .payoff-prices p { flex-wrap:wrap; column-gap:10px; row-gap:2px; }
 .payoff-context { align-items:flex-start; }
 .finding-lead { gap:28px; }
 .finding-numbers { gap:15px; }
}
@media(max-width:700px){
 .finding-lead { grid-template-columns:1fr; gap:21px; }
 .finding-number { font-size:76px; }
 .finding-numbers { max-width:350px; gap:30px; }
 .finding-numbers strong { font-size:54px; }
 #modifiers .driver-overview h3 { margin-bottom:22px; }
 #modifiers .driver-overview .finding-line { font-size:23px; }
 #modifiers .driver-overview .finding-scope { font-size:12px; }
 .workflow-tier { grid-template-columns:1fr; gap:16px; padding:24px 0 16px; }
 .workflow-tier-heading { flex-direction:row; align-items:center; gap:20px; }
 .workflow-tier-heading svg { width:48px; height:48px; flex-shrink:0; }
 .workflow-tier-heading h4 { margin-bottom:5px; }
 .tier-range { display:inline; margin-right:12px; }
 .workflow-tier .workflow-column+ .workflow-column>details:first-child { border-top:1px solid var(--hairline); }
 .payoff-heading { display:block; }
 .payoff-heading .eyebrow { display:block; margin-bottom:12px; }
 .payoff-heading h2 { font-size:20px; }
 .payoff-prices { grid-template-columns:1fr 24px 1fr; gap:8px; padding:26px 0 22px; align-items:start; }
 .payoff-versus { align-self:center; font-size:18px; }
 .payoff-prices p { display:block; }
 .payoff-prices strong { display:block; font-size:clamp(34px,10vw,64px); margin-bottom:4px; }
 .payoff-prices p>span { font-size:10px; }
 .payoff-prices small { font-size:10px; }
 .payoff-plan { font-size:12px; }
 .payoff-context { display:block; padding-top:16px; }
 .payoff-context a { display:inline-block; margin-top:17px; }
 .payoff-context p { font-size:12px; }
 .payoff-context small { font-size:11px; }
}