/* ==========================================================================
   FREE COVERAGE ANALYSIS (tools/insurance-monitoring-analysis)
   Uses the homepage design system (home.css, body.home-frame) plus the
   page-specific rules below (body.tool-frame).
   ========================================================================== */

/* ---------- Hero: framed, centered, offer first ---------- */
body.tool-frame .tool-hero {
    width: min(var(--frame), calc(100% - 32px));
    margin: var(--nav-h) auto 0;
    padding: clamp(56px, 9vh, 104px) var(--gutter) clamp(48px, 7vh, 80px);
    background: #fff;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(ellipse 55% 60% at 50% 0%, rgba(70, 138, 247, 0.10), transparent 70%);
}
body.tool-frame .tool-hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 64px;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(to bottom left, var(--page) calc(50% - 0.5px), var(--line-strong) 50%, #fff calc(50% + 0.5px));
}
body.tool-frame .tool-hero .container { max-width: none; padding: 0; }
body.tool-frame .tool-hero-content { max-width: 860px; text-align: center; }
body.tool-frame .section-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--deep-purple);
    background: var(--lavender);
    border: 1px solid rgba(70, 46, 125, 0.28);
    border-radius: 2px;
    padding: 7px 14px;
    margin-bottom: 24px;
}
body.tool-frame .tool-hero-title {
    font-family: var(--font);
    font-size: clamp(34px, 4.6vw, 60px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.07;
    color: var(--navy);
    text-wrap: balance;
    margin-bottom: 20px;
}
body.tool-frame .tool-hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(1, 28, 64, 0.82);
    max-width: 62ch;
    margin: 0 auto 32px;
}
body.tool-frame .tool-hero-sub strong { color: var(--navy); font-weight: 700; }
body.tool-frame .tool-hero-cta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
body.tool-frame .tool-hero-cta .btn { min-height: 48px; padding: 0 26px; }
/* The workflow mockups show fabricated patient rows AND an in-app upload the
   visitor cannot use from this page. Both are stated here, outside the
   aria-hidden containers so assistive tech reads it. */
body.tool-frame .workflow-disclaimer {
    max-width: 780px;
    margin: 32px auto 0;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    /* the workflow section is navy — #4B5A6B here was 2.40:1, dark on dark */
    color: rgba(255, 255, 255, 0.70);
}

body.tool-frame .tool-proof {
    list-style: none;
    margin: 28px auto 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
}
body.tool-frame .tool-proof li {
    position: relative;
    padding-left: 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(1, 28, 64, 0.78);
}
body.tool-frame .tool-proof li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    width: 8px;
    height: 4px;
    border-left: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: translateY(-70%) rotate(-45deg);
}

/* ---------- How it works: navy band, same as the homepage Products band ---------- */
body.tool-frame .workflow-section {
    position: relative;
    background: var(--navy);
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 120px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 120px);
    padding: 0;
    color: #fff;
}
body.tool-frame .workflow-section > .container {
    max-width: var(--frame);
    width: calc(100% - 32px);
    padding: 96px var(--gutter) 88px;
    border-left: 1px solid var(--line-dark);
    border-right: 1px solid var(--line-dark);
}
body.tool-frame .workflow-section .section-header { text-align: center; margin: 0 auto 48px; }
body.tool-frame .workflow-section .section-tag { color: #fff; background: rgba(255,255,255,0.08); border-color: var(--line-dark); }
body.tool-frame .workflow-section .section-title { color: #fff; margin-left: auto; margin-right: auto; max-width: 20ch; font-size: clamp(32px, 4.2vw, 54px); }
body.tool-frame .workflow-section .section-sub { color: rgba(255,255,255,0.78); margin: 0 auto; }
@media (min-width: 769px) {
    body.tool-frame .workflow-section .product-tabs { grid-template-columns: repeat(4, 1fr); }
}
body.tool-frame .step-count {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 2px;
    font-family: var(--font);
}
body.tool-frame .product-tab.active .step-count { background: var(--blue); color: #fff; }
body.tool-frame .workflow-section .product-panel-info h3 { color: #fff; font-family: var(--font); font-weight: 600; letter-spacing: -0.02em; }
body.tool-frame .workflow-section .product-panel-info p { color: rgba(255,255,255,0.82); }
body.tool-frame .workflow-section .product-mockup .mockup-browser { border-radius: 6px; }
body.tool-frame .workflow-section .su-patient-count { color: var(--navy); }
body.tool-frame .tool-mid-cta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 40px; }
body.tool-frame .tool-mid-cta .btn-cta-main { background: #fff; color: var(--navy); border-color: #fff; }
body.tool-frame .tool-mid-cta .btn-cta-main:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
body.tool-frame .tool-mid-cta .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
body.tool-frame .tool-mid-cta .btn-outline:hover { border-color: #fff; color: #fff; background: transparent; }

/* ---------- Stats: hairline grid in a framed section ---------- */
body.tool-frame .stats-section {
    width: min(var(--frame), calc(100% - 32px));
    margin: 0 auto;
    padding: 0;
    background: #fff;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
body.tool-frame .stats-section > .container { max-width: none; padding: 0; }
body.tool-frame .stats-grid { gap: 0; border-bottom: 1px solid var(--line); }
body.tool-frame .stat-item { padding: 40px 28px; border-right: 1px solid var(--line); text-align: left; }
body.tool-frame .stat-item:last-child { border-right: 0; }
body.tool-frame .stat-number {
    font-family: var(--font);
    font-size: clamp(40px, 4vw, 56px);
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--navy);
    background: none;
    -webkit-text-fill-color: var(--navy);
}
body.tool-frame .stat-number span { color: var(--blue); -webkit-text-fill-color: var(--blue); }
body.tool-frame .stat-desc { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

/* Related products (second .stats-section, inline-styled cards) */
body.tool-frame .stats-section[style] { padding: 72px var(--gutter) 80px !important; border-top: 1px solid var(--line) !important; }
body.tool-frame .stats-section .section-header { text-align: center; margin: 0 auto 36px !important; }
body.tool-frame .stats-section .section-title { margin-left: auto; margin-right: auto; }
body.tool-frame .stats-section .section-sub { margin: 0 auto; }
body.tool-frame .stats-section a[style] {
    border-radius: 2px !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    padding: 22px !important;
}
body.tool-frame .stats-section a[style]:hover { border-color: var(--navy) !important; }
body.tool-frame .stats-section a[style] strong { color: var(--navy) !important; font-size: 15px !important; }
body.tool-frame .stats-section a[style] span { color: var(--ink-2) !important; }
body.tool-frame .stats-section p[style] a { color: var(--blue) !important; }

/* ---------- FAQ: framed, hairline accordion ---------- */
body.tool-frame .faq-section {
    width: min(var(--frame), calc(100% - 32px));
    margin: 0 auto;
    padding: 88px var(--gutter);
    background: #fff;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-top: 1px solid var(--line);
}
body.tool-frame .faq-section > .container { max-width: none; padding: 0; }
body.tool-frame .faq-section .section-header { text-align: center; }
body.tool-frame .faq-section .section-title { margin-left: auto; margin-right: auto; }
body.tool-frame .faq-grid { max-width: 860px; margin: 0 auto; gap: 0; border: 1px solid var(--line); }
body.tool-frame .faq-item {
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}
body.tool-frame .faq-item:last-child { border-bottom: 0; }
body.tool-frame .faq-item:hover { border-color: var(--line); box-shadow: none; }
body.tool-frame .faq-q { padding: 20px 24px; }
body.tool-frame .faq-q h4 { font-family: var(--font); font-size: 16px; font-weight: 600; color: var(--navy); }
body.tool-frame .faq-toggle { border-radius: 2px; color: var(--navy); border-color: var(--line-strong); }
body.tool-frame .faq-item.open .faq-toggle { background: var(--navy); color: #fff; border-color: var(--navy); }
body.tool-frame .faq-a { padding: 0 24px; }
body.tool-frame .faq-item.open .faq-a { padding-bottom: 20px; }
body.tool-frame .faq-a p { color: var(--ink-2); font-size: 15px; }

/* ---------- Final CTA copy spacing ---------- */
body.tool-frame .cta-content p { max-width: 58ch; margin-left: auto; margin-right: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    body.tool-frame .stats-grid { grid-template-columns: repeat(2, 1fr); }
    body.tool-frame .stat-item:nth-child(2n) { border-right: 0; }
    body.tool-frame .stat-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 768px) {
    body.tool-frame .workflow-section > .container { padding: 72px var(--gutter) 64px; }
    body.tool-frame .faq-section { padding: 64px var(--gutter); }
    body.tool-frame .stats-section[style] { padding: 56px var(--gutter) 64px !important; }
}
@media (max-width: 480px) {
    body.tool-frame .tool-hero,
    body.tool-frame .stats-section,
    body.tool-frame .faq-section { width: calc(100% - 16px); }
    body.tool-frame .workflow-section > .container { width: calc(100% - 16px); }
    body.tool-frame .tool-hero { padding: 40px 16px 36px; }
    body.tool-frame .tool-hero::after { width: 40px; height: 40px; }
    body.tool-frame .tool-hero-sub { font-size: 15px; margin-bottom: 22px; }
    body.tool-frame .tool-hero-cta .btn { flex: 1 1 100%; }
    body.tool-frame .tool-proof { gap: 6px 16px; margin-top: 20px; }
    body.tool-frame .tool-proof li { font-size: 11px; letter-spacing: 0.06em; }
    body.tool-frame .stat-item { padding: 28px 18px; }
    body.tool-frame .faq-q { padding: 16px 16px; }
    body.tool-frame .faq-a { padding: 0 16px; }
    body.tool-frame .tool-mid-cta .btn { flex: 1 1 100%; }
}
body.tool-frame .cta-content h2 { max-width: 26ch; }
@media (min-width: 1025px) {
    body.tool-frame .stats-section div[style*="grid-template-columns"] { grid-template-columns: repeat(4, 1fr) !important; max-width: 1100px !important; }
}