/* One section per meaning; chart alternatives share a single card. */
.chart-modes { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; width: fit-content; max-width: 100%; background: #f6f2ec; border-radius: 10px; margin: 0 0 23px; }
.chart-modes button { font: 550 12px var(--font-body); color: var(--muted); padding: 9px 15px; border: 1px solid transparent; background: transparent; border-radius: 7px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.chart-modes button[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #e7dfd4; box-shadow: 0 2px 5px #24170805; }
.chart-modes button:hover { color: var(--accent-ink); }
.chart-modes + .chart-description { margin-top: 0; }
.product-card { padding: 23px; }
.product-card .product-icon { margin-bottom: 12px; }
.product-card p { margin-bottom: 0; }
.method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#weekly-bars, #weekly-line, #cumulative { overflow-x: auto; }
#v03 .svg-chart > svg { min-width: 840px; }
.concurrency small { max-width: 300px; }
@media (max-width: 900px) {
  .method-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .chart-modes { gap: 3px; padding: 4px; margin-bottom: 19px; }
  .chart-modes button { font-size: 10px; padding: 8px 10px; }
  .product-card { padding: 20px; }
  #v03 .svg-chart > svg { min-width: 780px; }
}

/* One USD comparison; all four subscriptions share the same scale. */
#costs [data-cost] { white-space: nowrap; }
#subscription-bars { max-width: 900px; }
#cost-method { scroll-margin-top: 90px; }
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; }

/* One physical-looking sticker per paid account: 2 + 2 + 1 + 1. */
#subscription-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding: 23px 8px 18px; align-items: stretch; }
.subscription-card.account-sticker { position: relative; min-width: 0; padding: 27px 15px 19px; border: 1px solid #e7ddd0; border-radius: 5px 7px 12px 5px; background: #fffcf4; transform: rotate(var(--sticker-angle)) translateY(var(--sticker-offset)); box-shadow: 1px 3px 2px #4933230c, 2px 9px 15px #49332313; transition: transform .25s ease, box-shadow .25s ease; }
.account-sticker::before { content: ""; position: absolute; top: -8px; left: calc(50% - 25px); width: 50px; height: 19px; background: repeating-linear-gradient(90deg, #ebdfca9c 0 2px, #f0e6d49c 2px 4px); border-inline: 1px dashed #ded0b3; transform: rotate(-5deg); box-shadow: 0 1px 0 #8d76540c; }
.account-sticker:hover { z-index: 1; transform: rotate(0deg) translateY(-4px); box-shadow: 2px 12px 22px #49332320; }
.subscription-card.account-sticker .sub-symbol.service-symbol { width: 56px; height: 56px; border: 0; background: transparent; margin-bottom: 17px; }
.account-sticker .service-logo { width: 43px; height: 43px; }
.account-sticker .service-symbol img[src$="conductor.svg"] { width: 31px; height: 43px; }
.subscription-card.account-sticker h4 { font-size: 12px; margin: 0 0 7px; }
.subscription-card.account-sticker p { font-size: 10px; margin: 0 0 21px; color: var(--muted); }
.subscription-card.account-sticker strong { display: block; font-size: clamp(18px, 1.6vw, 23px); white-space: nowrap; }
.subscription-card.account-sticker small { font-size: 9px; line-height: 1.6; display: block; margin-top: 5px; }
.subscription-card.sticker-codex { background: #f0f7ef; border-color: #d7e5d5; }
.subscription-card.sticker-claude { background: #fff0e5; border-color: #eddbcd; }
.subscription-card.sticker-conductor { background: #f5f0fc; border-color: #e2d9ee; }
@media (max-width: 1100px) {
  #subscription-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 27px 20px; }
}
@media (max-width: 600px) {
  #subscription-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 15px; padding: 20px 7px 16px; }
  .subscription-card.account-sticker { padding: 24px 10px 17px; }
  .subscription-card.account-sticker h4 { font-size: 11px; }
  .subscription-card.account-sticker strong { font-size: 19px; }
  .subscription-card.account-sticker small { font-size: 8px; }
}

/* Final presentation: six selected blocks, no composition controls. */
.method-section { padding-bottom: 60px; }
.site-nav > .motion-toggle { margin-left: auto; }
@media (max-width: 720px) {
  .site-nav { flex-wrap: wrap; gap: 12px; }
  .site-nav > .motion-toggle { font-size: 9px; padding: 6px 8px; }
  .method-section { padding-bottom: 45px; }
}

/* Extend the existing page palette, typography and card treatment. */
.hero-layout { grid-template-areas: "copy art" "metrics metrics"; row-gap: 30px; }
.hero-copy { grid-area: copy; }
.hero-art { grid-area: art; }
.hero-practice { grid-area: metrics; min-width: 0; }
.practice-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.metric-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: 18px; }
.personal-metric { background: #FFF0E4; border-color: #F1D4BE; }
.agent-metric { background: #EAF2ED; border-color: #D1E1D9; }
.message-metric { background: #F0EBF5; border-color: #E1D7EB; }
.metric-card .micro { color: var(--muted); }
.metric-card > strong { font: 600 clamp(27px,3.7vw,48px)/1.2 var(--font-display); letter-spacing: -.055em; margin: 14px 0; white-space: nowrap; }
.metric-card > strong span { font: 500 18px var(--font-body); margin-left: 9px; letter-spacing: 0; }
.metric-card h2 { font-size: 13px; letter-spacing: -.02em; line-height: 1.5; margin-bottom: 14px; }
.metric-provenance { font-size: 10px; margin-top: auto; text-underline-offset: 4px; }
.process-work-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 22px; margin-bottom: 26px; }
.process-work-grid .chart-card { margin: 0; padding: 30px; min-width: 0; }
.process-work-grid h3 { font-size: 20px; line-height: 1.45; margin: 12px 0 16px; }
.process-work-grid p { font-size: 13px; color: var(--muted); }
.process-work-grid .chart-note { font-size: 10px; }
.human-work { display: flex; flex-direction: column; }
.voice-stat { background: #FFF0E4; border-radius: 14px; margin: 24px 0; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.voice-stat strong { font: 600 44px/1.2 var(--font-display); letter-spacing: -.045em; }
.voice-stat strong span { font: 500 18px var(--font-body); margin-left: 8px; }
.voice-stat > span { font-size: 14px; }
.voice-stat small { font-size: 10px; color: var(--muted); }
.human-work-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: auto; padding-bottom: 22px; }
.human-work-steps span { border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font-size: 10px; }
.agent-donut-layout { display: grid; grid-template-columns: minmax(155px,1fr) minmax(205px,1fr); align-items: center; gap: 10px; margin: 16px 0; }
.agent-donut { position: relative; width: 100%; max-width: 300px; margin: auto; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; }
.donut-center > span { font-size: 9px; color: var(--muted); }
.donut-center > span:first-child { letter-spacing: .06em; }
.donut-center > strong { font: 600 clamp(22px,2.3vw,29px)/1.4 var(--font-display); letter-spacing: -.05em; }
.agent-sector { transform-origin: 0 0; }
.agent-sector.sector-muted { opacity: .2; }
.agent-sector.sector-selected { stroke-width: 46px; }
.agent-legend { display: grid; gap: 10px; min-width: 0; }
.agent-tool { display: flex; align-items: center; text-align: left; gap: 8px; padding: 12px 9px; border: 1px solid var(--line); border-radius: 12px; background: white; width: 100%; color: var(--ink); cursor: pointer; }
.agent-tool:hover, .agent-tool[aria-pressed="true"] { background: #FAF6F1; border-color: var(--tool-color); }
.tool-marker { height: 24px; width: 3px; border-radius: 3px; background: var(--tool-color); flex-shrink: 0; }
.agent-tool .service-logo { width: 22px; height: 22px; }
.agent-tool-name { font-size: 12px; font-weight: 600; }
.agent-tool small { display: block; font: 400 10px/1.6 var(--font-body); color: var(--muted); white-space: nowrap; }
.agent-tool > strong { margin-left: auto; font-size: 14px; text-align: right; white-space: nowrap; }
/* One shared workload, two cost alternatives, then the budget difference. */
.human-calculator { min-width: 0; }
.calculator-context { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 30px; }
.calculator-origin { display: flex; align-items: center; gap: 12px; }
.origin-dot { width: 9px; height: 9px; background: #287B78; border-radius: 50%; box-shadow: 0 0 0 5px #EAF2ED; flex-shrink: 0; }
.calculator-origin.is-custom .origin-dot { background: #A06A37; box-shadow: 0 0 0 5px #FFF0E4; }
.calculator-origin strong { display: block; font-size: 13px; }
.calculator-origin p { margin-top: 4px; font-size: 11px; color: var(--muted); }
.calculator-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #D9CBBB; border-radius: 10px; padding: 11px 14px; font: 500 12px var(--font-body); background: #FFFDFA; color: var(--ink); cursor: pointer; white-space: nowrap; }
.calculator-button:hover:not(:disabled) { border-color: #C58D68; background: #FFF4EC; }
.calculator-button:disabled { opacity: .5; cursor: default; }
.calculator-button svg { width: 16px; height: 16px; flex-shrink: 0; }
#savings-form { min-width: 0; scroll-margin-top: 24px; }
.workload-panel { min-width: 0; margin: 0; padding: 22px 28px 26px; border: 1px solid #E4DAD0; border-radius: 18px; background: #FFFDFA; }
.workload-panel legend { padding: 0 10px; margin-left: -10px; font: 600 14px/1.5 var(--font-display); letter-spacing: -.035em; }
.workload-grid { display: grid; grid-template-columns: 1fr .7fr 1.5fr; align-items: start; gap: 28px; }
.scenario-field { min-width: 0; }
.scenario-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; font-weight: 600; }
.number-field { position: relative; margin: 10px 0 9px; }
.number-field input { display: block; width: 100%; min-width: 0; padding: 13px 86px 13px 15px; font: 500 27px/1.3 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.025em; border: 1px solid #D8CBBE; border-radius: 10px; background: #FFFEFC; color: var(--ink); }
.number-field > span { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); font-size: 12px; }
.workload-panel .number-field input, .own-time-fields .number-field input { padding-right: 54px; }
.number-field input:hover { border-color: #A99682; }
.number-field input[aria-invalid="true"] { border-color: #AC452D; }
.number-field input:disabled { background: #F3F0EB; color: var(--muted); }
.scenario-field > p { font-size: 11px; line-height: 1.65; color: var(--muted); margin: 0; }
.scenario-field > .field-error { color: #A33F27; margin-bottom: 8px; }
.calculator-button:focus-visible, .number-field input:focus-visible, #human-factor:focus-visible, .agent-tool:focus-visible, .human-calculator summary:focus-visible, .own-time-toggle input:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.factor-field { padding-left: 27px; border-left: 1px solid var(--line); }
.factor-field output { background: #FFF0E4; color: #9D4525; border-radius: 7px; padding: 4px 9px; font-size: 14px; line-height: 1.2; }
#human-factor { display: block; width: 100%; height: 24px; margin: 10px 0 0; accent-color: #D64B27; cursor: pointer; }
.range-endpoints { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin: 0 2px 9px; }
.factor-field .factor-example { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
#human-factor-help strong { font-weight: 600; color: #9D4525; }
.budget-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.budget-path { display: flex; flex-direction: column; min-width: 0; border: 1px solid; border-radius: 18px; padding: 28px; }
.agent-path { background: #F1F6F2; border-color: #D4E0D7; }
.developer-path { background: #FFF1E7; border-color: #EED8C7; }
.path-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.path-symbol { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #C5D6CB; border-radius: 14px; background: #E3EFE7; color: #287B78; flex-shrink: 0; }
.path-symbol svg { width: 31px; height: 31px; }
.developer-path .path-symbol { background: #FFE3CE; border-color: #EFC9AB; color: #A65F36; }
.path-heading .micro { font-size: 9px; color: var(--muted); }
.path-heading h3 { font: 600 clamp(17px,2vw,23px)/1.4 var(--font-display); letter-spacing: -.04em; margin: 4px 0 0; }
.scenario-advanced { padding-top: 20px; margin-top: 22px; border-top: 1px solid #D4E0D7; }
.scenario-advanced summary { font-size: 12px; font-weight: 600; }
#own-hours-summary { font: 400 11px var(--font-body); color: var(--muted); white-space: nowrap; }
.own-time-toggle { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; margin: 18px 0; }
.own-time-toggle input { accent-color: #287B78; width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.own-time-fields { min-width: 0; padding: 0; border: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.own-time-fields label { font-size: 11px; }
.own-time-fields input { font-size: 22px; }
.path-note { font-size: 11px; line-height: 1.7; color: var(--muted); margin: 14px 0 22px; }
.human-equivalents { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-top: 1px solid #EED8C7; padding-top: 20px; margin-top: 22px; }
.human-equivalents b { display: block; font: 600 27px/1.2 var(--font-display); letter-spacing: -.04em; overflow-wrap: anywhere; }
.human-equivalents span { display: block; font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 8px; }
.budget-path > .path-note:last-child { margin-bottom: 0; }
.budget-track { height: 6px; background: #E8DFD5; border-radius: 8px; margin-top: 11px; overflow: hidden; }
.budget-track > span { display: block; height: 100%; border-radius: inherit; }
#developer-budget-bar { background: #E9A071; }
#ai-budget-bar { background: #287B78; }
.scenario-output { margin-top: 38px; overflow-wrap: anywhere; }
.savings-result { --result-ink: #287B78; --result-wash: #DDECE4; display: grid; grid-template-columns: minmax(0,1fr) 58px minmax(0,1.3fr); align-items: center; column-gap: 36px; row-gap: 28px; border-top: 1px solid #D7CBBE; padding: 34px 0 0; scroll-margin-top: 28px; }
.comparison-period { font: 500 11px var(--font-body); color: var(--muted); margin-bottom: 21px; }
.comparison-line + .comparison-line { margin-top: 23px; }
.comparison-line > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.comparison-line > div > span { font-size: 13px; }
.comparison-line strong { font: 600 clamp(22px,2.2vw,29px)/1.3 var(--font-display); letter-spacing: -.045em; text-align: right; }
.comparison-line strong > span { font: 400 14px var(--font-body); letter-spacing: 0; margin-left: 6px; white-space: nowrap; }
.result-arrow { color: #B4A492; }
.result-arrow svg { width: 58px; height: 38px; }
.savings-headline { min-width: 0; }
.savings-headline h3 { font: 500 19px/1.5 var(--font-body); margin-bottom: 12px; }
#savings-value { display: block; width: fit-content; max-width: 100%; color: var(--result-ink); font: 600 clamp(48px,5.6vw,76px)/1.22 var(--font-display); letter-spacing: -.06em; background: linear-gradient(transparent 78%,var(--result-wash) 78%,var(--result-wash) 94%,transparent 94%); }
#savings-value > span { font: 500 30px var(--font-body); letter-spacing: -.025em; margin-left: 10px; white-space: nowrap; }
#savings-percent { margin-top: 15px; color: var(--result-ink); font-size: 12px; font-weight: 500; }
#savings-percent:empty, #savings-explanation:empty { display: none; }
#savings-explanation { font-size: 12px; line-height: 1.7; color: var(--muted); margin-top: 12px; }
.result-footnotes { grid-column: 1 / -1; border-top: 1px dashed #D7CBBE; padding-top: 18px; }
#savings-assumption, .example-note { font-size: 11px; line-height: 1.7; color: var(--muted); }
.example-note { margin-top: 5px; }
.savings-result[data-state="empty"], .savings-result[data-state="equal"] { --result-ink: #71685E; --result-wash: #E7DED3; }
.savings-result[data-state="overrun"] { --result-ink: #A03E27; --result-wash: #F7D9C5; }
.calculation-details { margin-top: 18px; padding: 0 2px; }
.calculation-details summary { font-size: 12px; }
.calculation-details p { color: var(--muted); font-size: 11px; margin-top: 12px; }
.monthly-cost-heading { margin-top: 32px; }
body.motion-enabled .agent-breakdown.is-revealed .agent-sector { animation: sector-arrive .85s ease both; animation-delay: var(--sector-delay); transition: opacity .2s, stroke-width .2s; }
body.motion-enabled .budget-track > span { transition: width .25s ease; }
body.page-hidden .agent-sector { animation-play-state: paused !important; }
@keyframes sector-arrive { from { opacity: 0; stroke-width: 0; } to { opacity: 1; stroke-width: 40px; } }
body.motion-enabled .agent-sector.sector-muted { animation: none; opacity: .2; }
body.motion-enabled .agent-sector.sector-selected { animation: none; stroke-width: 46px; }
@media (max-width: 1100px) { .site-nav { flex-wrap: wrap; } .agent-donut-layout { grid-template-columns: 1fr; } .agent-donut { max-width: 230px; } }
@media (max-width: 900px) {
  .workload-grid { grid-template-columns: 1.3fr 1fr; gap: 20px; }
  .factor-field { grid-column: 1 / -1; padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid var(--line); }
  .budget-path { padding: 23px; }
  .own-time-fields { grid-template-columns: 1fr; }
  .savings-result { grid-template-columns: minmax(0,1fr) 32px minmax(0,1.2fr); column-gap: 20px; }
  .result-arrow svg { width: 32px; }
  .comparison-line strong { font-size: 22px; }
  .comparison-line strong > span { font-size: 12px; }
  .comparison-line > div > span { font-size: 11px; }
  #savings-value { font-size: 50px; }
  #savings-value > span { font-size: 22px; margin-left: 7px; }
}
@media (max-width: 720px) {
  .hero-layout { display: flex; flex-direction: column; gap: 20px; }
  .hero-practice { width: 100%; }
  .practice-metrics { grid-template-columns: 1fr; gap: 12px; }
  .metric-card { padding: 20px; }
  .metric-card > strong { font-size: 42px; margin: 12px 0 10px; }
  .process-work-grid { grid-template-columns: 1fr; }
  .process-work-grid .chart-card { padding: 23px 18px; }
  .agent-donut { max-width: 260px; }
  .donut-center > strong { font-size: 30px; }
  .agent-tool { padding: 12px; }
  .calculator-context { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 26px; }
  .calculator-origin strong { font-size: 12px; }
  .calculator-origin p { font-size: 11px; }
  .calculator-button { align-self: flex-start; padding: 9px 12px; font-size: 11px; }
  .workload-panel { padding: 18px; }
  .workload-panel legend { font-size: 12px; }
  .workload-grid { gap: 20px 12px; }
  .scenario-field label { font-size: 12px; }
  .number-field input { font-size: 25px; padding: 12px 80px 12px 13px; }
  .workload-panel .number-field input { padding-right: 35px; font-size: 21px; }
  .number-field > span { font-size: 11px; right: 11px; }
  .budget-paths { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .budget-path { padding: 23px 20px; }
  .path-heading h3 { font-size: 21px; }
  .human-equivalents b { font-size: 26px; }
  .own-time-fields { grid-template-columns: 1fr 1fr; }
  .own-time-fields label { font-size: 11px; }
  .own-time-fields input { font-size: 20px; padding-right: 36px; }
  .scenario-output { margin-top: 28px; }
  .savings-result { grid-template-columns: 1fr; padding-top: 24px; row-gap: 28px; }
  .result-arrow { display: none; }
  .comparison-line strong { font-size: 26px; }
  .comparison-line > div > span { font-size: 13px; }
  .comparison-period { margin-bottom: 20px; }
  .savings-headline { border-top: 1px solid #E0D5C9; padding-top: 23px; }
  .savings-headline h3 { font-size: 17px; }
  #savings-value { font-size: 54px; }
  .calculation-details summary { font-size: 11px; }
}
@media (max-width: 350px) {
  .workload-grid { grid-template-columns: 1fr; }
  .budget-path { padding: 20px 17px; }
  .path-heading h3 { font-size: 18px; }
  .own-time-fields { grid-template-columns: 1fr; }
  #savings-value { font-size: 41px; }
}
@media (prefers-reduced-motion: reduce) { .agent-sector, .budget-track > span { animation: none !important; transition: none !important; } }