.roi-page { padding-bottom: 4rem; }
.roi-header { grid-template-columns: 1fr auto; }
.roi-breadcrumb { margin: 1.5rem 0; font-size: .875rem; color: var(--muted); }
.roi-breadcrumb a { text-decoration: underline; }
.roi-intro { max-width: 52rem; margin-bottom: 1.75rem; }
.roi-intro h1 { margin: .75rem 0; font-family: var(--display); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; letter-spacing: -.035em; }
.roi-page p, .roi-page li { font-size: 1rem; line-height: 1.65; }
.roi-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; scroll-margin-top: 1rem; }
.roi-inputs, .roi-results { min-width: 0; padding: 1.75rem; border: 1px solid var(--line); background: var(--white); }
.roi-page h2 { margin: 0 0 1rem; font-family: var(--display); font-size: 1.5rem; line-height: 1.25; }
.roi-page .roi-note, .roi-page .roi-help { color: var(--muted); font-size: .875rem; }
.roi-inputs fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.roi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.roi-field { min-width: 0; }
.roi-field label { display: block; min-height: 3rem; margin-bottom: .5rem; font-size: .875rem; line-height: 1.5; font-weight: 700; }
.roi-field input { width: 100%; min-height: 3rem; padding: .625rem .75rem; border: 1px solid var(--muted); background: var(--paper); color: var(--ink); font-size: 1.125rem; }
.roi-page .roi-help { margin: .5rem 0 0; }
.roi-page .roi-error { min-height: 2.8em; margin: .375rem 0 0; font-size: .875rem; color: #8c2f15; line-height: 1.4; }
.roi-field input[aria-invalid="true"] { outline: 2px solid #8c2f15; outline-offset: -2px; }
.roi-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.roi-actions button { min-height: 2.75rem; padding: .75rem 1rem; border: 1px solid var(--ink); font-size: .9375rem; cursor: pointer; background: transparent; color: var(--ink); }
.roi-actions button[type="submit"] { background: var(--ink); color: var(--white); }
.roi-actions button:disabled { opacity: .6; cursor: default; }
.roi-page :focus-visible, .roi-header :focus-visible, .roi-footer :focus-visible { outline: 3px solid #954011; outline-offset: 3px; }
.roi-page .roi-status { min-height: 5.5rem; margin: 0; padding: 1.25rem; background: var(--ink); color: var(--white); font-weight: 700; }
.roi-metrics { margin: 1rem 0; }
.roi-metrics > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; min-height: 4.75rem; padding: .875rem 0; border-bottom: 1px solid var(--line); }
.roi-metrics dt { font-size: .875rem; line-height: 1.5; color: var(--muted); }
.roi-metrics dd { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.roi-explainer { max-width: 50rem; margin-top: 2.5rem; }
.roi-explainer section { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.roi-explainer summary { cursor: pointer; padding: .75rem 0; font-size: 1rem; font-weight: 700; }
.roi-explainer li { margin-bottom: .5rem; }
.roi-footer { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--line); font-size: .875rem; }
.roi-skip { position: absolute; top: -10rem; left: 1rem; z-index: 100; padding: 1rem; background: var(--white); }
.roi-skip:focus { top: 1rem; }
.roi-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 800px) {
  .roi-layout { grid-template-columns: 1fr; }
  .roi-header { display: flex; flex-wrap: wrap; height: auto; min-height: 4.875rem; gap: 1rem; padding: 1.125rem 1.5rem; }
  .roi-header nav { display: flex; flex-wrap: wrap; gap: 1rem; }
}
@media (max-width: 440px) {
  .roi-inputs, .roi-results { padding: 1rem; }
  .roi-fields, .roi-metrics > div { grid-template-columns: 1fr; }
  .roi-metrics > div { gap: .375rem; }
  .roi-field label { min-height: 0; }
  .roi-header .brand { font-size: 1rem; }
  .roi-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }