/* forms-redesign.css — Contact + Demo (Phase 3). Loaded on body.rd contact and
   body.rd demo. Requires redesign.css. Elevates the form card and gives the
   info column a cool DNA panel. Form fields, actions and copy are unchanged.
   style.v5.css stays frozen. */

/* --- the form card — raised white surface --- */
body.contact .contact-form,
body.demo .contact-form {
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 34px;
}

/* --- fields — navy focus ring for a crisper, on-brand interaction --- */
body.contact .form-row input:focus,
body.contact .form-row textarea:focus,
body.contact .form-row select:focus,
body.demo .form-row input:focus,
body.demo .form-row textarea:focus,
body.demo .form-row select:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(26,60,94,0.12);
    outline: none;
}

/* --- info column — cool tonal panel with a navy accent, carries the DNA --- */
body.contact .contact-info,
body.demo .demo-info {
    position: relative;
    background: linear-gradient(155deg, #F2F6FB 0%, #FFFFFF 70%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--navy);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    padding: 32px 30px;
    overflow: hidden;
}
body.contact .contact-info h3,
body.demo .demo-info h3 { color: var(--navy); }
body.contact .contact-info .email-link { color: var(--navy); }
body.contact .envelope-illustration { color: var(--navy); opacity: .16; }

/* demo bullets — navy tick, calm rows */
body.demo .demo-bullets { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 12px; }
body.demo .demo-bullets li { color: var(--body-text); }

/* demo success banner — green DNA */
body.demo .demo-success { color: var(--green); }

/* both pages skip the final-cta, so give the section room to breathe */
body.contact section,
body.demo section { padding-bottom: 88px; }