.diagnostic-page { padding-top:38px; padding-bottom:48px; color:#10283b; }
.diagnostic-page [hidden] { display:none!important; }
.di-hero { max-width:780px; margin-bottom:32px; }
.di-kicker { color:#157d84; font:800 11px/1.4 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.di-hero :is(h1,:where(.home-secondary-heading)) { margin:14px 0; font:800 clamp(32px,4.5vw,54px)/1.08 system-ui,sans-serif; letter-spacing:-.045em; color:#10283b; }
.di-hero :is(h1,:where(.home-secondary-heading)) span:not(:where(.home-visual-strong,.home-visual-b)) { color:#16787e; }
.di-hero p { font:400 16px/1.65 system-ui,sans-serif; color:#587080; max-width:650px; }
.di-progress { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none; }
.di-progress li { padding:8px 13px; border:1px solid #d4e1e7; border-radius:999px; font:650 12px/1.4 system-ui,sans-serif; background:#fff; }
.di-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr); align-items:start; gap:24px; }
.di-panel,.di-aside,.di-notice { min-width:0; padding:28px; background:#fff; border:1px solid #dbe6eb; border-radius:20px; box-shadow:0 12px 32px #10283b06; }
.di-heading { display:flex; gap:12px; align-items:flex-start; margin-bottom:22px; }
.di-heading > span:not(:where(.home-visual-strong,.home-visual-b)) { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:10px; background:#e9f4f3; color:#16787e; font:800 11px/1 system-ui,sans-serif; }
.diagnostic-page h2:not(:where(.home-secondary-heading)) { margin:0 0 8px; color:#112b3e; font:750 22px/1.25 system-ui,sans-serif; letter-spacing:-.025em; }
.di-heading p { margin:0; color:#647e8e; font:400 13px/1.5 system-ui,sans-serif; }
.di-drop { position:relative; display:flex; flex-direction:column; align-items:center; gap:9px; padding:30px 18px; border:2px dashed #b7d3d6; border-radius:14px; background:#f4faf9; text-align:center; cursor:pointer; }
.di-drop > span:not(:where(.home-visual-strong,.home-visual-b)) { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#e1f0ee; color:#16787e; font-size:30px; }
.di-drop :is(strong,:where(.home-visual-strong)) { font:700 15px/1.4 system-ui,sans-serif; }
.di-drop small { color:#607b88; font:400 11px/1.5 system-ui,sans-serif; }
.di-drop input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.di-drop:focus-within { outline:3px solid #f4a33c; outline-offset:3px; }
.di-drop.is-dragging { border-color:#16787e; background:#e4f4f0; }
.di-photo { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px; margin:12px 0; border:1px solid #dbe6eb; border-radius:12px; }
.di-photo img { width:88px; height:70px; object-fit:contain; border-radius:8px; }
.di-photo span:not(:where(.home-visual-strong,.home-visual-b)) { flex:1; min-width:90px; overflow-wrap:anywhere; font:400 12px/1.5 system-ui,sans-serif; }
.di-photo button { border:0; border-radius:8px; padding:10px; color:#16787e; background:#eaf5f3; cursor:pointer; font:650 12px/1.4 system-ui,sans-serif; }
.di-field { display:grid; gap:8px; margin-top:20px; color:#243d50; font:650 13px/1.4 system-ui,sans-serif; }
.di-field input,.di-field textarea { box-sizing:border-box; width:100%; min-width:0; border:1px solid #c5d7df; border-radius:10px; padding:12px; color:#163247; background:#fbfdfe; font:400 15px/1.5 system-ui,sans-serif; }
.di-field textarea { resize:vertical; }
.di-check { display:flex; align-items:flex-start; gap:10px; margin:18px 0; color:#4b6373; font:400 12px/1.6 system-ui,sans-serif; }
.di-check input { flex:0 0 18px; width:18px; height:18px; margin-top:3px; accent-color:#16787e; }
.di-check a { color:#156e76; text-decoration:underline; }
.di-risk { padding:14px; border:1px solid #efd9b2; border-radius:10px; background:#fff9ef; color:#745329; }
.di-button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:48px; padding:12px 22px; border:0; border-radius:12px; background:#ff8b21; color:#10283b; font:750 14px/1.4 system-ui,sans-serif; cursor:pointer; text-decoration:none; }
.di-button:disabled { opacity:.6; cursor:wait; }
.di-status { min-height:20px; margin:12px 0 0; color:#22676b; font:500 13px/1.5 system-ui,sans-serif; }
.di-status.is-error { color:#a92c2c; }
.di-aside { background:#0c2537; color:#c2d2dd; }
.di-aside .di-kicker { color:#ffb367; }
.di-aside h2:not(:where(.home-secondary-heading)) { color:#fff; margin-top:12px; }
.di-aside ul { padding-left:18px; font:400 14px/1.7 system-ui,sans-serif; }
.di-aside p { font:400 12px/1.65 system-ui,sans-serif; color:#a7bfce; }
.di-aside > a { color:#ffb367; font:650 13px/1.5 system-ui,sans-serif; }
.di-warning { padding:15px; border:1px solid #ffcf6633; border-radius:10px; background:#ffb04b0b; color:#ffd49f; font:500 12px/1.65 system-ui,sans-serif; }
.di-result,.di-panel[data-di-quote-section] { margin-top:24px; scroll-margin-top:100px; }
.di-result-badge { display:inline-flex; padding:7px 10px; border-radius:8px; background:#fff3df; color:#79531d; font:700 12px/1.4 system-ui,sans-serif; }
.di-result p,.di-result li { font:400 15px/1.7 system-ui,sans-serif; color:#405d70; }
.di-result h3 { font:700 16px/1.4 system-ui,sans-serif; margin:24px 0 8px; color:#19384c; }
.di-result-note { padding:14px; border-left:3px solid #ff9b32; background:#fff9ee; font-size:12px!important; }
.di-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.diagnostic-entry { display:flex; align-items:center; justify-content:space-between; gap:24px; box-sizing:border-box; padding:24px; margin:24px auto; border:1px solid #29475a; border-radius:18px; background:#0d2537; color:#eaf4fb; }
.diagnostic-entry h2:not(:where(.home-secondary-heading)) { margin:0 0 6px; font:750 23px/1.25 system-ui,sans-serif; color:#fff; }
.diagnostic-entry p { margin:0; color:#b4cbd9; font:400 14px/1.6 system-ui,sans-serif; }
.diagnostic-entry a { flex-shrink:0; }
@media(max-width:760px) { .diagnostic-page { padding-top:24px; }.di-layout,.di-form-grid { grid-template-columns:minmax(0,1fr); }.di-panel,.di-aside,.di-notice { padding:20px; }.di-hero :is(h1,:where(.home-secondary-heading)) { font-size:34px; }.di-field input,.di-field textarea { font-size:16px; }.di-button { width:100%; box-sizing:border-box; }.diagnostic-entry { flex-direction:column; align-items:stretch; }.di-progress { gap:6px; }.di-progress li { font-size:10px; padding:7px 9px; } }
/* Brand palette and readable text on the site's dark mobile background. */
.di-hero > .di-kicker { color:#9b4e0b; }
.di-hero :is(h1,:where(.home-secondary-heading)) span:not(:where(.home-visual-strong,.home-visual-b)) { color:#ac510d; }
.di-heading > span:not(:where(.home-visual-strong,.home-visual-b)) { background:#fff0df; color:#965014; }
.di-heading p,.di-drop small { color:#506b7c; }
.di-drop { background:#f5f9fc; border-color:#b7cddc; }
.di-drop > span:not(:where(.home-visual-strong,.home-visual-b)) { background:#e5eef5; color:#173e58; }
.di-drop.is-dragging { background:#e9f3fa; border-color:#427d9e; }
.di-check { color:#435e70; }
.di-status { color:#255d69; }
.di-aside .di-kicker { color:#ffc17c; }
@media(max-width:760px) {
 .di-hero > .di-kicker { color:#ffb66d; }
 .di-hero :is(h1,:where(.home-secondary-heading)) { color:#f5f9fc; }
 .di-hero :is(h1,:where(.home-secondary-heading)) span:not(:where(.home-visual-strong,.home-visual-b)) { color:#ffb66d; }
 .di-hero > p { color:#c2d2de; }
 .di-progress li { background:#102b3e; border-color:#36546a; color:#e7f1f8; }
 .di-panel,.di-notice { border-color:#d9e5ec; }
 .diagnostic-page > noscript { color:#d4e3ee; }
 .diagnostic-page > noscript a { color:#ffbd79; }
}
/* One dark palette for the complete diagnosis flow, on desktop and mobile. */
body:has(.diagnostic-page) { background:#071525!important; color:#eaf2f8; }
.diagnostic-page { color:#eaf2f8; color-scheme:dark; }
.di-hero > .di-kicker,.di-hero :is(h1,:where(.home-secondary-heading)) span:not(:where(.home-visual-strong,.home-visual-b)) { color:#ffb66d; }
.di-hero :is(h1,:where(.home-secondary-heading)) { color:#f5f9fc; }
.di-hero > p { color:#c2d2de; }
.di-progress li { background:#102b3e; border-color:#36546a; color:#e7f1f8; }
.di-panel,.di-notice { background:#0d2233; border-color:#294458; box-shadow:0 12px 32px #00000012; }
.diagnostic-page h2:not(:where(.home-secondary-heading)),.di-result h3 { color:#f1f6fa; }
.di-heading > span:not(:where(.home-visual-strong,.home-visual-b)) { background:#ffac571a; color:#ffbd79; }
.di-heading p { color:#b6cbd9; }
.di-drop { background:#0a1c2b; border-color:#496b80; color:#ecf3f8; }
.di-drop small { color:#b0c6d6; }
.di-drop > span:not(:where(.home-visual-strong,.home-visual-b)) { background:#17374d; color:#ffbd79; }
.di-drop.is-dragging { background:#18384c; border-color:#ffb66d; }
.di-field { color:#e1edf5; }
.di-field input,.di-field textarea { background:#071a29; border-color:#3b596d; color:#f0f6fa; }
.di-field input::placeholder,.di-field textarea::placeholder { color:#9fb6c8; opacity:1; }
.di-check { color:#b9cddb; }
.di-check a { color:#ffbf83; }
.di-check input { accent-color:#ff9b38; }
.di-risk { background:#ffb04b0a; border-color:#8b693c; color:#ffdbad; }
.di-photo { background:#0a1c2b; border-color:#355369; }
.di-photo span:not(:where(.home-visual-strong,.home-visual-b)) { color:#c5d8e6; }
.di-photo button { background:#1c3b50; color:#ffbf83; }
.di-status { color:#9de0c9; }
.di-status.is-error { color:#ffb6b1; }
.di-result-badge { background:#ffb04b16; color:#ffd49f; }
.di-result p,.di-result li { color:#c2d5e2; }
.di-result-note { background:#ffad4f0b; color:#e6cfb3!important; border-left-color:#ffa644; }
.di-aside { background:#0b1f2f; border-color:#294458; }
.di-notice p { color:#bfd1de; }
.diagnostic-page > noscript { color:#c2d5e2; }
.diagnostic-page > noscript a { color:#ffbd79; }
.diagnostic-page :where(button,a,input,textarea):focus-visible { outline:3px solid #ffb66d; outline-offset:3px; }
/* Original supplied artwork, with its white outer canvas cropped by the layout. */
.diagnostic-entry.diagnostic-banner { display:block; padding:0; border:0; background:none; border-radius:20px; box-shadow:0 12px 30px #10233520; }
.diagnostic-banner-link { display:block; overflow:hidden; border-radius:20px; text-decoration:none; background:#0b1e2d; }
.diagnostic-banner-art { display:block; position:relative; aspect-ratio:5.75; overflow:hidden; }
.diagnostic-banner-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 58%; }
.diagnostic-banner-mobile { display:none; }
.diagnostic-banner-link:focus-visible { outline:3px solid #ffa633; outline-offset:5px; }
@media(max-width:760px) {
 .diagnostic-entry.diagnostic-banner { border-radius:16px; }
 .diagnostic-banner-link { border-radius:16px; border:1px solid #3c566a; }
 .diagnostic-banner-art { aspect-ratio:1.9; }
 .diagnostic-banner-art img { position:absolute; width:300%; max-width:none; height:auto; left:0; top:50%; transform:translateY(-53%); }
 .diagnostic-banner-mobile { display:grid; gap:14px; padding:22px; background:linear-gradient(135deg,#102a3d,#071725); }
 .diagnostic-banner-mobile > :is(strong,:where(.home-visual-strong)) { color:#fff; font:850 27px/1.1 system-ui,sans-serif; letter-spacing:-.035em; }
 .diagnostic-banner-mobile em { color:#ffa331; font-style:normal; }
 .diagnostic-banner-mobile > span:not(:where(.home-visual-strong,.home-visual-b)):not(.diagnostic-banner-cta) { color:#c6d7e3; font:400 13px/1.6 system-ui,sans-serif; }
 .diagnostic-banner-cta { display:flex; align-items:center; justify-content:center; gap:20px; padding:14px 18px; border-radius:12px; background:linear-gradient(180deg,#ffad3c,#ff8b1d); color:#0a2032; font:800 14px/1.3 system-ui,sans-serif; box-shadow:0 5px 20px #ff921526; }
}
/* Compact mobile banner: integrate the original photograph behind the copy. */
@media(max-width:760px) {
 .diagnostic-banner-link { position:relative; isolation:isolate; min-height:230px; background:#091d2c; }
 .diagnostic-banner-art { position:absolute; inset:0; aspect-ratio:auto; z-index:-2; }
 .diagnostic-banner-art img { width:430%; max-width:none; height:auto; left:-18%; top:50%; transform:translateY(-53%); }
 .diagnostic-banner-link::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,#091d2c00 0%,#091d2c38 22%,#091d2ce8 44%,#091d2c 70%),linear-gradient(0deg,#091d2c 0%,#091d2c00 60%); }
 .diagnostic-banner-mobile { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; min-height:230px; padding:19px 16px 14px; box-sizing:border-box; background:none; }
 .diagnostic-banner-mobile > :is(strong,:where(.home-visual-strong)) { margin-left:37%; font-size:23px; line-height:1.05; letter-spacing:-.04em; }
 .diagnostic-banner-mobile > span:not(:where(.home-visual-strong,.home-visual-b)):not(.diagnostic-banner-cta) { margin-left:37%; font-size:11px; line-height:1.45; }
 .diagnostic-banner-cta { align-self:end; margin-top:5px; padding:12px 14px; min-height:44px; font-size:13px; border-radius:10px; }
}
/* Mobile uses the complete desktop artwork, scaled proportionally. */
@media(max-width:760px) {
 .diagnostic-banner-link { min-height:0; border:0; border-radius:10px; }
 .diagnostic-banner-link::after { display:none; }
 .diagnostic-banner-art { position:relative; inset:auto; aspect-ratio:5.75; z-index:auto; }
 .diagnostic-banner-art img { position:static; width:100%; max-width:100%; height:100%; transform:none; object-fit:cover; object-position:50% 58%; }
 .diagnostic-banner-mobile { display:none; }
 .diagnostic-entry.diagnostic-banner { border-radius:10px; }
}
/* Dedicated mobile artwork preserves the desktop design at readable proportions. */
.diagnostic-banner-art picture { display:block; width:100%; height:100%; }
@media(max-width:760px) {
 .diagnostic-entry.diagnostic-banner,.diagnostic-banner-link { border-radius:15px; }
 .diagnostic-banner-art { aspect-ratio:3/2; }
 .diagnostic-banner-art img { width:100%; max-width:100%; height:100%; object-fit:contain; object-position:center; transform:none; }
 .diagnostic-banner-link { background:#091d2c; }
 .diagnostic-banner-mobile,.diagnostic-banner-link::after { display:none; }
}

/* New desktop artwork: center the banner itself, excluding the outer canvas. */
@media(min-width:761px) {
 .diagnostic-banner-art { aspect-ratio:5.75; }
 .diagnostic-banner-art img { object-fit:cover; object-position:center; }
}