/* ROI calculator design layer.
 *
 * The presentation layer for Components/Pages/RoiCalculatorPage.razor. Global
 * CSS linked from App.razor, so it follows the same three rules as
 * pages/book-demo.css and pages/free-trial.css:
 *
 * 1. Nothing confines these rules to this page, so every selector is qroi-
 *    prefixed or a descendant of one.
 * 2. @keyframes names are global too — hence qroi- on them, so they cannot
 *    collide with the compiled Tailwind bundle or the qh-/qbd-/qft-/pp-
 *    animations the other page sheets own.
 * 3. These rules are unlayered and Tailwind v4's utilities live inside @layer,
 *    so they win regardless of specificity. Every selector stays class-based —
 *    a bare element selector at the top level would leak site-wide.
 *
 * WHY HAND-WRITTEN CSS AND NOT UTILITIES. The Tailwind bundle in wwwroot is a
 * Next.js build artefact carrying only the utilities that build emitted, so an
 * arbitrary value this page invents renders as nothing. The wizard needs step
 * states, a connector rail and two gradient result tiles — all of which want
 * classes the bundle has never heard of. Owning the CSS removes the constraint,
 * which is why the page markup now carries qroi- classes instead of utilities.
 *
 * WHAT THIS FILE DOES NOT STYLE. <PageHero /> and <ConsentCheck /> render on
 * many other routes and keep their own markup. The hero is untouched; the
 * consent row is reached only through .qroi-consent, so the other six forms
 * that use the component are unaffected.
 *
 * Colour. The site ramp only: #4f46e5 → #7c3aed → #a22dea, over the dark violet
 * field #221049 → #140f33 used by the result tile. Emerald (#10b981) carries a
 * single meaning here — "done / saved" — and appears on the completed step
 * markers and the success panel and nowhere else.
 */

.qroi-page {
    position: relative;
    background:
        radial-gradient(ellipse 80% 46% at 50% 0%, #f4f1fe 0%, transparent 62%),
        linear-gradient(180deg, #fbfaff 0%, #fff 34%, #fff 100%);
}

/* ── hero ───────────────────────────────────────────────────────────── */
/* The page's own hero, not <PageHero />. That component renders on a dozen
   routes and paints a flat #6366f1→#a855f7 band, so the treatment below had to
   be built here rather than by overriding .hero-section, which would have
   repainted every one of those routes.
 *
 * The tall lower padding is structural, not decorative: .qroi-main pulls itself
 * up into it so the wizard card overlaps the dark field. */
.qroi-hero {
    position: relative;
    overflow: hidden;
    padding: 58px 0 132px;
    background:
        radial-gradient(ellipse 90% 58% at 78% -6%, #3d1d85 0%, transparent 58%),
        linear-gradient(158deg, #241150 0%, #1b1242 44%, #130e31 100%);
}

.qroi-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qroi-hero__bg > * {
    position: absolute;
    inset: 0;
    display: block;
}

/* Graph paper: a fine 24px ruling under a heavier 120px one. Two scales rather
   than one is what makes it read as a worksheet — which is what this page is —
   instead of as the single-scale mesh the demo page's hero uses. Masked to a
   corner so it fades out well before the copy. */
.qroi-hero__rule {
    opacity: .6;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
    -webkit-mask-image: radial-gradient(ellipse 76% 88% at 14% 6%, #000 0%, transparent 76%);
    mask-image: radial-gradient(ellipse 76% 88% at 14% 6%, #000 0%, transparent 76%);
}

/* A slow colour sweep across the field. If conic-gradient is unavailable the
   declaration is dropped and the hero still has its base gradient underneath. */
.qroi-hero__aurora {
    opacity: .34;
    background:
        conic-gradient(from 200deg at 72% 18%,
            rgba(162, 45, 234, .55) 0deg,
            rgba(79, 70, 229, .18) 96deg,
            transparent 190deg,
            rgba(124, 58, 237, .42) 320deg,
            rgba(162, 45, 234, .55) 360deg);
    filter: blur(46px);
    animation: qroi-drift 46s linear infinite;
}

@keyframes qroi-drift {
    to { transform: rotate(1turn); }
}

.qroi-hero__glow i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(96px);
    opacity: .8;
    animation: qroi-float 32s ease-in-out infinite;
}

.qroi-hero__glow i:nth-child(1) {
    width: 620px;
    height: 620px;
    top: -300px;
    right: -140px;
    background: radial-gradient(circle, rgba(162, 45, 234, .5), transparent 62%);
}

.qroi-hero__glow i:nth-child(2) {
    width: 540px;
    height: 540px;
    bottom: -300px;
    left: -120px;
    animation-delay: -12s;
    background: radial-gradient(circle, rgba(79, 70, 229, .48), transparent 62%);
}

/* The one cool note in the field. It sits behind the copy and keeps the three
   glows from reading as one violet smear. */
.qroi-hero__glow i:nth-child(3) {
    width: 360px;
    height: 360px;
    top: 26%;
    left: 46%;
    animation-delay: -22s;
    background: radial-gradient(circle, rgba(56, 189, 248, .2), transparent 64%);
}

@keyframes qroi-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    34%      { transform: translate(38px, 30px) scale(1.06); }
    67%      { transform: translate(-32px, -24px) scale(.94); }
}

/* Deepens the field's lower edge so the card overlaps a settling gradient
   rather than the brightest part of the hero. */
.qroi-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 190px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(19, 14, 49, .55));
}

.qroi-hero__in {
    position: relative;
    z-index: 5;
}

/* Breadcrumb. The separator is a pseudo-element rather than a character in the
   markup, so it is not read out as a word between the two labels. */
.qroi-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 600;
}

.qroi-crumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .58);
}

.qroi-crumbs li + li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .3);
}

.qroi-crumbs a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .18s;
}

.qroi-crumbs a:hover { color: #fff; }

.qroi-crumbs li:last-child span { color: rgba(255, 255, 255, .95); }

/* Eyebrow as a glass chip. The leading dot is the site ramp in miniature and
   ties the hero to the step markers below it. */
.qroi-hero__eyebrow { margin: 0 0 20px; }

.qroi-hero__eyebrow span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 13px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px);
}

.qroi-hero__eyebrow span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: linear-gradient(135deg, #c4b5fd, #a22dea);
    box-shadow: 0 0 0 4px rgba(162, 45, 234, .22);
}

/* The measure is set in ch on the title so "ROI Calculator" breaks after the
   acronym on a phone and stays on one line everywhere else. */
.qroi-hero__title {
    margin: 0 0 20px;
    max-width: 16ch;
    font-size: clamp(36px, 5.4vw, 62px);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: -.04em;
    color: #fff;
}

.qroi-hero__lede {
    margin: 0;
    max-width: 54ch;
    font-size: clamp(15.5px, 1.3vw, 18.5px);
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
}

/* Rides up over the hero's lower padding so the wizard reads as the point of
   the page rather than as the section after it. The pull is smaller than the
   hero's own bottom padding at every breakpoint, so nothing is clipped. */
.qroi-main {
    position: relative;
    z-index: 6;
    margin-top: -74px;
    padding-bottom: 88px;
}

.qroi-shell {
    position: relative;
    max-width: 940px;
}

/* ── progress rail ──────────────────────────────────────────────────── */
/* One row of four markers joined by a connector. The connector is a pseudo
   element on the item rather than a spacer span, so it can stretch to fill
   whatever width the row has left instead of being a fixed 24px stub. */
.qroi-rail {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    margin: 0 0 22px;
    padding: 16px 20px;
    list-style: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid #ece9fa;
    box-shadow: 0 24px 54px -40px rgba(79, 70, 229, .5);
    backdrop-filter: blur(10px);
}

.qroi-rail__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

/* The joining rule. Sits between this marker and the next one's badge; the
   right inset clears the gap the flex row leaves. */
.qroi-rail__item:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    min-width: 12px;
    margin: 0 12px 0 4px;
    border-radius: 99px;
    background: #e6e2f6;
    transition: background .3s ease;
}

.qroi-rail__item.is-done::after {
    background: linear-gradient(90deg, #7c3aed, #c4b5fd);
}

.qroi-rail__n {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #8b8aa3;
    background: #f2f1f9;
    border: 1px solid #e8e6f4;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.qroi-rail__l {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #9a98ae;
    white-space: nowrap;
    transition: color .25s ease;
}

/* Steps already left behind. Emerald, the page's one "done" colour. */
.qroi-rail__item.is-done .qroi-rail__n {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 10px 20px -12px rgba(5, 150, 105, .9);
}

.qroi-rail__item.is-done .qroi-rail__l { color: #475569; }

/* The live step. The halo is what separates it from the completed markers at a
   glance — colour alone would not, since both are filled. */
.qroi-rail__item.is-current .qroi-rail__n {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #4f46e5, #a22dea);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .16), 0 12px 24px -14px rgba(79, 70, 229, .95);
    transform: translateY(-1px);
}

.qroi-rail__item.is-current .qroi-rail__l { color: #0b1020; }

/* ── card ───────────────────────────────────────────────────────────── */
/* A gradient hairline rather than a flat border, so the card keeps an edge
   against both the tinted page field and the white below it. */
.qroi-card {
    position: relative;
    padding: 1.5px;
    border-radius: 26px;
    background: linear-gradient(155deg, rgba(124, 58, 237, .4), rgba(79, 70, 229, .16) 46%, rgba(226, 222, 246, .8));
    box-shadow: 0 44px 92px -54px rgba(31, 20, 74, .7), 0 10px 28px -22px rgba(15, 23, 42, .32);
}

.qroi-card__in {
    position: relative;
    overflow: hidden;
    padding: 32px 34px 34px;
    border-radius: 24.5px;
    background: linear-gradient(172deg, #fff 0%, #fdfcff 60%, #faf8ff 100%);
}

.qroi-card__in::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    top: -240px;
    right: -120px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(162, 45, 234, .14), transparent 66%);
}

/* Lifts content over the corner glow — a positioned pseudo-element paints above
   non-positioned siblings in the same stacking context. */
.qroi-panel {
    position: relative;
    z-index: 1;
    animation: qroi-rise .38s cubic-bezier(.22, .68, .36, 1) both;
}

@keyframes qroi-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ── panel heading ──────────────────────────────────────────────────── */
/* The accent bar is the only ornament: it marks where a step begins without
   adding a word of copy. */
.qroi-panel__title {
    position: relative;
    margin: 0;
    padding-left: 15px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #0b1020;
}

.qroi-panel__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 99px;
    background: linear-gradient(180deg, #4f46e5, #a22dea);
}

.qroi-panel__note {
    margin: 9px 0 0 15px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #6f6d85;
    max-width: 62ch;
}

.qroi-panel__head { margin-bottom: 26px; }

/* ── fields ─────────────────────────────────────────────────────────── */
.qroi-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(var(--qroi-cols, 1), minmax(0, 1fr));
}

.qroi-grid--2 { --qroi-cols: 2; }
.qroi-grid--3 { --qroi-cols: 3; }

.qroi-field { display: block; min-width: 0; }

.qroi-field__l {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .005em;
    color: #334155;
}

.qroi-input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 13px;
    border: 1px solid #e6e3f5;
    background: #fbfaff;
    color: #0b1020;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.qroi-input::placeholder { color: #a3a0bb; font-weight: 500; }

.qroi-input:hover { border-color: #d6d0f0; }

.qroi-input:focus {
    outline: none;
    background: #fff;
    border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .14), 0 1px 2px rgba(15, 23, 42, .05);
}

/* The spinners on the number fields are noise here — every one of these inputs
   is a figure typed in, not nudged one at a time. */
.qroi-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.qroi-input[type="number"]::-webkit-outer-spin-button,
.qroi-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qroi-help {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: #6f6d85;
}

.qroi-help a {
    color: #5b21b6;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.qroi-help a:hover { color: #4f46e5; }

/* ── phone (dial code + number) ─────────────────────────────────────── */
.qroi-phone {
    display: flex;
    align-items: stretch;
    gap: 9px;
}

.qroi-phone__dial {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    width: 96px;
    padding: 0 6px 0 13px;
    border-radius: 13px;
    border: 1px solid #e6e3f5;
    background: #f4f1fd;
    color: #6b7280;
    font-size: 14.5px;
    transition: border-color .18s, box-shadow .18s;
}

.qroi-phone__dial:focus-within {
    border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .14);
}

.qroi-phone__dial input {
    width: 100%;
    padding: 11px 0;
    border: 0;
    background: transparent;
    color: #0b1020;
    font-size: 14.5px;
    font-weight: 700;
}

.qroi-phone__dial input:focus { outline: none; }

/* ── plan choice ────────────────────────────────────────────────────── */
.qroi-choices {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A radio group drawn as cards. The mark on the right is the state — the fill
   and border shift too, but on a tinted card those read as decoration, and a
   choice needs one unambiguous "this one" signal. */
.qroi-choice {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    padding: 19px 52px 19px 20px;
    border-radius: 18px;
    border: 1.5px solid #e8e5f6;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}

.qroi-choice:hover {
    border-color: #cfc6f0;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -26px rgba(79, 70, 229, .8);
}

.qroi-choice__t {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: #0b1020;
}

.qroi-choice__d {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
}

.qroi-choice__mark {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 21px;
    height: 21px;
    margin-top: -10.5px;
    border-radius: 99px;
    border: 2px solid #ded9f2;
    background: #fff;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.qroi-choice__mark::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 99px;
    background: #fff;
    transform: scale(0);
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.qroi-choice.is-on {
    border-color: #7c3aed;
    background: linear-gradient(135deg, #faf8ff, #f4f0fe);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .1);
}

.qroi-choice.is-on .qroi-choice__mark {
    border-color: #7c3aed;
    background: linear-gradient(135deg, #4f46e5, #a22dea);
}

.qroi-choice.is-on .qroi-choice__mark::after { transform: scale(1); }

/* ── results ────────────────────────────────────────────────────────── */
.qroi-stats {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 22px;
}

.qroi-stat {
    position: relative;
    overflow: hidden;
    padding: 26px 26px 28px;
    border-radius: 22px;
    color: #fff;
    box-shadow: 0 30px 60px -34px rgba(24, 15, 58, .85);
}

.qroi-stat::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    top: -170px;
    right: -90px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 66%);
}

.qroi-stat--brand {
    background: linear-gradient(140deg, #4f46e5 0%, #7c3aed 52%, #a22dea 100%);
}

.qroi-stat--ink {
    background: linear-gradient(150deg, #221049 0%, #1a1240 48%, #140f33 100%);
}

.qroi-stat__k {
    position: relative;
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
}

/* clamp() rather than a fixed size: "No cost to recover" and "$1,284,000" land
   in the same box, and neither may wrap to three lines. */
.qroi-stat__v {
    position: relative;
    margin: 0;
    font-size: clamp(26px, 3.1vw, 36px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}

/* Breakdown. Rows rather than a ruled grid — the label/figure pairing is what
   carries the table, so the leader dots do the aligning and no border is
   needed between them. */
.qroi-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 26px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ebe8f8;
    box-shadow: 0 22px 48px -40px rgba(79, 70, 229, .55);
}

.qroi-table tr { transition: background .16s; }

.qroi-table tr:nth-child(odd) { background: #fcfbff; }

.qroi-table tr:hover { background: #f6f3fe; }

.qroi-table th {
    text-align: left;
    font-size: 13.5px;
    font-weight: 600;
    color: #55536b;
    padding: 15px 24px;
}

.qroi-table td {
    text-align: right;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
    color: #0b1020;
    padding: 15px 24px;
}

/* ── verification code ──────────────────────────────────────────────── */
.qroi-code {
    max-width: 260px;
    padding: 15px 12px;
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    letter-spacing: .42em;
    text-indent: .42em;
    color: #1e1b4b;
    background: #fff;
}

.qroi-emphasis { color: #0b1020; font-weight: 700; }

/* ── messages ───────────────────────────────────────────────────────── */
.qroi-error {
    position: relative;
    margin: 0 0 18px;
    padding: 12px 16px 12px 18px;
    border-radius: 13px;
    border: 1px solid #fecdd3;
    border-left: 0;
    background: #fff5f6;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    color: #be123c;
}

.qroi-error::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 13px 0 0 13px;
    background: #f43f5e;
}

/* Emerald again — the same "done" this page uses on completed step markers. */
.qroi-done {
    position: relative;
    z-index: 1;
    padding: 22px 24px;
    border-radius: 20px;
    border: 1px solid #a7f3d0;
    background: linear-gradient(135deg, #f0fdf7, #ecfdf5);
    font-size: 14.5px;
    line-height: 1.7;
    color: #065f46;
    box-shadow: 0 22px 46px -38px rgba(5, 150, 105, .8);
    animation: qroi-rise .38s cubic-bezier(.22, .68, .36, 1) both;
}

.qroi-done__sub {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(6, 95, 70, .8);
}

/* ── consent ────────────────────────────────────────────────────────── */
/* Boxed so the one thing being agreed to is not a loose line of small print
   between the last field and the submit button. <ConsentCheck /> owns its own
   markup and renders on six other routes, so everything here is a descendant
   of this wrapper. */
.qroi-consent {
    margin-bottom: 22px;
    padding: 14px 16px;
    border-radius: 15px;
    border: 1px solid #eceaf7;
    background: #fcfcfe;
}

.qroi-consent input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #7c3aed;
    cursor: pointer;
}

/* ── buttons ────────────────────────────────────────────────────────── */
/* .startFreeTrial and .bookADemo come from the compiled Tailwind bundle and
   keep their fills — only geometry, shadow and the pressed states change. */
.qroi-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.qroi-btns button,
.qroi-nav button {
    padding: 13px 28px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: transform .18s, box-shadow .18s, border-color .18s, opacity .18s;
}

.qroi-btns button.startFreeTrial,
.qroi-nav button.startFreeTrial {
    box-shadow: 0 16px 34px -14px rgba(79, 70, 229, .75), 0 2px 6px -2px rgba(79, 70, 229, .3);
}

.qroi-btns button.startFreeTrial:hover:not(:disabled),
.qroi-nav button.startFreeTrial:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px -14px rgba(79, 70, 229, .85), 0 3px 8px -2px rgba(79, 70, 229, .35);
}

.qroi-btns button.startFreeTrial:active:not(:disabled),
.qroi-nav button.startFreeTrial:active:not(:disabled) { transform: translateY(0); }

.qroi-btns button.bookADemo:hover:not(:disabled),
.qroi-nav button.bookADemo:hover:not(:disabled) { border-color: #cfc6f0; }

.qroi-btns button:disabled,
.qroi-nav button:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* The text-only escape hatch under the code field. */
.qroi-skip {
    font-size: 12.5px;
    font-weight: 600;
    color: #6d6a86;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.qroi-skip:hover { color: #4f46e5; }

/* Wizard navigation. Continue sits at the trailing edge and Back at the
   leading one, so the forward action lands under the thumb on a phone and in
   the same place on every step. */
.qroi-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.qroi-nav__next { margin-left: auto; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Four labelled markers in one row stop fitting well before the card does.
       The rail wraps to a two-column grid and the connectors go, since a rule
       between wrapped rows would point at the wrong neighbour. */
    .qroi-rail {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 12px;
        padding: 16px;
    }

    .qroi-rail__item:not(:last-child)::after { display: none; }

    .qroi-grid--3 { --qroi-cols: 2; }
}

@media (max-width: 640px) {
    /* Both numbers shrink together — the pull must stay well inside the hero's
       bottom padding or the card clips the field it is meant to overlap. */
    .qroi-hero { padding: 40px 0 104px; }
    .qroi-hero__title { max-width: none; }
    .qroi-hero__rule { background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px; }

    .qroi-main { margin-top: -58px; padding-bottom: 56px; }

    .qroi-card__in { padding: 24px 20px 26px; }

    .qroi-panel__title { font-size: 18px; }

    .qroi-grid--2,
    .qroi-grid--3 { --qroi-cols: 1; }

    .qroi-choices,
    .qroi-stats { grid-template-columns: minmax(0, 1fr); }

    .qroi-rail__l { font-size: 12px; white-space: normal; }

    .qroi-stat { padding: 22px 20px 24px; }

    .qroi-table th,
    .qroi-table td { padding: 13px 16px; }

    .qroi-code { max-width: none; font-size: 22px; letter-spacing: .3em; text-indent: .3em; }

    .qroi-phone__dial { width: 88px; }

    /* Full-width controls read as one column on a phone; auto margins would
       leave Continue floating on its own row. */
    .qroi-btns button,
    .qroi-nav button { flex: 1 1 100%; }

    .qroi-nav { flex-wrap: wrap; }
    .qroi-nav__next { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .qroi-hero__glow i,
    .qroi-hero__aurora { animation: none !important; }

    .qroi-panel,
    .qroi-done { animation: none !important; }

    .qroi-choice:hover,
    .qroi-btns button:hover,
    .qroi-nav button:hover { transform: none !important; }
}