/* ArzDigital ROI visual refinement — scoped to the ROI calculator only. */
.roi-page {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    padding-bottom: clamp(14px, 2vw, 28px);
}
.roi-page .roi-hero {
    border: 1px solid rgba(255,255,255,.15);
    border-radius: clamp(20px, 2.4vw, 32px);
    box-shadow: 0 24px 70px rgba(10, 34, 53, .18), inset 0 1px 0 rgba(255,255,255,.12);
    background:
        radial-gradient(ellipse at 7% 0%, rgba(45,212,191,.24), transparent 37%),
        radial-gradient(ellipse at 94% 88%, rgba(96,165,250,.17), transparent 38%),
        linear-gradient(126deg, #0b1728 0%, #12344a 52%, #0d4b4a 100%);
}
.roi-page .roi-eyebrow {
    letter-spacing: .04em;
    padding: 7px 11px;
    border: 1px solid rgba(128,241,221,.22);
    border-radius: 999px;
    background: rgba(7,27,42,.25);
}
.roi-page .roi-hero h1 {
    max-width: 760px;
    text-wrap: balance;
    letter-spacing: -.035em;
}
.roi-page .roi-hero p { max-width: 700px; }
.roi-page .roi-hero-pills span {
    min-height: 36px;
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
}
.roi-page .roi-hero-footer { border-color: rgba(255,255,255,.16); }
.roi-page .roi-hero-footer strong { font-variant-numeric: tabular-nums; }
.roi-page .roi-calculator-card,
.roi-page .roi-side-card,
.roi-page .roi-faq-section {
    border-radius: 22px;
    box-shadow: 0 12px 36px rgba(16, 36, 58, .055), 0 1px 2px rgba(16,36,58,.035);
}
.dark .roi-page .roi-calculator-card,
.dark .roi-page .roi-side-card,
.dark .roi-page .roi-faq-section {
    box-shadow: 0 14px 36px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.018);
}
.roi-page .roi-calculator-card { position: relative; overflow: hidden; }
.roi-page .roi-calculator-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #0f9f91, #60a5fa, #a78bfa);
    opacity: .9;
}
.roi-page .roi-card-heading-icon,
.roi-page .roi-side-icon {
    border: 1px solid rgba(15,159,145,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 6px 16px rgba(15,159,145,.07);
}
.roi-page .roi-mode-tabs,
.roi-page .roi-quote-tabs { box-shadow: inset 0 1px 2px rgba(17,36,56,.035); }
.roi-page .roi-mode-tabs button,
.roi-page .roi-quote-tabs button,
.roi-page .roi-periods button { min-height: 39px; }
.roi-page .roi-mode-tabs button.is-active,
.roi-page .roi-quote-tabs button.is-active {
    box-shadow: 0 4px 12px rgba(16,36,58,.075);
}
.roi-page .roi-input-frame,
.roi-page .roi-search-wrap,
.roi-page .roi-field select { border-radius: 14px; }
.roi-page .roi-input-frame:focus-within,
.roi-page .roi-search-wrap:focus-within,
.roi-page .roi-field select:focus {
    box-shadow: 0 0 0 4px rgba(20,184,166,.13);
}
.roi-page .roi-submit {
    min-height: 47px;
    border-radius: 13px;
    background: linear-gradient(115deg, #0e9488 0%, #08796f 100%);
    box-shadow: 0 9px 22px rgba(11,148,136,.23), inset 0 1px 0 rgba(255,255,255,.19);
}
.roi-page .roi-result-tile,
.roi-page .roi-detail-grid > div,
.roi-page .roi-chart-panel {
    border-radius: 15px;
}
.roi-page .roi-result-tile { min-height: 112px; }
.roi-page .roi-chart-panel { box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.roi-page .roi-side-card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.roi-page .roi-side-card:hover {
    border-color: color-mix(in srgb, var(--roi-teal) 35%, var(--roi-border));
    box-shadow: 0 15px 40px rgba(16,36,58,.08);
}
.dark .roi-page .roi-side-card:hover { box-shadow: 0 15px 40px rgba(0,0,0,.2); }
.roi-page .roi-step-number { box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.roi-page .roi-faq-item summary { border-radius: 10px; transition: color .15s ease; }
.roi-page .roi-faq-item summary:hover { color: var(--roi-teal); }
.roi-page button:focus-visible,
.roi-page a:focus-visible,
.roi-page summary:focus-visible,
.roi-page input:focus-visible,
.roi-page select:focus-visible {
    outline: 3px solid rgba(45,212,191,.82);
    outline-offset: 3px;
}
@media (min-width: 981px) {
    .roi-page .roi-workspace { gap: 22px; }
    .roi-page .roi-side-column { gap: 18px; }
    .roi-page .roi-side-card { padding: 23px; }
}
@media (max-width: 640px) {
    .roi-page { font-size: 13px; }
    .roi-page .roi-hero { box-shadow: 0 15px 38px rgba(10,34,53,.13); }
    .roi-page .roi-calculator-card,
    .roi-page .roi-side-card,
    .roi-page .roi-faq-section { border-radius: 18px; }
    .roi-page .roi-hero-pills { gap: 7px; margin-top: 17px; }
    .roi-page .roi-hero-pills span { font-size: 10px; padding: 7px 9px; }
    .roi-page .roi-hero-footer { gap: 12px; }
    .roi-page .roi-result-tile { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .roi-page .roi-side-card,
    .roi-page .roi-faq-item summary { transition: none; }
}