/*
 * Product page styles — preserved exactly from inline <style> blocks
 * in ehr.html, notes.html, business.html, frontdesk.html, assistant.html
 */

.product-hero {
    background-color: #FAFAFA;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.product-hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    height: 80vw;
    z-index: 0;
    pointer-events: none;
}

.product-hero * {
    z-index: 1;
    position: relative;
}

.product-title {
    font-size: clamp(3rem, 6vw, 4.5rem);
    color: #0F172A;
    line-height: 1.1;
    margin-bottom: 24px;
}

/* Per-page hero radial gradients — applied via body class */

/* EHR page */
body.page-ehr .product-hero::before {
    top: -30%;
    background: radial-gradient(circle, rgba(62, 107, 247, 0.08) 0%, rgba(62, 107, 247, 0) 60%);
}

body.page-ehr .product-title {
    font-size: clamp(3rem, 6vw, 5rem);
}

/* Notes page */
body.page-notes .product-hero::before {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, rgba(62, 107, 247, 0) 50%);
}

/* Business page */
body.page-business .product-hero::before {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.06) 0%, rgba(62, 107, 247, 0) 50%);
}

/* FrontDesk page */
body.page-frontdesk .product-hero::before {
    background: radial-gradient(circle, rgba(244, 63, 94, 0.06) 0%, rgba(62, 107, 247, 0) 50%);
}

/* Assistant page */
body.page-assistant .product-hero::before {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.06) 0%, rgba(62, 107, 247, 0) 50%);
}