/* Pricing is the pricing artwork itself, used exactly. Its drawn buttons are
   made real by transparent controls positioned over them, in percentages of
   the artwork so they stay on their buttons at any width. */
.pr-art { padding-bottom: 32px; background: #FFFFFF; }
.pr-frame { position: relative; max-width: 1152px; margin-inline: auto; }
.pr-frame img { display: block; width: 100%; height: auto; }
.pr-hit { position: absolute; overflow: hidden; padding: 0; border: 0; border-radius: 6px; background: transparent; color: transparent; font-size: 1px; white-space: nowrap; cursor: pointer; }
.pr-hit:focus-visible { outline: 3px solid #1F6FE5; outline-offset: 2px; }
.pr-hit-foundation { left: 4.080%; top: 46.000%; width: 12.760%; height: 2.609%; }
.pr-hit-growth { left: 19.965%; top: 46.000%; width: 12.674%; height: 2.609%; }
.pr-hit-scale { left: 35.764%; top: 46.000%; width: 12.674%; height: 2.609%; }
.pr-hit-enterprise { left: 51.389%; top: 46.000%; width: 12.760%; height: 2.609%; }
.pr-hit-portfolio { left: 67.274%; top: 46.000%; width: 12.847%; height: 2.609%; }
.pr-hit-strategic { left: 83.247%; top: 46.000%; width: 12.934%; height: 2.609%; }
.pr-hit-implementation { left: 36.892%; top: 85.391%; width: 17.795%; height: 1.913%; }
.pr-hit-roi { left: 10.417%; top: 95.130%; width: 14.757%; height: 2.609%; }

/* The ROI calculator. A native <dialog>: focus is trapped, Escape closes it,
   and the page behind is inert, without a line of script for any of that. */
.roi { width: min(940px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 16px; background: #FFFFFF; color: #0C1B3A; box-shadow: 0 40px 80px -30px rgba(6, 18, 40, 0.55); font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif; }
.roi::backdrop { background: rgba(8, 24, 48, 0.62); }
.roi-card { padding: 28px; }
.roi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.roi-kicker { margin: 0 0 6px; color: #1F6FE5; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.roi-head h2 { margin: 0; font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.roi-head p { margin: 6px 0 0; color: #55677E; font-size: 14.5px; }
.roi-close { flex: none; width: 40px; height: 40px; border: 1px solid #E2E9F2; border-radius: 50%; background: #FFFFFF; color: #55677E; font-size: 22px; line-height: 1; cursor: pointer; }
.roi-close:hover { background: #F5F8FE; }
.roi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.roi-inputs { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.roi-inputs legend { margin-bottom: 2px; padding: 0; color: #55677E; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.roi-inputs label { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.roi-inputs output { flex: none; color: #1F6FE5; font-variant-numeric: tabular-nums; }
.roi-inputs input[type="number"] { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #CBD6E6; border-radius: 8px; background: #FFFFFF; color: #0C1B3A; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; }
.roi-inputs input[type="range"] { width: 100%; margin: 6px 0 0; accent-color: #1F6FE5; }
.roi-hint { margin: 2px 0 0; color: #7F90A6; font-size: 12.5px; }
.roi input:focus-visible, .roi-close:focus-visible, .roi-cta:focus-visible { outline: 3px solid #4A93FF; outline-offset: 2px; }
.roi-results { padding: 20px; border-radius: 12px; background: #0C1B3A; color: #FFFFFF; }
.roi-plan { margin: 0 0 14px; color: #C3D1E6; font-size: 14px; line-height: 1.45; }
.roi-plan strong { color: #FFFFFF; }
.roi-results dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.roi-results dl > div { padding: 12px; border: 1px solid rgba(143, 182, 255, 0.24); border-radius: 10px; }
.roi-results dt { color: #9DB0CB; font-size: 12.5px; }
.roi-results dd { margin: 4px 0 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.roi-results dl > .is-lead { grid-column: 1 / -1; }
.roi-results .is-lead dd { color: #7CC4FF; font-size: 36px; }
.roi-results dd.is-negative, .roi-results .is-lead dd.is-negative { color: #FF8A8E; }
.roi-impl { margin: 14px 0 0; color: #C3D1E6; font-size: 13.5px; }
.roi-cta { display: inline-flex; margin-top: 16px; padding: 12px 18px; border-radius: 8px; background: #1F6FE5; color: #FFFFFF; font-weight: 600; text-decoration: none; }
.roi-cta:hover { background: #1558C4; }
.roi-note { margin: 12px 0 0; color: #9DB0CB; font-size: 12px; }
@media (max-width: 720px) {
  .roi-card { padding: 20px; }
  .roi-grid { grid-template-columns: minmax(0, 1fr); }
}