.cfo-mri { --navy: #052141; --blue: #2b65a0; --blue2: #265082; --sky: #8fb8e6; --ink: #1b2a3d; --mute: #5b6a7d; --line: #dbe4ef; --soft: #f3f7fb; --green: #2f8f5b; --yellow: #d9a441; --orange: #d9772b; --red: #c0392b;
max-width: 960px; margin: 0 auto; color: var(--ink); font-family: Inter, Arial, sans-serif; }
.cfo-mri *, .cfo-mri *::before, .cfo-mri *::after { box-sizing: border-box; }
.cfo-mri__static { max-width: 760px; }
.mri-wrap { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 44px 48px; box-shadow: 0 40px 70px -46px rgba(5, 33, 65, .45); position: relative; overflow: hidden; }
.mri-wrap::before { content: ""; position: absolute; right: 0; top: 0; width: 38%; height: 150px; background: rgba(43, 101, 160, .05); clip-path: polygon(100% 0, 0 0, 100% 100%); pointer-events: none; }
.mri-wrap > * { position: relative; }
.mri-kicker, .cfo-mri__kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.mri-kicker::before { content: ""; width: 34px; height: 2px; background: var(--blue); }
.mri-badge { padding: 4px 10px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--blue2); letter-spacing: .06em; font-size: 11px; }
.cfo-mri .mri-h1, .cfo-mri .cfo-mri__h1 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; font-weight: 700; color: var(--navy); letter-spacing: 0; }
.mri-h1--result small { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.mri-lead, .cfo-mri__lead { margin: 0 0 18px; max-width: 62ch; font-size: 18px; line-height: 1.65; color: var(--mute); }
.mri-facts, .cfo-mri__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 28px; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--blue2); }
.mri-facts li::before, .cfo-mri__facts li::before { content: "\2713"; margin-right: 8px; color: var(--green); }
.mri-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--mute); }
.mri-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; padding: 26px 30px; border-radius: 20px; background: linear-gradient(135deg, #052141, #0b3a6b 60%, #1b4f8a); color: #fff; box-shadow: 0 30px 50px -34px rgba(5, 33, 65, .7); }
.mri-start p { margin: 6px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.mri-start__meta { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.mri-start .mri-btn--primary { background: #fff; color: var(--navy); }
.mri-btn--big { padding: 18px 34px; font-size: 17px; }
.mri-resume { margin: 0 0 24px; padding: 16px 20px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); }
.mri-resume p { margin: 0 0 10px; font-weight: 600; }
.mri-progress { height: 6px; margin: 4px 0 18px; border-radius: 6px; background: var(--line); overflow: hidden; }
.mri-progress span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--blue), #6aa0d8); transition: width .4s ease; }
.mri-step { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--mute); text-transform: uppercase; }
.cfo-mri .mri-q { margin: 0 0 8px; font-size: clamp(24px, 3vw, 32px); line-height: 1.25; font-weight: 700; color: var(--navy); letter-spacing: 0; }
.mri-hint { margin: 0 0 14px; color: var(--mute); font-size: 15px; }
.mri-opts { display: grid; gap: 12px; margin: 22px 0 24px; }
.mri-opt { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 14px 20px; text-align: left; cursor: pointer; font: 600 17px/1.35 Inter, Arial, sans-serif; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 14px; transition: border-color .2s, background .2s, transform .15s, box-shadow .2s; }
.mri-opt:hover { border-color: var(--blue); background: var(--soft); }
.mri-opt:active { transform: scale(.995); }
.mri-opt__n { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--blue2); }
.mri-opt.is-picked { border-color: var(--blue); background: #eaf2fb; box-shadow: 0 0 0 3px rgba(43, 101, 160, .14); }
.mri-opt.is-picked .mri-opt__n { background: var(--blue); border-color: var(--blue); color: #fff; }
.mri-opt.is-unk { font-weight: 500; color: var(--mute); border-style: dashed; }
.mri-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.mri-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent; font: 600 15px/1 Inter, Arial, sans-serif; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.mri-btn--primary { background: linear-gradient(135deg, #2f6cab, #1b4f8a); color: #fff; box-shadow: 0 14px 26px -14px rgba(5, 33, 65, .7); }
.mri-btn--primary:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 20px 30px -14px rgba(5, 33, 65, .75); }
.mri-btn--light { background: #fff; color: var(--navy); }
.mri-btn--ghost { background: transparent; color: var(--blue2); border-color: var(--line); }
.mri-btn--ghost:hover { border-color: var(--blue); background: var(--soft); }
.mri-btn:disabled { opacity: .6; cursor: default; } .mri-card { position: relative; }
.mri-prelim { display: inline-block; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: #eaf2fb; color: var(--blue2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mri-profile { margin: 0; font-size: 20px; font-weight: 600; color: var(--blue2); }
.mri-alert { margin: 18px 0 0; padding: 16px 20px; border-radius: 14px; background: #fff6e5; border: 1px solid #f0d9a6; }
.mri-alert p { margin: 6px 0 0; line-height: 1.55; }
.mri-alert--soft { background: var(--soft); border-color: var(--line); }
.mri-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; margin: 28px 0 8px; align-items: start; }
.mri-matrix { display: grid; gap: 8px; }
.mri-matrix__y { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); text-align: center; }
.mri-matrix__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mri-cell { position: relative; display: flex; flex-direction: column; gap: 6px; justify-content: center; min-height: 118px; padding: 16px 16px 18px; border-radius: 14px; border: 1.5px solid transparent; font-size: 13px; line-height: 1.4; }
.mri-cell strong { font-size: 14px; color: var(--navy); }
.mri-cell span { color: var(--mute); }
.mri-cell--1 { background: #e9f5ee; } .mri-cell--2 { background: #fdf3de; } .mri-cell--3 { background: #fbe9dc; } .mri-cell--4 { background: #f9e1de; }
.mri-cell.is-mine { background: linear-gradient(135deg, #052141, #1b4f8a); border-color: transparent; box-shadow: 0 20px 34px -18px rgba(5, 33, 65, .7); }
.mri-cell.is-mine strong, .mri-cell.is-mine span { color: #fff; }
.mri-cell.is-likely { border: 2px dashed var(--blue); }
.mri-cell__badge { align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--sky); color: var(--navy) !important; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mri-cell__badge--q { background: #fff; border: 1px dashed var(--blue); }
.mri-matrix__x { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 600; color: var(--mute); }
.mri-risk { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; padding: 14px 18px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); }
.mri-risk span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.mri-risk b { font-size: 22px; color: var(--navy); }
.mri-risk--1 { color: var(--green) !important; } .mri-risk--2 { color: #5d9b3a !important; } .mri-risk--3 { color: var(--yellow) !important; } .mri-risk--4 { color: var(--orange) !important; } .mri-risk--5 { color: var(--red) !important; }
.mri-h3 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.mri-h4 { margin: 18px 0 8px; font-size: 15px; font-weight: 700; color: var(--navy); }
.mri-idxs { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.mri-idx__row { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 600; }
.mri-idx__row b { font-size: 18px; color: var(--navy); }
.mri-idx__row em { font-style: normal; font-weight: 500; font-size: 13px; color: var(--mute); }
.mri-bar { height: 10px; margin: 6px 0 4px; border-radius: 10px; background: var(--line); overflow: hidden; }
.mri-bar span { display: block; height: 100%; border-radius: 10px; transition: width .8s cubic-bezier(.22, .8, .2, 1); }
.mri-idx--green .mri-bar span { background: var(--green); } .mri-idx--yellow .mri-bar span { background: var(--yellow); } .mri-idx--orange .mri-bar span { background: var(--orange); } .mri-idx--red .mri-bar span { background: var(--red); }
.mri-idx__meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); }
.mri-sec { margin: 30px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.mri-sec p { margin: 0 0 10px; line-height: 1.65; font-size: 16px; }
.mri-weak { font-weight: 600; color: var(--blue2); }
.mri-support, .mri-verify { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mri-support li { padding: 12px 16px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.mri-q-s { display: block; font-size: 13px; color: var(--mute); margin-bottom: 2px; }
.mri-causes { margin: 0; padding-left: 22px; display: grid; gap: 10px; line-height: 1.6; font-size: 16px; }
.mri-verify li { position: relative; padding-left: 22px; line-height: 1.55; color: var(--mute); }
.mri-verify li::before { content: "?"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--blue); }
.mri-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mri-acts--one { grid-template-columns: 1fr; }
.mri-act { padding: 18px 20px; border-radius: 16px; background: linear-gradient(180deg, #fff, var(--soft)); border: 1px solid var(--line); }
.mri-act span { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.mri-act p { margin: 0; font-size: 15px; line-height: 1.55; }
.mri-sec--q blockquote { margin: 0; padding: 20px 24px; border-left: 4px solid var(--blue); border-radius: 0 14px 14px 0; background: #eaf2fb; font-size: 20px; line-height: 1.5; font-weight: 600; color: var(--navy); }
.mri-upsell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; padding: 18px 22px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); }
.mri-upsell p { margin: 0; max-width: 56ch; line-height: 1.55; }
.mri-next { padding: 28px 30px; margin-top: 34px; border: 0; border-radius: 20px; background: linear-gradient(135deg, #052141, #0b3a6b 60%, #1b4f8a); color: #fff; }
.mri-next .mri-h3 { color: var(--sky); }
.mri-next p { color: rgba(255, 255, 255, .9); }
.mri-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mri-next .mri-btn--primary { background: #fff; color: var(--navy); }
.mri-next .mri-btn--primary:hover { color: var(--navy); }
.mri-next .mri-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.mri-next .mri-btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.mri-disclaimer { margin: 22px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--mute); }
.mri-error { color: var(--red); } .mri-form { margin-top: 22px; padding: 26px 28px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line); }
.mri-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.mri-form label { display: block; font-size: 13px; font-weight: 600; color: var(--mute); }
.mri-form input[type=text], .mri-form input[type=email], .mri-form input[type=tel] { display: block; width: 100%; height: 50px; margin-top: 6px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: 500 16px Inter, Arial, sans-serif; color: var(--ink); }
.mri-form input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43, 101, 160, .15); }
.mri-check { display: flex !important; align-items: flex-start; gap: 12px; margin: 12px 0; font-weight: 500 !important; line-height: 1.5; color: var(--ink) !important; }
.mri-check input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.mri-check a { color: var(--blue); text-decoration: underline; }
.mri-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mri-form__msg { min-height: 20px; margin: 8px 0; color: var(--red); font-size: 14px; font-weight: 600; }
.mri-form__ok { margin: 0; font-size: 17px; font-weight: 600; color: var(--green); }
@media (max-width: 860px) {
.mri-wrap { padding: 30px 22px; border-radius: 18px; }
.mri-grid, .mri-acts, .mri-form__row { grid-template-columns: 1fr; }
.mri-grid { gap: 24px; }
.mri-opt { font-size: 16px; min-height: 60px; padding: 12px 16px; }
.mri-cell { min-height: 104px; }
.mri-next { padding: 22px 20px; }
.mri-cta .mri-btn { flex: 1 1 100%; }
.mri-nav .mri-btn { flex: 1 1 140px; }
}
@media (max-width: 420px) {
.mri-matrix__grid { gap: 6px; }
.mri-cell { padding: 12px; font-size: 12px; }
.mri-cell strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .cfo-mri * { transition: none !important; } } .mri-form select { display: block; width: 100%; height: 50px; margin-top: 6px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: 500 16px Inter, Arial, sans-serif; color: var(--ink); }
.mri-form select:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43, 101, 160, .15); } .mri-btn, .mri-start .mri-btn { border-radius: 8px; }
.mri-mode { border-radius: 14px; } .mri-form input[type=text], .mri-form input[type=email], .mri-form input[type=tel], .mri-form select { height: 48px; border-width: 1px; border-radius: 6px; }
.mri-form { border-radius: 14px; }
.mri-opt { border-radius: 10px; }