/* Path35 ROI Calculator — compact responsive brand treatment
   Cobalt Blue: #1A65D6
   Poppy Red: #F24E3E
   Deep Space Navy: #0A1128
*/
.path35-roi {
    --p35-blue: #1A65D6;
    --p35-red: #F24E3E;
    --p35-navy: #0A1128;
    --p35-white: #FFFFFF;
    --p35-ink: #0A1128;
    --p35-muted: #60697A;
    --p35-line: #DDE4EE;
    --p35-soft: #F5F8FC;
    box-sizing: border-box;
    container-type: inline-size;
    width: 100%;
    max-width: 980px;
    margin: 1.5rem auto;
    padding: clamp(1.1rem, 3vw, 2.5rem);
    border: 1px solid var(--p35-line);
    border-radius: 20px;
    background: var(--p35-white);
    color: var(--p35-ink);
    font-family: "DM Sans", sans-serif;
    box-shadow: 0 18px 50px rgba(10, 17, 40, 0.08);
}
.path35-roi *, .path35-roi *::before, .path35-roi *::after { box-sizing: border-box; }
.path35-roi__header { max-width: 780px; margin-bottom: 2rem; }
.path35-roi__eyebrow {
    margin: 0 0 .65rem;
    color: var(--p35-blue);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .12em;
}
.path35-roi h2 {
    margin: 0 0 .8rem;
    color: var(--p35-navy);
    font-family: "DM Sans", sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.035em;
}
.path35-roi__intro {
    margin: 0;
    color: var(--p35-muted);
    font-size: 1.03rem;
    line-height: 1.65;
}
.path35-roi__grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: stretch;
}
.path35-roi__inputs { display: grid; gap: 1.15rem; align-content: start; }
.path35-roi__field > span:first-child {
    display: block;
    margin-bottom: .35rem;
    color: var(--p35-navy);
    font-weight: 700;
    font-size: .94rem;
}
.path35-roi__help {
    display: block;
    margin: -.05rem 0 .42rem;
    color: var(--p35-muted);
    font-size: .78rem;
    line-height: 1.45;
}
.path35-roi__input-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 50px;
    border: 1px solid #C9D4E2;
    border-radius: 11px;
    background: var(--p35-white);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.path35-roi__input-wrap:hover { border-color: #AEBED2; }
.path35-roi__input-wrap:focus-within {
    border-color: var(--p35-blue);
    box-shadow: 0 0 0 3px rgba(26, 101, 214, .14);
    background: #FBFDFF;
}
.path35-roi input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: .78rem .9rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--p35-navy);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
}
.path35-roi__prefix, .path35-roi__suffix { color: var(--p35-blue); font-weight: 700; }
.path35-roi__prefix { padding-left: .9rem; }
.path35-roi__suffix { padding-right: .9rem; }
.path35-roi__results {
    position: relative;
    padding: 1rem;
    border-radius: 16px;
    background: var(--p35-navy);
    overflow: hidden;
}
.path35-roi__results::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--p35-blue) 0 72%, var(--p35-red) 72% 100%);
}
.path35-roi__result-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    margin-top: .8rem;
}
.path35-roi__result {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 11px;
    background: rgba(255, 255, 255, .075);
    color: var(--p35-white);
}
.path35-roi__result--primary {
    padding: 1.25rem;
    border-color: rgba(26, 101, 214, .9);
    background: var(--p35-blue);
}
.path35-roi__result-label {
    display: block;
    margin-bottom: .28rem;
    color: rgba(255, 255, 255, .72);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .055em;
}
.path35-roi__result--primary .path35-roi__result-label { color: rgba(255, 255, 255, .82); }
.path35-roi__result strong {
    display: block;
    color: var(--p35-white);
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
}
.path35-roi__result--primary strong {
    font-size: clamp(2.3rem, 6vw, 3.9rem);
    letter-spacing: -.045em;
}
.path35-roi__result-note {
    display: block;
    margin-top: .45rem;
    color: rgba(255, 255, 255, .82);
    font-size: .86rem;
}
.path35-roi__interpretation {
    margin-top: .8rem;
    padding: 1rem 1rem 1rem 1.05rem;
    border-left: 3px solid var(--p35-red);
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .9);
    line-height: 1.58;
    font-size: .93rem;
}
.path35-roi__interpretation strong { color: var(--p35-white); }
.path35-roi__footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--p35-line);
    color: var(--p35-muted);
    font-size: .84rem;
    line-height: 1.55;
}
.path35-roi__footer strong { color: var(--p35-navy); }
.path35-roi__footer p { margin: .35rem 0; }
.path35-roi__disclaimer { font-size: .76rem; }

/* Container queries respond to the calculator's actual WordPress column width,
   not the browser viewport. This is important when the calculator sits inside
   a narrow desktop sidebar/column. */
@container (max-width: 560px) {
    .path35-roi__grid { grid-template-columns: 1fr; gap: 1rem; }
}

@container (max-width: 420px) {
    .path35-roi {
        margin: 0;
        padding: 14px;
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(10, 17, 40, .07);
    }
    .path35-roi__header { margin-bottom: 1.15rem; }
    .path35-roi__eyebrow {
        margin-bottom: .45rem;
        font-size: .66rem;
        letter-spacing: .105em;
    }
    .path35-roi h2 {
        margin-bottom: .55rem;
        font-size: 1.55rem;
        line-height: 1.08;
        letter-spacing: -.03em;
    }
    .path35-roi__intro {
        font-size: .88rem;
        line-height: 1.5;
    }
    .path35-roi__inputs { gap: .82rem; }
    .path35-roi__field > span:first-child {
        margin-bottom: .28rem;
        font-size: .84rem;
        line-height: 1.25;
    }
    .path35-roi__help {
        margin: 0 0 .32rem;
        font-size: .7rem;
        line-height: 1.35;
    }
    .path35-roi__input-wrap {
        min-height: 44px;
        border-radius: 9px;
    }
    .path35-roi input {
        padding: .64rem .72rem;
        font-size: .94rem;
    }
    .path35-roi__prefix { padding-left: .72rem; }
    .path35-roi__suffix { padding-right: .72rem; }

    .path35-roi__results {
        padding: .72rem;
        border-radius: 12px;
    }
    .path35-roi__result--primary { padding: 1rem; }
    .path35-roi__result--primary strong { font-size: 2.55rem; }
    .path35-roi__result-note {
        margin-top: .3rem;
        font-size: .76rem;
        line-height: 1.35;
    }
    .path35-roi__result-row {
        display: block;
        margin-top: .52rem;
    }
    .path35-roi__result-row .path35-roi__result {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .72rem .78rem;
        border-radius: 9px;
    }
    .path35-roi__result-row .path35-roi__result + .path35-roi__result {
        margin-top: .52rem;
    }
    .path35-roi__result-row .path35-roi__result-label {
        flex: 1 1 auto;
        max-width: 62%;
        margin: 0;
        font-size: .63rem;
        line-height: 1.25;
    }
    .path35-roi__result-row .path35-roi__result strong {
        flex: 0 0 auto;
        font-size: 1.05rem;
        text-align: right;
        white-space: nowrap;
    }
    .path35-roi__interpretation {
        margin-top: .58rem;
        padding: .76rem .78rem .76rem .85rem;
        font-size: .78rem;
        line-height: 1.45;
    }
    .path35-roi__footer {
        margin-top: 1rem;
        padding-top: .75rem;
        font-size: .74rem;
        line-height: 1.45;
    }
    .path35-roi__footer p { margin: .3rem 0; }
    .path35-roi__disclaimer { font-size: .68rem; }
}

/* Fallbacks for browsers without container-query support. */
@media (max-width: 760px) {
    .path35-roi__grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
    .path35-roi { padding: 14px; border-radius: 14px; }
    .path35-roi__result-row { grid-template-columns: 1fr; }
}