/* Stage 7.10 — Commercial presentation request / lead capture */
.ob-commercial-contact-page{
    --obcc-navy:#0b3777;
    --obcc-blue:#174f96;
    --obcc-magenta:#d50b86;
    --obcc-purple:#6c2fb1;
    --obcc-text:#5f6f86;
    --obcc-line:#e5eaf2;
    --obcc-soft:#f7f9fd;
}

.ob-commercial-contact-page .ob-lead-form-section{
    padding:58px 0 86px;
    background:
        radial-gradient(circle at 90% 6%, rgba(213,11,134,.08), transparent 30%),
        radial-gradient(circle at 8% 82%, rgba(23,79,150,.07), transparent 34%),
        #f8faff;
}

.ob-commercial-contact-page .ob-lead-form-shell{
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    gap:58px;
}

.ob-commercial-contact-page .ob-lead-form-intro{
    top:105px;
    padding-top:6px;
}

.ob-commercial-contact-page .ob-lead-form-intro .ob-eyebrow{
    color:var(--obcc-magenta);
    font-weight:800;
    letter-spacing:.14em;
}

.ob-commercial-contact-page .ob-lead-form-intro h1{
    max-width:9ch;
    margin:16px 0 22px;
    color:var(--obcc-navy);
    font-size:clamp(2.7rem,4.3vw,5.2rem);
    line-height:.98;
}

.ob-commercial-contact-page .ob-lead-form-intro>p{
    max-width:46ch;
    color:var(--obcc-text);
    font-size:1.03rem;
    line-height:1.75;
}

.ob-commercial-contact-page .ob-lead-trust-list{
    margin-top:26px;
    gap:10px;
    color:#42536e;
    font-size:.9rem;
}

.ob-commercial-contact-page .ob-lead-form{
    padding:34px;
    border-color:rgba(11,55,119,.1);
    border-radius:28px;
    box-shadow:0 28px 90px rgba(17,54,111,.09);
}

.ob-commercial-contact-page .ob-commercial-form-block{
    padding-bottom:28px;
    margin-bottom:28px;
}

.ob-commercial-contact-page .ob-form-block-head>span{
    background:linear-gradient(135deg,#f6e7ff,#ffedf7);
    color:var(--obcc-magenta);
}

.ob-commercial-contact-page .ob-form-block-head strong{
    color:var(--obcc-navy);
    font-size:1.14rem;
}

.ob-commercial-contact-page .ob-form-block-head small{
    max-width:50ch;
}

.ob-commercial-contact-page .ob-lead-form input[type=text],
.ob-commercial-contact-page .ob-lead-form input[type=email],
.ob-commercial-contact-page .ob-lead-form input[type=url],
.ob-commercial-contact-page .ob-lead-form input[type=number],
.ob-commercial-contact-page .ob-lead-form input:not([type]),
.ob-commercial-contact-page .ob-lead-form select,
.ob-commercial-contact-page .ob-lead-form textarea{
    min-height:54px;
    border-radius:14px;
    background:#fff;
    border-color:#dce4ef;
}

.ob-commercial-contact-page .ob-lead-form textarea{
    min-height:118px;
}

.ob-commercial-topic-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.ob-commercial-topic-grid label{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:12px;
    min-height:104px;
    padding:16px;
    border:1px solid #dfe6f0;
    border-radius:17px;
    background:#fbfcff;
    cursor:pointer;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.ob-commercial-topic-grid label:hover{
    border-color:#c7d6eb;
    transform:translateY(-1px);
}

.ob-commercial-topic-grid label:has(input:checked){
    border-color:rgba(213,11,134,.46);
    background:linear-gradient(135deg,rgba(213,11,134,.055),rgba(108,47,177,.045));
    box-shadow:0 10px 28px rgba(118,32,130,.08);
}

.ob-commercial-topic-grid input{
    margin-top:3px;
    accent-color:var(--obcc-magenta);
    flex:0 0 auto;
}

.ob-commercial-topic-grid label>span{
    margin:0!important;
    display:grid!important;
    gap:5px;
}

.ob-commercial-topic-grid b{
    color:#173b70;
    font-size:.9rem;
    line-height:1.35;
}

.ob-commercial-topic-grid small{
    color:#7b899d;
    font-size:.76rem;
    line-height:1.45;
}

.ob-commercial-portfolio-details{
    margin-top:18px;
    padding:18px;
    border:1px solid #e2e8f2;
    border-radius:18px;
    background:#f8faff;
}

.ob-commercial-portfolio-details[hidden]{display:none!important}

.ob-commercial-contact-page .ob-form-consent{
    padding:16px 17px;
    margin:0 0 18px;
    border:1px solid #e5eaf2;
    border-radius:15px;
    background:#fafbfe;
}

.ob-commercial-contact-page .ob-lead-submit{
    border-radius:15px;
    background:linear-gradient(105deg,#0f478b 0%,#772cac 52%,#d70b86 100%);
    box-shadow:0 16px 35px rgba(154,26,136,.20);
}

.ob-commercial-contact-page .ob-form-footnote{
    max-width:480px;
    color:#7c899d;
}

/* Commercial thank-you */
.ob-commercial-thanks-page .ob-thanks-section{
    min-height:72vh;
    background:
        radial-gradient(circle at 82% 8%, rgba(213,11,134,.09), transparent 30%),
        radial-gradient(circle at 8% 88%, rgba(23,79,150,.08), transparent 33%),
        #f8faff;
}

.ob-commercial-thanks-page .ob-thanks-card{
    max-width:820px;
    text-align:left;
    border-radius:30px;
    padding:48px;
}

.ob-commercial-thanks-page .ob-success-mark{
    margin:0 0 22px;
}

.ob-commercial-thanks-page .ob-thanks-card h1{
    margin:14px 0 18px;
    max-width:13ch;
    font-size:clamp(2.4rem,5vw,4.8rem);
}

.ob-commercial-thanks-page .ob-thanks-card>p{
    max-width:56ch;
    margin:0;
}

.ob-commercial-next-steps{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:30px 0 6px;
}

.ob-commercial-next-step{
    padding:18px;
    border:1px solid #e2e8f2;
    border-radius:18px;
    background:#fafbfe;
}

.ob-commercial-next-step span{
    display:grid;
    width:30px;
    height:30px;
    place-items:center;
    margin-bottom:11px;
    border-radius:10px;
    background:#f5e9fb;
    color:var(--obcc-magenta,#d50b86);
    font-size:.74rem;
    font-weight:800;
}

.ob-commercial-next-step strong{
    display:block;
    color:#14386c;
    font-size:.9rem;
    line-height:1.35;
}

.ob-commercial-next-step small{
    display:block;
    margin-top:5px;
    color:#7b899d;
    line-height:1.45;
}

.ob-commercial-thanks-page .ob-thanks-actions{
    justify-content:flex-start;
}

@media(max-width:900px){
    .ob-commercial-contact-page .ob-lead-form-section{
        padding:26px 0 64px;
    }
    .ob-commercial-contact-page .ob-lead-form-shell{
        grid-template-columns:minmax(0,1fr);
        gap:24px;
        width:100%;
        min-width:0;
    }
    .ob-commercial-contact-page .ob-lead-form-intro{
        position:static;
        top:auto;
        width:100%;
        min-width:0;
        padding:0;
    }
    .ob-commercial-contact-page .ob-lead-form-intro h1{
        max-width:15ch;
        margin:12px 0 14px;
        font-size:clamp(2.25rem,9.5vw,3.35rem);
        line-height:1.01;
        letter-spacing:-.045em;
        overflow-wrap:anywhere;
    }
    .ob-commercial-contact-page .ob-lead-form-intro>p{
        max-width:38rem;
        margin:0;
        font-size:.98rem;
        line-height:1.62;
    }
    .ob-commercial-contact-page .ob-lead-trust-list{
        margin-top:18px;
        gap:8px;
        font-size:.82rem;
        line-height:1.45;
    }
    .ob-commercial-contact-page .ob-lead-form{
        width:100%;
        min-width:0;
        padding:22px 18px;
        border-radius:22px;
        box-shadow:0 18px 54px rgba(17,54,111,.08);
    }
    .ob-commercial-contact-page .ob-form-grid.two,
    .ob-commercial-contact-page .ob-commercial-topic-grid,
    .ob-commercial-contact-page .ob-commercial-portfolio-details .ob-form-grid.two{
        grid-template-columns:minmax(0,1fr);
    }
    .ob-commercial-contact-page .ob-form-grid,
    .ob-commercial-contact-page .ob-form-grid.two{
        width:100%;
        min-width:0;
        gap:14px;
    }
    .ob-commercial-contact-page .ob-lead-form label,
    .ob-commercial-contact-page .ob-lead-form label>span,
    .ob-commercial-contact-page .ob-lead-form input,
    .ob-commercial-contact-page .ob-lead-form select,
    .ob-commercial-contact-page .ob-lead-form textarea{
        min-width:0;
        max-width:100%;
        width:100%;
        box-sizing:border-box;
    }
    .ob-commercial-contact-page .ob-form-block-head{
        align-items:flex-start;
        gap:12px;
    }
    .ob-commercial-contact-page .ob-form-block-head>span{
        flex:0 0 auto;
    }
    .ob-commercial-contact-page .ob-form-block-head>div{
        min-width:0;
    }
    .ob-commercial-contact-page .ob-form-block-head strong{
        font-size:1.08rem;
        line-height:1.28;
    }
    .ob-commercial-contact-page .ob-form-block-head small{
        font-size:.82rem;
        line-height:1.5;
    }
    .ob-commercial-topic-grid label{
        min-height:0;
        padding:15px;
    }
    .ob-commercial-portfolio-details{
        padding:15px;
    }
    .ob-commercial-contact-page .ob-form-consent{
        padding:14px;
    }
    .ob-commercial-contact-page .ob-lead-submit{
        width:100%;
        min-height:54px;
    }
    .ob-commercial-thanks-page .ob-thanks-card{
        padding:28px 22px;
        border-radius:24px;
    }
    .ob-commercial-next-steps{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){
    .ob-commercial-contact-page .ob-lead-form-section{
        padding:20px 0 52px;
    }
    .ob-commercial-contact-page .ob-lead-form-shell{
        gap:20px;
    }
    .ob-commercial-contact-page .ob-lead-form-intro .ob-eyebrow{
        font-size:.72rem;
        letter-spacing:.13em;
    }
    .ob-commercial-contact-page .ob-lead-form-intro h1{
        max-width:13ch;
        font-size:clamp(2rem,10.6vw,2.72rem);
        margin:10px 0 12px;
    }
    .ob-commercial-contact-page .ob-lead-form-intro>p{
        font-size:.94rem;
        line-height:1.58;
    }
    .ob-commercial-contact-page .ob-lead-trust-list{
        margin-top:15px;
        font-size:.78rem;
    }
    .ob-commercial-contact-page .ob-lead-form{
        padding:18px 14px;
        border-radius:20px;
    }
    .ob-commercial-contact-page .ob-form-block-head{
        gap:10px;
    }
    .ob-commercial-contact-page .ob-form-block-head>span{
        width:34px;
        height:34px;
        border-radius:10px;
        font-size:.72rem;
    }
    .ob-commercial-contact-page .ob-commercial-form-block{
        padding-bottom:22px;
        margin-bottom:22px;
    }
    .ob-commercial-contact-page .ob-lead-form input[type=text],
    .ob-commercial-contact-page .ob-lead-form input[type=email],
    .ob-commercial-contact-page .ob-lead-form input[type=url],
    .ob-commercial-contact-page .ob-lead-form input[type=number],
    .ob-commercial-contact-page .ob-lead-form input:not([type]),
    .ob-commercial-contact-page .ob-lead-form select,
    .ob-commercial-contact-page .ob-lead-form textarea{
        min-height:52px;
        font-size:16px;
        border-radius:13px;
    }
    .ob-commercial-topic-grid{
        gap:10px;
    }
    .ob-commercial-topic-grid label{
        padding:13px;
        border-radius:15px;
    }
    .ob-commercial-topic-grid b{
        font-size:.88rem;
    }
    .ob-commercial-topic-grid small{
        font-size:.74rem;
    }
}

/* Stage 7.10 FIX4 — mobile topic-card containment.
   Generic mobile form rules make all inputs and label spans 100% wide; that is
   correct for text fields but not for checkbox option cards. Keep the checkbox
   in a fixed column and allow the copy to use the remaining width. */
@media (max-width:900px){
    .ob-commercial-contact-page .ob-lead-form .ob-commercial-topic-grid label{
        display:grid !important;
        grid-template-columns:24px minmax(0,1fr) !important;
        align-items:start !important;
        column-gap:12px !important;
        row-gap:0 !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        min-height:0 !important;
        padding:15px 16px !important;
        box-sizing:border-box !important;
        overflow:hidden;
    }

    .ob-commercial-contact-page .ob-lead-form .ob-commercial-topic-grid label > input[type="checkbox"]{
        width:20px !important;
        min-width:20px !important;
        max-width:20px !important;
        height:20px !important;
        margin:2px 0 0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        justify-self:start;
        align-self:start;
    }

    .ob-commercial-contact-page .ob-lead-form .ob-commercial-topic-grid label > span{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        gap:4px !important;
        width:auto !important;
        min-width:0 !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        overflow-wrap:break-word;
        word-break:normal;
    }

    .ob-commercial-contact-page .ob-commercial-topic-grid b,
    .ob-commercial-contact-page .ob-commercial-topic-grid small{
        display:block;
        width:100%;
        min-width:0;
        max-width:100%;
    }
}

@media (max-width:560px){
    .ob-commercial-contact-page .ob-lead-form .ob-commercial-topic-grid{
        gap:10px !important;
    }

    .ob-commercial-contact-page .ob-lead-form .ob-commercial-topic-grid label{
        padding:14px !important;
        border-radius:15px;
    }

    .ob-commercial-contact-page .ob-commercial-topic-grid b{
        font-size:.92rem;
        line-height:1.3;
    }

    .ob-commercial-contact-page .ob-commercial-topic-grid small{
        font-size:.78rem;
        line-height:1.42;
    }
}