.dilution-page { --dc-ink:#192348; --dc-muted:#697187; --dc-violet:#514998; --dc-line:#e1e4ee; max-width:1200px; margin:auto; padding:28px 32px 72px; color:var(--dc-ink); }
.dilution-page *, .dilution-page *::before, .dilution-page *::after { box-sizing:border-box; }
.dilution-page [hidden] { display:none!important; }
.dilution-page :is(button,input,select) { font:inherit; }
.dilution-page :is(button,a,input,select,summary):focus-visible { outline:3px solid #9183d7; outline-offset:4px; }
.dilution-page button { cursor:pointer; }
.dilution-page :is(input,select) { font-size:16px; }
.dilution-page h1, .dilution-page h2, .dilution-page h3, .dilution-page p { margin:0; }
.dilution-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--dc-muted); font-size:12px; margin-bottom:24px; }
.dilution-breadcrumb a { padding:10px 0; text-decoration:none; }
.dilution-breadcrumb a:hover { color:var(--dc-violet); }
.dilution-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.dilution-page .dilution-eyebrow { color:var(--dc-violet); font-size:10px; font-weight:750; letter-spacing:.18em; line-height:1.6; margin-bottom:10px; }
.dilution-heading h1 { font-size:clamp(30px,4vw,46px); line-height:1.13; font-weight:750; letter-spacing:-.04em; }
.dilution-page .dilution-lead { max-width:650px; color:var(--dc-muted); font-size:15px; line-height:1.8; margin-top:15px; }
.dilution-help-link { flex-shrink:0; display:inline-flex; gap:15px; align-items:center; padding:12px 0; color:var(--dc-violet); font-size:13px; font-weight:600; text-decoration:none; }
.dilution-help-link:hover { text-decoration:underline; text-underline-offset:4px; }
.dilution-notice { display:flex; gap:12px; align-items:flex-start; padding:15px 18px; border:1px solid #e2def0; border-radius:12px; background:#f4f2fa; color:#5c5579; font-size:12px; line-height:1.75; }
.dilution-notice svg { flex:0 0 20px; height:20px; margin-top:1px; }
.dilution-layout { display:grid; grid-template-columns:minmax(0,1.03fr) minmax(0,1fr); align-items:start; gap:28px; margin-top:28px; }
.dilution-form { min-width:0; }
.dilution-form-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.dilution-form-heading h2 { font-size:19px; font-weight:700; letter-spacing:-.025em; }
.dilution-reset { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:7px 0 7px 14px; color:var(--dc-violet); background:none; border:none; font-size:12px!important; font-weight:600!important; }
.dilution-reset span { font-size:20px; }
.dilution-step { display:block; min-width:0; margin:0 0 14px; border:1px solid var(--dc-line); border-radius:18px; padding:24px; background:#fff; box-shadow:0 2px 4px #28345603; }
.dilution-step-heading { display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.dilution-step-number { flex:0 0 32px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#eeebf8; color:var(--dc-violet); font-size:13px; font-weight:750; }
.dilution-step h3 { font-size:16px; font-weight:700; letter-spacing:-.015em; line-height:1.4; }
.dilution-step-heading p, .dilution-page .dilution-step-description { color:var(--dc-muted); font-size:12px; line-height:1.65; margin-top:4px; }
.dilution-label { display:block; margin-bottom:8px; color:#4f5971; font-size:12px; font-weight:600; }
.dilution-input-unit { display:flex; align-items:center; overflow:hidden; border:1px solid #d9deea; border-radius:10px; background:#fafbfe; }
.dilution-input-unit:focus-within { outline:2px solid #8476c2; outline-offset:2px; }
.dilution-input-unit input { width:100%; min-width:0; min-height:50px; border:0; outline:none!important; background:transparent; padding:12px 15px; color:var(--dc-ink); box-shadow:none; border-radius:0; }
.dilution-input-unit > span { padding:0 16px 0 10px; font-size:13px; font-weight:650; color:var(--dc-muted); }
.dilution-page input::placeholder { color:#9ba2b4; }
.dilution-input-unit:has([aria-invalid=true]), .dilution-page input[aria-invalid=true] { border-color:#bf5a49; }
.dilution-presets { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.dilution-presets button { min-height:40px; padding:8px 12px; border:1px solid #e0e3ed; border-radius:8px; background:#fff; color:#60677d; font-size:12px; line-height:1.5; }
.dilution-presets button:hover { border-color:#aaa0ce; color:var(--dc-violet); }
.dilution-presets button[aria-pressed=true] { border-color:var(--dc-violet); background:#f0edf9; color:var(--dc-violet); font-weight:650; }
.dilution-page .dilution-field-help { margin-top:11px; color:var(--dc-muted); font-size:11px; line-height:1.75; }
.dilution-page .dilution-field-error { margin-top:8px; color:#a94636; font-size:12px; line-height:1.6; }
.dilution-syringe legend { float:left; display:flex; align-items:center; gap:13px; width:100%; padding:0; font-size:16px; font-weight:700; letter-spacing:-.015em; }
.dilution-syringe .dilution-step-description { clear:both; padding-top:12px; margin-bottom:16px; }
.dilution-syringe-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.dilution-syringe-options label { position:relative; min-width:0; cursor:pointer; }
.dilution-syringe-options input { position:absolute; opacity:0; width:1px; height:1px; }
.dilution-syringe-options span { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px 5px; min-height:76px; border:1px solid #dce0eb; border-radius:10px; color:#687087; text-align:center; }
.dilution-syringe-options strong { font-size:16px; font-weight:650; }
.dilution-syringe-options small { font-size:10px; }
.dilution-syringe-options input:checked + span { border-color:var(--dc-violet); box-shadow:inset 0 0 0 1px var(--dc-violet); background:#f0edf9; color:var(--dc-violet); }
.dilution-syringe-options input:focus-visible + span { outline:3px solid #9183d7; outline-offset:4px; }
.dilution-target-row { display:flex; gap:9px; }
.dilution-target-row input { min-width:0; width:100%; min-height:50px; padding:12px 14px; border:1px solid #d9deea; border-radius:10px; background:#fafbfe; color:var(--dc-ink); box-shadow:none; }
.dilution-target-row select { width:88px; flex-shrink:0; padding:10px; background:#f0edf8; color:var(--dc-violet); border:1px solid #d9d3e9; border-radius:10px; }
.dilution-calculate { display:flex; align-items:center; justify-content:center; gap:18px; width:100%; min-height:52px; border:0; border-radius:11px; background:#41856d; color:white; padding:13px 20px; font-size:14px!important; font-weight:650!important; }
.dilution-calculate:hover { background:#33715b; }
.dilution-result-column { position:sticky; top:120px; min-width:0; padding-top:4px; }
.dilution-result-card { overflow:hidden; border-radius:20px; background:#fff; border:1px solid #daddec; box-shadow:0 10px 36px #28345608; }
.dilution-result-heading { display:flex; align-items:center; gap:13px; padding:25px; background:#20284c; color:#fff; }
.dilution-result-icon { display:inline-flex; flex:0 0 43px; align-items:center; justify-content:center; width:43px; height:43px; border:1px solid #7e77b94d; border-radius:12px; background:#ffffff0a; color:#c2bbed; }
.dilution-result-icon svg { width:24px; height:24px; }
.dilution-result-heading .dilution-eyebrow { margin-bottom:5px; color:#c1b9e9; font-size:9px; }
.dilution-result-heading h2 { font-size:18px; font-weight:650; letter-spacing:-.02em; line-height:1.4; }
.dilution-ready { margin-left:auto; font-size:9px; color:#bbe1d1; padding:5px 8px; border:1px solid #8bceb844; border-radius:30px; }
.dilution-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 30px 48px; text-align:center; }
.dilution-empty > svg { width:64px; height:64px; padding:9px; color:#8e83be; background:#f2eff9; border-radius:16px; margin-bottom:24px; }
.dilution-empty h3 { font-size:20px; font-weight:650; letter-spacing:-.025em; }
.dilution-empty p { max-width:310px; margin:13px 0 25px; font-size:13px; line-height:1.8; color:var(--dc-muted); }
.dilution-empty > span { padding:7px 13px; background:#f5f4fa; border-radius:30px; font-size:11px; color:#827797; }
.dilution-main-result { padding:30px 25px 23px; text-align:center; }
.dilution-main-result > p:first-child { color:#63716d; font-size:12px; font-weight:600; }
.dilution-page .dilution-volume-result { margin-top:7px; color:#2f745a; line-height:1.2; }
.dilution-volume-result strong { font-size:clamp(38px,4vw,54px); font-weight:750; letter-spacing:-.045em; overflow-wrap:anywhere; }
.dilution-volume-result span { font-size:22px; font-weight:500; }
.dilution-page .dilution-target-result { color:var(--dc-muted); font-size:12px; margin-top:12px; line-height:1.7; }
.dilution-scale-result { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:15px 20px; margin:0 24px; border:1px solid #dfd9ee; border-radius:11px; background:#f5f3fb; }
.dilution-scale-result > span { color:#77678e; font-size:11px; }
.dilution-scale-result > strong { font-size:16px; color:var(--dc-violet); }
.dilution-visual { padding:13px 22px 21px; color:#645c89; }
.dilution-visual svg { display:block; width:100%; height:auto; }
.dilution-visual svg text { fill:currentColor; font:12px system-ui,sans-serif; }
.dilution-visual > p { color:#7e8595; font-size:10px; line-height:1.65; text-align:center; }
.dilution-metrics { display:grid; grid-template-columns:1.2fr .9fr 1fr; margin:0 24px; padding:20px 0; border-top:1px solid #e6e8f0; gap:15px; }
.dilution-metrics dt { color:var(--dc-muted); font-size:10px; margin-bottom:7px; line-height:1.5; }
.dilution-metrics dd { margin:0; font-size:17px; font-weight:650; color:#37425e; line-height:1.5; overflow-wrap:anywhere; }
.dilution-metrics dd > span { display:block; font-size:10px; font-weight:400; color:var(--dc-muted); }
.dilution-page .dilution-result-note { color:#8b8fa0; margin:0 24px; font-size:10px; line-height:1.75; }
.dilution-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:24px; }
.dilution-actions button { min-height:43px; border:1px solid #dedde9; border-radius:9px; background:#fff; color:var(--dc-violet); font-size:11px; font-weight:600; }
.dilution-actions button:hover { background:#f3f1f9; border-color:#b5aaca; }
.dilution-actions button:disabled { color:#a2a7b3; background:#f5f6f8; cursor:not-allowed; }
.dilution-page .dilution-announcement { margin:0 24px; color:var(--dc-violet); font-size:11px; line-height:1.6; }
.dilution-announcement:not(:empty) { padding-bottom:20px; }
.dilution-page .dilution-result-error, .dilution-page .dilution-capacity-warning { margin:18px 24px; padding:13px 15px; border:1px solid #efc4b7; border-radius:10px; color:#9c513b; background:#fff5ef; font-size:12px; line-height:1.7; }
.dilution-page .dilution-local-note { display:flex; gap:9px; align-items:flex-start; padding:16px 12px; color:#878b9b; font-size:10px; line-height:1.75; }
.dilution-local-note svg { width:17px; height:17px; flex-shrink:0; margin-top:1px; }
.dilution-explanation { margin-top:64px; padding-top:40px; border-top:1px solid var(--dc-line); scroll-margin-top:120px; }
.dilution-explanation h2, .dilution-faq h2 { font-size:27px; font-weight:700; letter-spacing:-.035em; line-height:1.4; }
.dilution-formulas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; }
.dilution-formulas article { padding:23px; border:1px solid var(--dc-line); border-radius:14px; background:#fff; }
.dilution-formulas article > span { display:block; color:#aca3ca; font-size:12px; font-weight:650; margin-bottom:12px; }
.dilution-formulas h3 { font-size:16px; font-weight:650; }
.dilution-formulas p { margin:9px 0 15px; font-size:12px; line-height:1.8; color:var(--dc-muted); }
.dilution-formulas code { display:block; padding:10px 11px; border-radius:8px; background:#f5f3fa; font-family:inherit; font-size:11px; color:var(--dc-violet); }
.dilution-faq { margin:48px 0 0; max-width:820px; }
.dilution-faq h2 { margin-bottom:20px; }
.dilution-faq details { border-bottom:1px solid var(--dc-line); }
.dilution-faq summary { padding:18px 3px; font-size:14px; font-weight:600; cursor:pointer; }
.dilution-faq details p { color:var(--dc-muted); font-size:13px; line-height:1.8; padding:0 3px 20px; }
.dilution-page .dilution-sources { margin-top:20px; color:var(--dc-muted); font-size:11px; line-height:1.8; }
.dilution-sources a { color:var(--dc-violet); text-decoration:underline; text-underline-offset:3px; }
.dilution-visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:900px) { .dilution-page { padding-inline:24px; } .dilution-layout { gap:18px; } .dilution-step { padding:20px; } .dilution-result-heading { padding:20px; } .dilution-ready { display:none; } .dilution-help-link { display:none; } }
@media(max-width:700px) { .dilution-page { padding:16px 20px 48px; } .dilution-breadcrumb { margin-bottom:20px; font-size:11px; } .dilution-heading h1 { font-size:33px; } .dilution-page .dilution-lead { font-size:13px; line-height:1.8; } .dilution-heading { margin-bottom:20px; } .dilution-notice { font-size:11px; padding:14px; } .dilution-layout { grid-template-columns:minmax(0,1fr); gap:24px; margin-top:22px; } .dilution-step { padding:20px; border-radius:15px; } .dilution-presets { gap:7px; } .dilution-presets button { min-height:42px; padding:8px 10px; } .dilution-result-column { position:static; padding-top:0; scroll-margin-top:110px; } .dilution-ready { display:block; } .dilution-result-heading h2 { font-size:17px; } .dilution-empty { padding:38px 25px; } .dilution-volume-result strong { font-size:46px; } .dilution-explanation { margin-top:38px; padding-top:29px; } .dilution-explanation h2, .dilution-faq h2 { font-size:25px; } .dilution-formulas { grid-template-columns:1fr; gap:12px; margin-top:20px; } .dilution-formulas article { padding:20px; } .dilution-faq { margin-top:32px; } }
@media(max-width:360px) { .dilution-page { padding-inline:16px; } .dilution-heading h1 { font-size:30px; } .dilution-step { padding:17px; } .dilution-syringe-options { gap:6px; } .dilution-syringe-options strong { font-size:14px; } .dilution-syringe-options small { font-size:9px; } .dilution-result-heading { padding:18px; gap:9px; } .dilution-ready { display:none; } .dilution-scale-result, .dilution-metrics { margin-inline:18px; } .dilution-metrics { gap:10px; } .dilution-actions { padding:20px 18px; gap:6px; } }
@media(prefers-reduced-motion:reduce) { .dilution-page *, .dilution-page *::before, .dilution-page *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media print { body { background:#fff!important; } header, .site-footer, #cart-dialog, #cart-toast, #whatsapp-float, #whatsapp-dialog, .dilution-breadcrumb, .dilution-help-link, .dilution-presets, .dilution-reset, .dilution-calculate, .dilution-actions, .dilution-explanation, .dilution-faq, .dilution-local-note, .dilution-announcement { display:none!important; } .dilution-page { max-width:none; padding:0; font-size:12px; } .dilution-heading h1 { font-size:26px; } .dilution-heading::before { content:'INFINNITY BIOPHARMA'; font-size:12px; font-weight:bold; color:#514998; } .dilution-heading { display:block; } .dilution-layout { gap:18px; grid-template-columns:1fr 1fr; } .dilution-result-column { position:static; padding-top:0; } .dilution-form-heading { display:none; } .dilution-step { padding:12px; margin-bottom:10px; break-inside:avoid; } .dilution-step-heading { margin-bottom:10px; } .dilution-field-help { display:none; } .dilution-result-card { box-shadow:none; break-inside:avoid; } .dilution-result-heading { background:#eee!important; color:#192348!important; padding:15px; } .dilution-result-heading .dilution-eyebrow { color:#514998; } .dilution-ready { display:none; } .dilution-page { print-color-adjust:exact; -webkit-print-color-adjust:exact; } }