/*
 * Sosa Virtual — Virtual Receptionist Clinics Funnel Stylesheet
 * Serves: free-audit.html | audit-confirm.html | schedule-your-audit.html
 *
 * Self-contained: includes Aileron @font-face declarations so these pages
 * do NOT need to link to the main site css/style.css.
 *
 * All landing-page utilities prefixed .lp-
 * Section selectors use the section name (hero, lead, trust, reasons, …)
 */

/* =====================================================================
   AILERON — self-hosted font (weights: 100, 300, normal, 600, bold, 900)
   Fonts are served from /fonts/ at the repo root.
   Path resolves correctly from virtual-receptionist-clinics/ → ../fonts/
   ===================================================================== */

@font-face {
    font-family: 'Aileron';
    src: url('../fonts/Aileron-Bold.woff2') format('woff2'),
        url('../fonts/Aileron-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aileron';
    src: url('../fonts/Aileron-Black.woff2') format('woff2'),
        url('../fonts/Aileron-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aileron';
    src: url('../fonts/Aileron-Regular.woff2') format('woff2'),
        url('../fonts/Aileron-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aileron';
    src: url('../fonts/Aileron-Heavy.woff2') format('woff2'),
        url('../fonts/Aileron-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aileron';
    src: url('../fonts/Aileron-Light.woff2') format('woff2'),
        url('../fonts/Aileron-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aileron';
    src: url('../fonts/Aileron-SemiBold.woff2') format('woff2'),
        url('../fonts/Aileron-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aileron';
    src: url('../fonts/Aileron-Thin.woff2') format('woff2'),
        url('../fonts/Aileron-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* =====================================================================
   BASE RESET — scoped to funnel pages
   ===================================================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

:root {
    scroll-behavior: smooth;
}

body {
    font-family: 'Aileron', system-ui, sans-serif;
    font-size: 16px;
    color: #000000;
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a:hover, a:focus, a:active {
    text-decoration: none;
}

/* =====================================================================
   FREE AUDIT LANDING PAGE
   virtual-receptionist-clinics/free-audit.html
   All utilities prefixed .lp-  |  Sections prefixed with section name
   ===================================================================== */

/* Box-sizing for landing page elements (no Bootstrap on this page) */
.lp-nav, .lp-nav *,
.lp-footer, .lp-footer *,
.lp-container, .lp-container *,
.hero, .hero *,
.comparison, .comparison *,
.lp-form, .lp-form *,
.faq, .faq *,
.finale, .finale * {
    box-sizing: border-box;
}

/* --- Shared landing page container ---
   Same max-width as .container (1190px) with consistent side gutters */
.lp-container {
    max-width: 1190px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* --- Eyebrow pill — mirrors .titlebar h6 from style.css --- */
.lp-eyebrow {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: #6287F6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.6;
    margin-bottom: 18px;
}
/* Hand-drawn underline SVG — width set dynamically by JS to last line width */
.lp-eyebrow__underline {
    display: block;
    height: 7px;
    margin-top: 7px;
    overflow: visible;
}

/* --- Gradient text — mirrors .titlebar h2 span and .hero-banner-block h1 span --- */
.lp-text-gradient {
    background: linear-gradient(91.85deg, #6287F6 0.31%, #333366 98.61%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- CTA button (isolation effect)
   #B45309 deep amber-orange — used ONLY on CTA buttons, nowhere else on the page.
   Passes WCAG AA 4.5:1 contrast against white text (~5:1 actual).
   Brand palette is blues/purples; orange creates maximum contrast. --- */
.lp-btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    min-height: 52px;
    border-radius: 50px;
    border: none;
    background: #B45309;
    color: #ffffff;
    font-family: 'Aileron', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: 0.4s linear;
    -webkit-transition: 0.4s linear;
}
.lp-btn-cta:hover,
.lp-btn-cta:focus-visible {
    background: #9A4108;
    color: #ffffff;
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
}
.lp-btn-cta:active {
    transform: translateY(0);
}

/* --- Friction remover — mirrors .hero-banner-block h5 italic style --- */
.lp-friction {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    color: #707070;
    line-height: 22px;
    margin-top: 10px;
}

/* --- Minimal nav (logo only — no site navigation on landing pages) --- */
.lp-nav {
    padding: 18px 0;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}
.lp-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.lp-nav__logo img {
    height: 50px;
    width: auto;
}
/* Nav CTA — smaller than main CTAs, same isolation colour */
.lp-nav__cta-btn {
    padding: 10px 22px;
    min-height: 42px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    /* Hide nav CTA on small phones — main hero CTA is immediately visible */
    .lp-nav__cta-btn {
        display: none;
    }
}

/* --- Minimal footer (privacy + copyright only — no competing links) --- */
.lp-footer {
    background: #05050C;
    padding: 25px 0;
}
.lp-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.lp-footer p,
.lp-footer a {
    font-size: 14px;
    font-weight: 400;
    color: #707070;
    line-height: 1;
}
.lp-footer a:hover {
    color: #ffffff;
}

/* =====================================================================
   S1 — HERO
   Two-column grid: copy left (~57%), image right (~43%).
   Background: exact main-site hero gradient (#DEDEFF → #fff).
   Bullets: reuse existing bullet-ic.svg pattern from style.css.
   ===================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 90px;
}
/* Exact gradient from .hero-banner:after in style.css */
.hero::after {
    position: absolute;
    content: '';
    background: linear-gradient(204.99deg, #DEDEFF 15.89%, #FFFFFF 50%, #FFFFFF 84.11%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}
.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.32fr 1fr;
    gap: 64px;
    align-items: center;
}
.hero .lp-eyebrow {
    margin-bottom: 15px;
}
/* H1 — matches .hero-banner-block h1: weight 800, -0.02em tracking */
.hero__h1 {
    font-weight: 800;
    font-size: 46px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0 0 20px;
}
.hero__sub {
    font-size: 16px;
    font-weight: 400;
    color: #707070;
    line-height: 22px;
    margin: 0 0 28px;
}
/* Bullet list — mirrors .virtual-receptionist-wrp .hero-banner-block ul */
.hero__bullets {
    margin: 0 0 32px;
}
/* Mirrors .virtual-receptionist-wrp ul li */
.hero__bullet {
    position: relative;
    padding: 0 0 0 25px;
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 400;
    color: #707070;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
}
.hero__bullet:last-child {
    margin: 0;
}
/* Mirrors .virtual-receptionist-wrp ul li:before — same bullet-ic.svg */
.hero__bullet::before {
    position: absolute;
    content: '';
    background: url('../images/bullet-ic.svg') 0 0 no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
    top: 3px;
    left: 0;
    flex-shrink: 0;
}
.hero__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.hero__image {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Panel is a transparent passthrough — image blends into hero gradient */
.hero__img-panel {
    background: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
}
/* No border-radius or shadow — let transparent PNG/WebP bleed into bg */
.hero__img {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    display: block;
}

/* =====================================================================
   FREE AUDIT — RESPONSIVE BREAKPOINTS
   ===================================================================== */
@media (max-width: 991px) {
    .hero__inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .hero__h1 {
        font-size: 36px;
    }
}
@media (max-width: 767px) {
    .lp-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .lp-btn-cta {
        width: 100%;
    }
    .lp-footer__inner {
        justify-content: center;
        text-align: center;
    }
    .hero {
        padding: 48px 0;
    }
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .hero__h1 {
        font-size: 30px;
        line-height: 1.12;
    }
    /* Image stacks below copy on mobile */
    .hero__content { order: 1; }
    .hero__image   { order: 2; }
    .hero__cta-wrap {
        align-items: stretch;
    }
}
/* =====================================================================
   S2 — THE LEAD
   Single column, max-width 720px centered. Background #FAFAFA matches
   .problem-wrp. Body text mirrors .hero-banner-block p (16px/#707070/22px).
   H2 mirrors .titlebar h2 (weight 600, -0.02em tracking).
   ===================================================================== */
.lead {
    background: #FAFAFA;
    padding: 100px 0;
}
.lead__inner {
    max-width: 720px;
    margin: 0 auto;
}
/* H2 — mirrors .titlebar h2 weight and tracking.
   Gradient applied to benefit phrases via .lp-text-gradient span in HTML. */
.lead__h2 {
    font-weight: 600;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0 0 30px;
    text-align: center;
}
/* Intro sentence before the problem bullets */
.lead__intro {
    font-size: 16px;
    font-weight: 400;
    color: #707070;
    line-height: 22px;
    margin: 0 0 16px;
}
/* Problem bullet list */
.lead__problem-list {
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Each problem bullet — flex row: icon + text */
.lead__problem-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    font-weight: 400;
    color: #707070;
    line-height: 1.5;
}
/* Yellow exclamation circle icon */
.lead__bullet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: #FFC107;
    color: #000000;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
/* Key phrase highlight inside problem bullets — brand navy, semibold */
.lead__problem-item strong {
    color: #333366;
    font-weight: 600;
}
/* Body paragraphs (stats + closing) — mirrors .hero-banner-block p */
.lead__body {
    font-size: 16px;
    font-weight: 400;
    color: #707070;
    line-height: 22px;
    margin: 0 0 18px;
}
.lead__body:last-of-type {
    margin-bottom: 0;
}
/* Stats emphasis — brand navy, semibold */
.lead__body strong {
    color: #333366;
    font-weight: 600;
}
/* Byline row — avatar left, text right */
.lead__byline {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* Circular author photo — 80×80, border-radius 50% */
.lead__avatar {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.lead__byline-text {
    font-size: 14px;
    font-weight: 400;
    color: #707070;
    line-height: 1.5;
}
/* CTA at end of section — centered, added per user instruction */
.lead__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 36px;
    text-align: center;
}
@media (max-width: 767px) {
    .lead {
        padding: 48px 0;
    }
    .lead__h2 {
        font-size: 26px;
    }
    .lead__byline {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    .lead__cta-wrap .lp-btn-cta {
        width: 100%;
    }
}
/* =====================================================================
   S3 — TRUST SIGNALS + PLATFORM LOGOS
   Slim credibility strip. White bg contrasts with S2 (#FAFAFA).
   Reduced padding (70px) vs full body sections (100px).
   PMS logos rendered as grayscale text badges — TODO: swap for real logos.
   ===================================================================== */
.trust {
    background: #ffffff;
    padding: 70px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* H2 — same weight/tracking as .titlebar h2 */
.trust__h2 {
    font-weight: 600;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    text-align: center;
    margin: 0 0 10px;
}
/* Stat sub-line below headline */
.trust__stat-line {
    font-size: 14px;
    font-weight: 400;
    color: #707070;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 44px;
}
/* Horizontal PMS logo strip — flex-wrap handles mobile reflow */
.trust__logo-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 36px;
}
/* Grayscale text badge — placeholder until real logo files are supplied.
   TODO: replace inner text + add <img> tag with actual PMS logo file. */
.trust__logo-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 8px;
    background: #F3F3F3;
    color: #666666;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
/* Trust badge row — Canada, USA, Privacy */
.trust__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
}
/* Individual trust badge pill */
.trust__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 50px;
    background: #F9FAFF;
    border: 1px solid rgba(98, 135, 246, 0.2);
    font-size: 13px;
    font-weight: 400;
    color: #707070;
    white-space: nowrap;
}
.trust__badge svg {
    flex-shrink: 0;
}
/* Privacy copy — small, centered, italic */
.trust__privacy {
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    color: #9E9E9E;
    line-height: 1.7;
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .trust {
        padding: 48px 0;
    }
    .trust__h2 {
        font-size: 24px;
    }
    .trust__logo-strip {
        gap: 8px;
    }
    .trust__logo-badge {
        font-size: 13px;
        padding: 8px 16px;
    }
}
/* =====================================================================
   S4 — REASONS WHY
   #FAFAFA background alternates with S3 white.
   Card pattern mirrors .business-block from style.css exactly.
   Icon circles mirror .business-icon figure.
   2-column grid desktop/tablet → 1-column mobile.
   ===================================================================== */
.reasons {
    background: #FAFAFA;
    padding: 100px 0;
}
.reasons__titlebar {
    text-align: center;
    margin: 0 0 52px;
}
/* H2 — same weight/size/tracking as .titlebar h2 */
.reasons__h2 {
    font-weight: 600;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0;
}
/* 2-column CSS grid — matches design directive */
.reasons__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
/* Card — mirrors .business-block exactly */
.reasons__card {
    padding: 30px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0px -4px 50px rgba(0, 0, 0, 0.05);
    transition: .4s linear;
    -webkit-transition: .4s linear;
    cursor: default;
}
.reasons__card:hover {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
}
/* Icon circle — mirrors .business-icon figure with brand blue tint */
.reasons__icon {
    width: 56px;
    height: 56px;
    background: #F9FAFF;
    border-radius: 100%;
    border: 1px solid rgba(98, 135, 246, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 18px;
    flex-shrink: 0;
}
.reasons__icon svg {
    display: block;
    flex-shrink: 0;
}
/* Card title — mirrors .business-data h3 */
.reasons__title {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    line-height: 26px;
    margin: 0 0 10px;
}
/* Card body — mirrors .business-data p */
.reasons__body {
    font-size: 15px;
    font-weight: 400;
    color: #707070;
    line-height: 22px;
    margin: 0;
}
@media (max-width: 767px) {
    .reasons {
        padding: 48px 0;
    }
    .reasons__titlebar {
        margin-bottom: 32px;
    }
    .reasons__h2 {
        font-size: 26px;
    }
    .reasons__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .reasons__card {
        padding: 24px;
    }
}
/* =====================================================================
   S5 — CLINIC CALL CAPTURE METHOD  (PATTERN INTERRUPT — DARK)
   Background: #05050C — same as main site footer.
   4-step horizontal timeline on desktop, vertical on mobile.
   Step 1 highlighted with brand gradient + CSS pulse.
   ===================================================================== */
.method {
    background: #05050C;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
/* Subtle radial glow behind the headline area */
.method::before {
    content: '';
    position: absolute;
    top: -15%;
    left: -10%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(98, 135, 246, 0.07) 0%, transparent 70%);
    pointer-events: none;
}
.method__titlebar {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 0;
}
.method__h2 {
    font-weight: 600;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 16px;
}
.method__sub {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.65;
    margin: 0;
}
.method__story {
    max-width: 680px;
    margin: 24px auto 52px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.75;
    text-align: center;
}
/* Timeline grid — position:relative anchors the connector ::before */
.method__timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    position: relative;
    margin: 0 0 48px;
}
/* Horizontal connector line — runs between circle centres */
.method__timeline::before {
    content: '';
    position: absolute;
    top: 28px;       /* half of 56px circle */
    left: 12.5%;     /* centre of column 1 */
    width: 75%;      /* col-1 centre → col-4 centre */
    height: 2px;
    background: rgba(255, 255, 255, 0.10);
    z-index: 0;
}
/* Individual step */
.method__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* Step number circle */
.method__step-num {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.50);
    margin: 0 0 20px;
    flex-shrink: 0;
    transition: 0.4s linear;
    -webkit-transition: 0.4s linear;
}
/* Step 1 active — brand gradient + pulse ring */
.method__step--active .method__step-num {
    background: linear-gradient(135deg, #6287F6 0%, #333366 100%);
    border-color: transparent;
    color: #ffffff;
    animation: method-pulse 2.6s ease-out infinite;
}
@keyframes method-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(98, 135, 246, 0.45); }
    70%  { box-shadow: 0 0 0 14px rgba(98, 135, 246, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(98, 135, 246, 0);    }
}
.method__step-content { flex: 1; }
.method__step-name {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    margin: 0 0 8px;
}
.method__step--active .method__step-name {
    color: #6287F6;
}
.method__step-desc {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.50);
    line-height: 1.7;
    margin: 0;
}
/* Bridge to offer */
.method__bridge {
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    color: rgba(255, 255, 255, 0.60);
    line-height: 1.65;
    max-width: 580px;
    margin: 0 auto 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* CTA on dark section */
.method__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.method__cta-wrap .lp-friction {
    color: rgba(255, 255, 255, 0.40);
}
/* Mobile: collapse to vertical timeline */
@media (max-width: 767px) {
    .method {
        padding: 48px 0;
    }
    .method__h2 {
        font-size: 26px;
    }
    .method__story {
        margin-bottom: 36px;
    }
    .method__timeline {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 36px;
    }
    /* Vertical connector — left-side line */
    .method__timeline::before {
        top: 56px;
        left: 27px;
        width: 2px;
        height: calc(100% - 72px);
    }
    .method__step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 20px;
        padding-bottom: 32px;
    }
    .method__step:last-child {
        padding-bottom: 0;
    }
    .method__step-num {
        margin: 0;
    }
    .method__step-content {
        padding-top: 14px;
    }
    .method__cta-wrap .lp-btn-cta {
        width: 100%;
    }
}

/* =====================================================================
   S6 — SOCIAL PROOF
   White background — sharp contrast after dark S5.
   3-col testimonial cards → 2-col tablet → 1-col mobile.
   Brand-gradient stats bar. Styled phone screenshot.
   ===================================================================== */
.proof {
    background: #ffffff;
    padding: 100px 0;
}
.proof__titlebar {
    text-align: center;
    margin: 0 0 52px;
}
.proof__h2 {
    font-weight: 600;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    max-width: 720px;
    margin: 0 auto;
}
/* 3-column testimonial card grid */
.proof__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 0 52px;
}
/* Individual card — mirrors .business-block bg/radius/shadow */
.proof__card {
    background: #F9FAFF;
    border-radius: 20px;
    padding: 28px;
    display: flex;
    flex-direction: column;
}
/* Large opening quote mark */
.proof__card-mark {
    font-size: 52px;
    line-height: 0.8;
    color: #6287F6;
    font-weight: 800;
    display: block;
    margin: 0 0 12px;
    font-family: Georgia, serif;
}
/* Forced consumption headline */
.proof__card-headline {
    font-size: 15px;
    font-weight: 700;
    color: #000000;
    line-height: 1.4;
    margin: 0 0 14px;
}
/* Testimonial body */
.proof__card-body {
    font-size: 14px;
    font-weight: 400;
    color: #707070;
    line-height: 1.65;
    margin: 0;
    flex-grow: 1;
}
/* Footer: avatar + attribution */
.proof__card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.proof__card-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.proof__card-attr {
    font-size: 12px;
    font-weight: 400;
    color: #707070;
    line-height: 1.45;
    font-style: italic;
}
/* Stats bar — brand gradient, mirrors .solution-inner-wrp pattern */
.proof__stats-bar {
    background: linear-gradient(91.85deg, #6287F6 0.31%, #333366 98.61%);
    border-radius: 20px;
    padding: 36px 48px;
    margin: 0 0 52px;
}
.proof__stats-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.proof__stat {
    text-align: center;
    flex: 1;
}
.proof__stat-value {
    display: block;
    font-size: 30px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
.proof__stat-label {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.45;
}
.proof__stat-divider {
    width: 1px;
    height: 44px;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}
/* Native screenshot — raw phone message UI */
.proof__screenshot-wrap {
    display: flex;
    justify-content: center;
    margin: 0 0 52px;
}
.proof__screenshot {
    background: #1C1C1E;
    border-radius: 28px;
    padding: 20px 20px 24px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.10);
}
.proof__screenshot-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 16px;
}
.proof__screenshot-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.proof__screenshot-title {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.40);
    flex: 1;
    text-align: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.proof__screenshot-bubble {
    background: #2C2C2E;
    border-radius: 18px 18px 18px 5px;
    padding: 16px 18px;
}
.proof__screenshot-msg {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-style: italic;
    margin: 0 0 6px;
}
.proof__screenshot-sender {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.30);
    font-style: normal;
}
/* CTA at end of section */
.proof__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* Responsive */
@media (max-width: 991px) {
    .proof__cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .proof__stats-inner {
        flex-direction: column;
        align-items: center;
    }
    .proof__stat-divider {
        width: 48px;
        height: 1px;
    }
    .proof__stats-bar {
        padding: 28px 32px;
    }
}
@media (max-width: 767px) {
    .proof {
        padding: 48px 0;
    }
    .proof__h2 {
        font-size: 26px;
    }
    .proof__titlebar {
        margin-bottom: 32px;
    }
    .proof__cards {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 36px;
    }
    .proof__stats-bar {
        padding: 24px 20px;
        margin-bottom: 36px;
    }
    .proof__screenshot-wrap {
        margin-bottom: 36px;
    }
    .proof__cta-wrap .lp-btn-cta {
        width: 100%;
    }
}
/* =====================================================================
   S7 — COMPARISON TABLE
   White background — sharp contrast after light S6.
   4-column table desktop. Stacked labeled cards on mobile.
   Sosa Virtual column highlighted with brand-tinted bg + top accent.
   ===================================================================== */
.comparison {
    background: #ffffff;
    padding: 100px 0;
}
.comparison__titlebar {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 52px;
}
.comparison__h2 {
    font-weight: 600;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000;
    margin: 0;
}
/* Outer wrap allows horizontal scroll on very small viewports before the
   card layout kicks in — prevents layout breakage on 360-375px screens */
.comparison__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    border: 1px solid #F0F0F0;
}
.comparison__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.6;
    min-width: 520px; /* prevents table from collapsing before mobile breakpoint */
}
/* ── Header row ──────────────────────────────────────────────── */
.comparison__th {
    padding: 16px 20px;
    font-size: 12px;
    font-weight: 700;
    color: #9E9E9E;
    text-align: left;
    vertical-align: bottom;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #FAFAFA;
    border-bottom: 1px solid #EBEBEB;
}
/* Question column header — rendered empty, label is decorative */
.comparison__th--question {
    width: 30%;
}
/* Sosa Virtual column header — accent top border + tinted bg + badge */
.comparison__th--sosa {
    background: rgba(98, 135, 246, 0.06);
    border-top: 3px solid #6287F6;
    text-align: center;
    padding-top: 18px;
}
/* Gradient pill badge inside the Sosa Virtual column header */
.comparison__col-badge {
    display: inline-block;
    background: linear-gradient(91.85deg, #6287F6 0.31%, #333366 98.61%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 50px;
    letter-spacing: 0.03em;
    text-transform: none;
}
/* ── Body rows ──────────────────────────────────────────────── */
.comparison__row {
    border-bottom: 1px solid #F0F0F0;
    transition: background 0.2s;
}
.comparison__row:last-child {
    border-bottom: none;
}
.comparison__row:hover {
    background: #FAFAFA;
}
.comparison__td {
    padding: 18px 20px;
    color: #707070;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.6;
}
/* Question column cell */
.comparison__td--question {
    font-weight: 600;
    color: #1A1A2E;
    font-size: 14px;
    border-right: 1px solid #F0F0F0;
}
/* Sosa Virtual column cells */
.comparison__td--sosa {
    background: rgba(98, 135, 246, 0.04);
    color: #1A1A2E;
    font-weight: 500;
    text-align: center;
}
/* ── Check / cross indicators ───────────────────────────────── */
.comparison__check {
    color: #6287F6;
    font-weight: 800;
    margin-right: 3px;
}
.comparison__cross {
    color: #CCCCCC;
    font-weight: 800;
    margin-right: 3px;
}
/* CTA at end of section */
.comparison__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 52px;
}
/* ── Mobile: block layout — one card per question ───────────── */
@media (max-width: 767px) {
    .comparison {
        padding: 48px 0;
    }
    .comparison__h2 {
        font-size: 26px;
    }
    /* Hide the outer border; overflow-x:hidden kills residual scroll */
    .comparison__table-wrap {
        overflow-x: hidden;
        overflow-y: visible;
        border: none;
        border-radius: 0;
    }
    /* Convert every table element to block.
       min-width: 0 is critical — it overrides the desktop min-width: 520px
       that would otherwise force horizontal scroll even in block display. */
    .comparison__table,
    .comparison__table thead,
    .comparison__table tbody,
    .comparison__table th,
    .comparison__table td,
    .comparison__table tr {
        display: block;
        width: 100%;
        min-width: 0;
    }
    /* Hide desktop column headers — data-label attributes supply labels */
    .comparison__table thead {
        display: none;
    }
    /* Each row becomes a rounded card */
    .comparison__row {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
        margin-bottom: 16px;
        border: none;
        overflow: hidden;
    }
    .comparison__row:hover {
        background: #fff;
    }
    /* ── IMPORTANT: cascade order matters here.
       .comparison__td must be declared BEFORE the modifier classes
       (.comparison__td--question, .comparison__td--sosa) so the
       modifiers win on equal-specificity collisions. ── */

    /* Base cell */
    .comparison__td {
        padding: 14px 16px;
        border-bottom: 1px solid #F5F5F5;
        text-align: left;
        background: #fff;
        color: #555;
        font-size: 14px;
        line-height: 1.55;
    }
    .comparison__td:last-child {
        border-bottom: none;
    }
    /* data-label mini-header above each cell value */
    .comparison__td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #ADADAD;
        margin-bottom: 5px;
    }
    /* Question cell — AFTER base .comparison__td so background wins */
    .comparison__td--question {
        background: #1A1F2E;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        padding: 16px;
        border-right: none;
        border-bottom: none;
    }
    .comparison__td--question::before {
        display: none;
    }
    /* Sosa Virtual cell — AFTER base .comparison__td so background wins */
    .comparison__td--sosa {
        background: rgba(98, 135, 246, 0.05);
        color: #1A1A2E;
        text-align: left;
    }
    .comparison__td--sosa::before {
        color: #6287F6;
    }
    .comparison__cta-wrap {
        margin-top: 36px;
    }
    .comparison__cta-wrap .lp-btn-cta {
        width: 100%;
    }
}

/* =====================================================================
   S8 — LEAD QUALIFICATION FORM
   ID: #form — this is the scroll target for all CTAs on the page.
   Light background. White card, max-width 600px, centered.
   GHL embed placeholder inside the card.
   ===================================================================== */
.lp-form {
    background: #F4F6FA;
    padding: 100px 0;
}
.lp-form__card {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 4px 48px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05);
    padding: 52px 56px;
}
.lp-form__h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #000;
    margin: 0 0 14px;
    text-align: center;
}
.lp-form__sub {
    font-size: 15px;
    color: #707070;
    line-height: 1.65;
    text-align: center;
    margin: 0 0 16px;
}
/* Google rating badge — book-a-call.html only. Star rating shown, review
   count intentionally left out (only 4 reviews so far, not worth drawing
   attention to the number). */
.cal-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 10px;
    color: #4A4A4A;
    font-size: 13px;
    font-weight: 600;
}
.cal-rating__stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: #F5A623;
}
.cal-rating__icon {
    display: block;
}

/* Availability callout — calm brand blue, no pulse. Copy frames the cap as
   a quality choice ("full attention"), not urgency, so the styling matches. */
.lp-form__scarcity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto 24px;
    background: #EFF3FE;
    border: 1.5px solid #6287F6;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    color: #3856B8;
    letter-spacing: 0.01em;
}
.lp-form__scarcity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6287F6;
    flex-shrink: 0;
}
/* GHL embed container — min-height prevents layout collapse before embed loads */
.lp-form__embed {
    min-height: 400px;
}
.lp-form__friction {
    font-size: 13px;
    font-style: italic;
    color: #9E9E9E;
    text-align: center;
    margin: 16px 0 0;
}
/* Qualification note — small, below friction remover */
.lp-form__qualify {
    font-size: 12px;
    color: #ADADAD;
    line-height: 1.65;
    text-align: center;
    max-width: 480px;
    margin: 20px auto 0;
    padding-top: 20px;
    border-top: 1px solid #F0F0F0;
}
@media (max-width: 767px) {
    .lp-form {
        padding: 48px 0;
    }
    .lp-form__card {
        padding: 36px 20px;
        border-radius: 16px;
    }
    .lp-form__h2 {
        font-size: 24px;
    }
}

/* =====================================================================
   S9 — FAQ ACCORDION
   Light background. Accordion items with JS class toggle.
   max-height transition for smooth open/close.
   ===================================================================== */
.faq {
    background: #FAFAFA;
    padding: 100px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.faq__titlebar {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 52px;
}
.faq__h2 {
    font-weight: 600;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000;
    margin: 0;
}
.faq__list {
    max-width: 760px;
    margin: 0 auto;
}
/* Individual accordion item */
.faq__item {
    border-bottom: 1px solid #EBEBEB;
}
.faq__item:first-child {
    border-top: 1px solid #EBEBEB;
}
/* Question button — full-width, flex row */
.faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.faq__question:focus-visible {
    outline: 2px solid #6287F6;
    outline-offset: 2px;
    border-radius: 4px;
}
.faq__question-text {
    font-size: 16px;
    font-weight: 600;
    color: #1A1A2E;
    line-height: 1.4;
    flex: 1;
}
/* Chevron SVG — rotates 180° when item is open */
.faq__chevron {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    display: inline-block;
    color: #9E9E9E;
    transition: transform 0.28s ease, color 0.2s;
}
.faq__item--open .faq__chevron {
    transform: rotate(180deg);
    color: #6287F6;
}
/* Answer panel — hidden by default, revealed via max-height transition */
.faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
}
.faq__item--open .faq__answer {
    max-height: 480px;
}
.faq__answer-text {
    font-size: 15px;
    color: #707070;
    line-height: 1.75;
    padding: 0 0 24px;
    margin: 0;
}
/* Mobile */
@media (max-width: 767px) {
    .faq {
        padding: 48px 0;
    }
    .faq__h2 {
        font-size: 26px;
    }
    .faq__question-text {
        font-size: 15px;
    }
    .faq__answer-text {
        font-size: 14px;
    }
}

/* =====================================================================
   S10 — PAGE FULL STOP  (DARK pattern interrupt — matches S5)
   Dark #05050C background, white text, brand-blue recap bullets,
   isolation-color CTA button.
   ===================================================================== */
.finale {
    background: #05050C;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
/* Subtle radial glow — mirrors S5 aesthetic */
.finale::before {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(98, 135, 246, 0.07) 0%, transparent 70%);
    pointer-events: none;
}
.finale__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.finale__h2 {
    font-weight: 700;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #ffffff;
    margin: 0 0 48px;
}
/* Recap points list */
.finale__points {
    list-style: none;
    padding: 0;
    margin: 0 0 52px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.finale__point {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.80);
    line-height: 1.55;
}
/* Brand-blue checkmark icon */
.finale__point-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: rgba(98, 135, 246, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
/* Last recap point — bold tagline treatment */
.finale__point--tagline {
    font-weight: 700;
    color: #ffffff;
    font-size: 17px;
}
/* CTA block */
.finale__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.finale__cta-wrap .lp-friction {
    color: rgba(255, 255, 255, 0.40);
}
/* Mobile */
@media (max-width: 767px) {
    .finale {
        padding: 64px 0;
    }
    .finale__h2 {
        font-size: 28px;
        margin-bottom: 36px;
    }
    .finale__points {
        margin-bottom: 40px;
    }
    .finale__point {
        font-size: 15px;
    }
    .finale__cta-wrap .lp-btn-cta {
        width: 100%;
    }
}

/* ── Bootstrap Icons sizing per context ──────────────────────── */
/* S3 shield badge */
.trust__badge i {
    font-size: 14px;
    color: #6287F6;
    line-height: 1;
    vertical-align: middle;
}
/* S4 reason card icons */
.reasons__icon i {
    font-size: 24px;
    color: #6287F6;
    line-height: 1;
}
/* S5 method step circle icons */
.method__step-num i {
    font-size: 20px;
    line-height: 1;
    color: currentColor;
}
/* S10 finale checkmarks */
.finale__point-icon i {
    font-size: 11px;
    color: #6287F6;
    line-height: 1;
}

/* =====================================================================
   CALENDAR BOOKING PAGE
   virtual-receptionist-clinics/schedule-your-audit.html
   All selectors prefixed .cal-
   Single centered column, max-width 680px. No navigation. No footer links.
   ===================================================================== */

/* Box-sizing scope */
.cal-header, .cal-header *,
.cal-intro, .cal-intro *,
.cal-expect, .cal-expect *,
.cal-embed-section, .cal-embed-section *,
.cal-notes, .cal-notes * {
    box-sizing: border-box;
}

/* --- Narrow content container (700px) -------------------------------- */
.cal-container {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* =====================================================================
   S1 — LOGO
   Centered, no navigation. 44px top padding, 28px below before headline.
   ===================================================================== */
.cal-header {
    background: #ffffff;
    padding: 44px 0 28px;
    text-align: center;
}

/* Logo */
.cal-logo-link {
    display: inline-block;
}
.cal-logo-img {
    height: 44px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* =====================================================================
   S2 — HEADLINE + SUB-HEADLINE
   Centered text. Header provides top spacing (44px logo padding + 28px below).
   ===================================================================== */
.cal-intro {
    padding: 0 0 0;
    text-align: center;
    animation: calFadeUp 0.45s ease both;
}
.cal-headline {
    font-weight: 700;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0 0 16px;
}
.cal-sub {
    font-size: 17px;
    font-weight: 400;
    color: #707070;
    line-height: 1.65;
    margin: 0 auto 20px;
    max-width: 560px;
}
.cal-sub__highlight {
    color: #6287F6;
    font-weight: 600;
}
/* =====================================================================
   S3 — WHAT YOU'LL GET ON THE CALL (title + 3 bullets)
   Section title centered; bullets left-aligned within centered column.
   ===================================================================== */
.cal-expect {
    padding: 28px 0 40px;
    animation: calFadeUp 0.45s ease 0.1s both;
}
/* Section title — smaller than the H1 headline, acts as a section label */
.cal-expect__title {
    font-size: 19px;
    font-weight: 600;
    color: #000000;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 16px;
    text-align: center;
}
.cal-expect__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cal-expect__item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15px;
    font-weight: 400;
    color: #4A4A4A;
    line-height: 1.6;
}
/* Checkmark icon — small filled circle in brand blue */
.cal-expect__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(98, 135, 246, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.cal-expect__icon svg {
    color: #6287F6;
}

/* =====================================================================
   S4 — GHL INTEGRATED FORM + CALENDAR EMBED
   Uses .cal-container (700px), same as every other section on this page,
   so the calendar's width matches the headline column above it.
   form_embed.js handles the iframe's height.
   ===================================================================== */
.cal-embed-section {
    padding: 36px 0 40px;
}
/* Transparent pass-through — no border, shadow, or height restriction.
   --cal-embed-height is the single source of truth for the placeholder
   height, shared by the iframe and the loading overlay so they can't drift
   apart; overridden once in the mobile breakpoint below. */
.cal-embed-wrap {
    width: 100%;
    position: relative;
    --cal-embed-height: 560px;
}
.cal-embed-wrap iframe {
    width: 100%;
    border: none;
    display: block;
    /* Placeholder height so the calendar is visible immediately, before
       GHL's form_embed.js postMessage auto-resize takes over */
    min-height: var(--cal-embed-height);
}
/* Loading state — overlays the iframe until it fires 'load' */
.cal-embed-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cal-embed-height);
    background: #ffffff;
}
.cal-embed-loading[hidden] {
    display: none;
}
.cal-embed-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(98, 135, 246, 0.2);
    border-top-color: #6287F6;
    border-radius: 50%;
    animation: cal-spin 0.8s linear infinite;
}
@keyframes cal-spin {
    to { transform: rotate(360deg); }
}
/* Always-visible contact fallback below the embed */
.cal-embed-contact-note {
    text-align: center;
    font-size: 13px;
    color: #9A9A9A;
    margin: 16px 0 0;
}
.cal-embed-contact-note a {
    color: #6287F6;
}
/* Fallback — hidden by default; JS reveals after timeout if widget doesn't load */
.cal-embed-fallback {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 32px;
    text-align: center;
}
.cal-embed-fallback[hidden] {
    display: none;
}
.cal-embed-fallback__icon {
    color: #6287F6;
    opacity: 0.45;
}
.cal-embed-fallback__msg {
    font-size: 15px;
    color: #707070;
    line-height: 1.65;
    max-width: 380px;
    margin: 0;
}
.cal-embed-fallback__msg a {
    color: #6287F6;
    text-decoration: underline;
}
.cal-embed-fallback__msg a:hover {
    color: #4267e8;
}

/* =====================================================================
   S5 — FRICTION REMOVER + QUALIFICATION NOTE
   Centered, below the embed. No CTA button — GHL handles its own actions.
   ===================================================================== */
.cal-notes {
    padding: 0 0 64px;
    text-align: center;
}
/* Friction remover — primary reassurance, medium gray */
.cal-notes__friction {
    font-size: 15px;
    font-weight: 400;
    color: #707070;
    line-height: 1.65;
    margin: 0 0 12px;
}
/* =====================================================================
   CALENDAR PAGE — FADE-IN ANIMATION
   Simple opacity + translateY. CSS-only, no JS dependency.
   "Fade-in on page load for the content is fine." (CLAUDE.md dev note)
   ===================================================================== */
@keyframes calFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================================
   CALENDAR PAGE — RESPONSIVE BREAKPOINTS
   Mobile-first: single column throughout (already single column on desktop).
   ===================================================================== */
@media (max-width: 767px) {
    .cal-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .cal-header {
        padding: 32px 0 20px;
    }
    .cal-logo-img {
        height: 38px;
    }
    .cal-intro {
        padding: 0;
    }
    .cal-headline {
        font-size: 27px;
    }
    .cal-sub {
        font-size: 16px;
    }
    .cal-expect {
        padding: 22px 0 32px;
    }
    .cal-embed-section {
        padding: 28px 0 36px;
    }
    .cal-embed-wrap {
        --cal-embed-height: 480px;
    }
    .cal-notes {
        padding: 0 0 48px;
    }
}
@media (max-width: 480px) {
    .cal-headline {
        font-size: 24px;
    }
}

/* =====================================================================
   AUDIT CONFIRMATION PAGE
   virtual-receptionist-clinics/audit-confirmed.html
   All selectors prefixed .ty-
   Colors: #22C55E (success green), #6287F6 (brand blue), no #F97316 CTA
   ===================================================================== */

/* Box-sizing scope */
.ty-page,
.ty-confirm, .ty-confirm *,
.ty-next, .ty-next *,
.ty-prep, .ty-prep *,
.ty-proof, .ty-proof *,
.ty-founder, .ty-founder *,
.ty-footer, .ty-footer * {
    box-sizing: border-box;
}

/* --- Narrow content container (720px) -------------------------------- */
.ty-container {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* =====================================================================
   S1 — LOGO + CONFIRMATION + FUTURE-PACE
   White background. Logo small + centered. Animated SVG checkmark.
   ===================================================================== */

/* Page background */
.ty-page {
    background: #FAFAFA;
}

/* Logo wrap — centered, top spacing */
.ty-logo-wrap {
    text-align: center;
    padding: 56px 0 32px;
}
.ty-logo-img {
    height: 42px;
    width: auto;
    display: inline-block;
}

/* Checkmark SVG — animated draw-in via JS + CSS transition */
.ty-check-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}
.ty-check-svg {
    width: 72px;
    height: 72px;
    display: block;
}

/* Confirm section — centered layout */
.ty-confirm {
    background: #ffffff;
    padding-bottom: 56px;
    text-align: center;
}

/* Main headline */
.ty-headline {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #000000;
    margin: 0 0 16px;
}

/* Sub-headline / future-pace line */
.ty-sub {
    font-size: 18px;
    font-weight: 400;
    color: #4A4A4A;
    line-height: 1.65;
    margin: 0 auto 32px;
    max-width: 600px;
}

/* Booking details card */
.ty-booking-card {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 24px 28px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
}
.ty-booking-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    font-weight: 400;
    color: #4A4A4A;
    line-height: 1.6;
    margin: 0;
}
.ty-booking-item__icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    margin-top: 3px;
}
.ty-booking-item strong {
    color: #000000;
}

/* =====================================================================
   S2 — WHAT HAPPENS NEXT (3 numbered steps)
   Light off-white background. Left-aligned within centered column.
   ===================================================================== */
.ty-next {
    background: #F3F4F6;
    padding: 56px 0;
}
.ty-next__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #000000;
    line-height: 1.25;
    margin: 0 0 32px;
}

/* Step list */
.ty-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ty-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* Numbered circle — brand blue fill, white number */
.ty-step__num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #6287F6;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.ty-step__content {
    flex: 1;
}
.ty-step__label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    line-height: 1.4;
    margin-bottom: 4px;
}
.ty-step__desc {
    font-size: 15px;
    font-weight: 400;
    color: #4A4A4A;
    line-height: 1.65;
    margin: 0;
}

/* =====================================================================
   S3 — PREP PROMPTS (reflection questions, optional engagement)
   White background. Blockquote-style left border on each prompt.
   ===================================================================== */
.ty-prep {
    background: #ffffff;
    padding: 56px 0;
}
.ty-prep__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #000000;
    line-height: 1.25;
    margin: 0 0 14px;
}
.ty-prep__intro {
    font-size: 16px;
    font-weight: 400;
    color: #707070;
    line-height: 1.65;
    margin: 0 0 28px;
}

/* Prompt list */
.ty-prep__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    counter-reset: prep-counter;
}
.ty-prep__item {
    position: relative;
    padding: 16px 20px;
    padding-left: 20px;
    background: #F3F8FF;
    border-left: 4px solid #6287F6;
    border-radius: 0 8px 8px 0;
    font-size: 16px;
    font-weight: 400;
    color: #1A1A2E;
    line-height: 1.65;
}

/* =====================================================================
   S4 — SOCIAL PROOF (2 testimonial cards, side-by-side on desktop)
   Light tinted background. Cards stack on mobile.
   ===================================================================== */
.ty-proof {
    background: #F3F4F6;
    padding: 56px 0;
}
.ty-proof__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #000000;
    line-height: 1.25;
    margin: 0 0 32px;
}

/* Cards container — side-by-side on desktop */
.ty-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

/* Individual card */
.ty-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-top: 3px solid #6287F6;
    border-radius: 10px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Forced consumption headline — bold pull quote at top of card */
.ty-card__quote {
    font-size: 17px;
    font-weight: 700;
    color: #000000;
    line-height: 1.4;
    margin: 0;
}

/* Testimonial body */
.ty-card__body {
    font-size: 15px;
    font-weight: 400;
    color: #4A4A4A;
    line-height: 1.7;
    margin: 0;
    flex: 1;
}

/* Attribution */
.ty-card__attr {
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    color: #707070;
    margin: 0;
    margin-top: auto;
}

/* =====================================================================
   S5 — FOUNDER NOTE (personal aside, relationship building)
   White background. Distinct visual treatment from body copy.
   ===================================================================== */
.ty-founder {
    background: #ffffff;
    padding: 56px 0 48px;
    border-top: 1px solid #E5E7EB;
}

/* Circular headshot */
.ty-founder__photo {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}

/* Note blockquote — personal, conversational tone */
.ty-founder__note {
    border: none;
    padding: 0;
    margin: 0 0 16px;
}
.ty-founder__note p {
    font-size: 17px;
    font-weight: 400;
    color: #4A4A4A;
    line-height: 1.8;
    font-style: italic;
    margin: 0;
}

/* Signature */
.ty-founder__sig {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

/* =====================================================================
   S6 — MINIMAL FOOTER
   Sosa Virtual logo (muted) + contact email only. No other links.
   ===================================================================== */
.ty-footer {
    background: #F9FAFB;
    border-top: 1px solid #E5E7EB;
    padding: 48px 0 56px;
    text-align: center;
}
.ty-footer__logo {
    height: 32px;
    width: auto;
    display: inline-block;
    opacity: 0.5;
    margin-bottom: 16px;
}
.ty-footer__text {
    font-size: 14px;
    font-weight: 400;
    color: #707070;
    line-height: 1.6;
    margin: 0 0 8px;
}
.ty-footer__link {
    color: #6287F6;
    text-decoration: underline;
}
.ty-footer__link:hover,
.ty-footer__link:focus-visible {
    color: #4a6ee0;
}
.ty-footer__copy {
    font-size: 12px;
    font-weight: 400;
    color: #9CA3AF;
    margin: 0;
}

/* =====================================================================
   AUDIT CONFIRMATION — RESPONSIVE BREAKPOINTS
   Mobile-first baseline. Testimonial cards stack on mobile.
   ===================================================================== */
@media (max-width: 720px) {
    /* Cards stack to single column */
    .ty-cards {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767px) {
    .ty-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .ty-logo-wrap {
        padding: 40px 0 24px;
    }
    .ty-check-svg {
        width: 60px;
        height: 60px;
    }
    .ty-headline {
        font-size: 26px;
    }
    .ty-sub {
        font-size: 16px;
    }
    .ty-confirm {
        padding-bottom: 44px;
    }
    .ty-booking-card {
        padding: 20px;
    }
    .ty-next,
    .ty-prep,
    .ty-proof,
    .ty-founder {
        padding: 44px 0;
    }
    .ty-next__title,
    .ty-prep__title,
    .ty-proof__title {
        font-size: 21px;
    }
    .ty-card {
        padding: 22px;
    }
    .ty-founder__note p {
        font-size: 16px;
    }
}
@media (max-width: 480px) {
    .ty-headline {
        font-size: 22px;
    }
    .ty-next__title,
    .ty-prep__title,
    .ty-proof__title {
        font-size: 19px;
    }
}

/* =====================================================================
   V4 LANDING PAGE — free-audit.html (index.html once renamed)
   Prefixes: cta-  hero-  trust-bar-  concerns-  what-  compare-
             nocontracts-  pricing-  proof-  footer-
   These classes are separate from the v3 lp-/audit.html classes above.
   ===================================================================== */

/* --- v4 box-sizing scope --- */
.trust-bar, .trust-bar *,
.concerns, .concerns *,
.what, .what *,
.compare, .compare *,
.nocontracts, .nocontracts *,
.pricing, .pricing *,
.footer-v4, .footer-v4 *,
.cta-friction-row, .cta-friction-row * {
    box-sizing: border-box;
}
/* Scope the v4 proof rules so they don't clobber audit.html's v3 .proof styles */
body.v4-page .proof, body.v4-page .proof * {
    box-sizing: border-box;
}

/* Scroll offset for sticky nav on anchor-linked sections */
#concerns, #what-you-get, #comparison, #trust, #pricing, #testimonials {
    scroll-margin-top: 80px;
}

/* --- Shared v4 section header --- */
.v4-section-head {
    text-align: center;
    margin-bottom: 56px;
}
.v4-section-head h2 {
    font-size: 36px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.2;
    margin-bottom: 16px;
}
.v4-section-head p {
    font-size: 18px;
    font-weight: 400;
    color: #4B5563;
    line-height: 1.6;
}

/* =====================================================================
   CTA BUTTON — dark navy, Globaltize-style
   Class: .cta-btn
   Isolation rule: this color appears on CTA buttons ONLY.
   ===================================================================== */
@keyframes ctaVibrate {
    0%,   100% { transform: translateX(0); }
    10%         { transform: translateX(-2px); }
    20%         { transform: translateX(2px); }
    30%         { transform: translateX(-2px); }
    40%         { transform: translateX(2px); }
    50%         { transform: translateX(0); }
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 40px;
    min-height: 56px;
    border-radius: 50px;
    border: none;
    background: #B45309;
    color: #ffffff;
    font-family: 'Aileron', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.3);
    animation: ctaVibrate 5s ease-in-out infinite;
}
.cta-btn:hover,
.cta-btn:focus-visible {
    background: #9A4108;
    color: #ffffff;
    animation: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(180, 83, 9, 0.4);
}
.cta-btn:hover .cta-btn__arrow,
.cta-btn:focus-visible .cta-btn__arrow {
    transform: translateX(5px);
}
.cta-btn__arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    font-style: normal;
}
/* Smaller variant for the nav bar */
.cta-btn--sm {
    padding: 10px 22px;
    min-height: 42px;
    font-size: 14px;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .cta-btn--sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cta-btn { animation: none; }
}

/* --- Friction remover (horizontal checkmark row above each CTA) --- */
.cta-friction-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-bottom: 20px;
}
/* When friction row appears below a CTA button */
.cta-btn + .cta-friction-row {
    margin-top: 16px;
    margin-bottom: 0;
}
.cta-friction-row li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
}
.cta-friction-row li::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    background: #0EA47A;
    border-radius: 50%;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

/* --- Shared CTA wrap (centers friction row + button) --- */
.cta-wrap {
    text-align: center;
    margin-top: 48px;
}

/* =====================================================================
   S1 — HERO v4
   Two-column grid: copy left (~55%), image right (~45%).
   ===================================================================== */
.hero-v4 {
    position: relative;
    padding: 40px 0 80px;
    background: #ffffff;
    overflow: hidden;
}
.hero-v4::after {
    position: absolute;
    content: '';
    background: linear-gradient(204.99deg, #DEDEFF 15.89%, #FFFFFF 50%, #FFFFFF 84.11%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}
.hero-v4__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}
.hero-v4__eyebrow {
    font-size: 13px;
    font-weight: 600;
    color: #6287F6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.6;
    margin-bottom: 18px;
}
.hero-v4__h1 {
    font-size: 44px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.18;
    margin-bottom: 20px;
}
.hero-v4__accent {
    background: linear-gradient(91.85deg, #6287F6 0.31%, #333366 98.61%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-v4__sub {
    font-size: 17px;
    font-weight: 400;
    color: #4B5563;
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 580px;
}
.hero-v4__bullets {
    margin-bottom: 32px;
}
.hero-v4__bullet {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: #374151;
    line-height: 1.5;
    margin-bottom: 10px;
}
.hero-v4__bullet::before {
    content: '✓';
    color: #0EA47A;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}
.hero-v4__cta-wrap .cta-friction-row {
    justify-content: flex-start;
    margin-bottom: 0;
    margin-top: 16px;
}
.hero-v4__cta-wrap {
    text-align: left;
}
.hero-v4__img-panel {
    display: flex;
    justify-content: center;
    align-items: stretch;
    align-self: stretch;
}
.hero-v4__img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    display: block;
    border-radius: 16px;
    object-fit: cover;
    object-position: center top;
}
@media (max-width: 991px) {
    .hero-v4__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hero-v4__img-panel { order: 0; align-self: auto; }
    .hero-v4__img { height: auto; min-height: unset; }
    .hero-v4__h1 { font-size: 36px; }
    .hero-v4__sub { max-width: 100%; }
    .hero-v4__cta-wrap { text-align: center; }
    .hero-v4__cta-wrap .cta-friction-row { justify-content: center; }
}
@media (max-width: 767px) {
    .hero-v4 { padding: 32px 0 52px; }
    .hero-v4__img { height: auto; }
    .hero-v4__h1 { font-size: 30px; }
    .hero-v4__sub { font-size: 16px; }
}

/* =====================================================================
   S2 — TRUST BAR
   Slim strip. PMS names in text (logo images are placeholders).
   ===================================================================== */
.trust-bar {
    background: #F8FAFC;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    padding: 28px 0;
}
.trust-bar__label {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #9CA3AF;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.trust-bar__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 40px;
}
.trust-bar__logo-item {
    font-size: 15px;
    font-weight: 700;
    color: #9CA3AF;
    opacity: 0.7;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.trust-bar__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.trust-bar__badge-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    border: 1px solid #E5E7EB;
    border-radius: 50px;
    padding: 6px 16px;
    background: #ffffff;
}
.trust-bar__disclaimer {
    text-align: center;
    font-size: 11px;
    color: #9CA3AF;
    line-height: 1.6;
    max-width: 720px;
    margin: 16px auto 0;
}

/* =====================================================================
   S3 — SOUND FAMILIAR? (Concerns)
   2-col card grid. 5th card centered on its own row.
   ===================================================================== */
.concerns {
    padding: 80px 0;
    background: #ffffff;
}
.concerns__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}
.concerns__card:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 560px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.concerns__card {
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 28px 24px;
}
.concerns__card-headline {
    font-size: 17px;
    font-weight: 700;
    color: #1F2937;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 12px;
}
.concerns__card-body {
    font-size: 15px;
    color: #4B5563;
    line-height: 1.65;
}
.concerns__transition {
    text-align: center;
    font-size: 19px;
    font-weight: 600;
    color: #1F2937;
    line-height: 1.5;
    max-width: 640px;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .concerns { padding: 56px 0; }
    .concerns__grid { grid-template-columns: 1fr; }
    .concerns__card:nth-child(5) { grid-column: auto; max-width: 100%; }
    .concerns__transition { font-size: 17px; }
}

/* =====================================================================
   S4 — WHAT YOU GET (Benefit cards)
   3-col grid on desktop, 2-col tablet, 1-col mobile.
   ===================================================================== */
.what {
    padding: 80px 0;
    background: #F8FAFC;
}
.what__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.what__card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 32px 24px;
}
.what__icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #ECEEFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
    color: #6287F6;
}
.what__title {
    font-size: 17px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.35;
    margin-bottom: 10px;
}
.what__body {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.65;
}
@media (max-width: 991px) {
    .what__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .what { padding: 56px 0; }
    .what__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   S5 — COMPARISON TABLE
   Desktop: full table. Mobile: stacked cards (table hidden).
   ===================================================================== */
.compare {
    padding: 80px 0;
    background: #ffffff;
}
.compare__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
}
.compare__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    font-size: 14px;
}
.compare__table th {
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #6B7280;
    text-align: left;
    border-bottom: 2px solid #E5E7EB;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #F8FAFC;
    white-space: nowrap;
}
.compare__th-sosa {
    color: #333366;
    background: #ECEEFF;
}
.compare__table td {
    padding: 16px;
    font-size: 14px;
    color: #374151;
    border-bottom: 1px solid #F3F4F6;
    line-height: 1.5;
    vertical-align: top;
}
.compare__table tr:last-child td { border-bottom: none; }
.compare__td-sosa {
    background: #ECEEFF;
    font-weight: 600;
}
.compare__table td:first-child {
    font-weight: 600;
    color: #1F2937;
    min-width: 160px;
}
.compare__check { color: #0EA47A; font-weight: 700; }
.compare__cross { color: #EF4444; font-weight: 700; }
.compare__warn  { color: #F59E0B; font-weight: 700; }

/* Mobile stacked cards */
.compare__mobile-cards { display: none; }
.compare__mobile-card {
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}
.compare__mobile-card-label {
    font-size: 14px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E5E7EB;
}
.compare__mobile-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #F3F4F6;
    font-size: 13px;
}
.compare__mobile-row:last-child { border-bottom: none; }
.compare__mobile-col-label { color: #6B7280; font-weight: 600; min-width: 120px; flex-shrink: 0; }
.compare__mobile-col-val { color: #374151; text-align: right; flex: 1; }
.compare__sosa-val { background: #EFF6FF; border-radius: 6px; padding: 2px 8px; font-weight: 700; color: #1F2937; }

@media (max-width: 767px) {
    .compare { padding: 56px 0; }
    .compare__table-wrap { display: none; }
    .compare__mobile-cards { display: block; }
}

/* =====================================================================
   S6 — NO CONTRACTS. NO HIDDEN FEES. (Trust Block)
   Light brand-tint background. Centered. Circular guarantee badge.
   ===================================================================== */
.nocontracts {
    padding: 100px 0;
    background: #EFF6FF;
}
.nocontracts__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.nocontracts__headline {
    font-size: 40px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.2;
    margin-bottom: 20px;
}
.nocontracts__sub {
    font-size: 17px;
    color: #4B5563;
    line-height: 1.65;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.nocontracts__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 4px solid #E07B3F;
    background: #ffffff;
    text-align: center;
    padding: 20px;
    margin: 0 auto 40px;
    box-shadow: 0 4px 24px rgba(224, 123, 63, 0.18);
}
.nocontracts__badge-text {
    font-size: 13px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.5;
}
.nocontracts__bullets {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.nocontracts__bullet {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #374151;
    font-weight: 500;
}
.nocontracts__bullet::before {
    content: '✓';
    color: #0EA47A;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .nocontracts { padding: 64px 0; }
    .nocontracts__headline { font-size: 28px; }
    .nocontracts__sub { font-size: 15px; }
}

/* =====================================================================
   S7 — PRICING
   Two-column card: image left, dark navy pricing block right.
   ===================================================================== */
.pricing {
    padding: 100px 0;
    background: #ffffff;
}
.pricing__inner {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
.pricing__image {
    position: relative;
    min-height: 480px;
    background: #E5E7EB;
    overflow: hidden;
}
.pricing__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pricing__block {
    background: #0F0F23;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pricing__headline {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 8px;
}
.pricing__sub {
    font-size: 18px;
    color: #94A3B8;
    margin-bottom: 28px;
}
.pricing__price {
    font-size: 56px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 8px;
}
.pricing__price-unit {
    font-size: 20px;
    font-weight: 400;
    color: #94A3B8;
}
.pricing__explanation {
    font-size: 14px;
    color: #94A3B8;
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 380px;
}
.pricing__checkmarks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}
.pricing__check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #E2E8F0;
}
.pricing__check-item::before {
    content: '✓';
    color: #0EA47A;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}
.pricing__cta-wrap {
    text-align: center;
    margin-top: 48px;
}
@media (max-width: 991px) {
    .pricing__inner { grid-template-columns: 1fr; }
    .pricing__image { min-height: 280px; }
    .pricing__block { padding: 40px 32px; }
    .pricing__price { font-size: 44px; }
}
@media (max-width: 767px) {
    .pricing { padding: 64px 0; }
    .pricing__headline { font-size: 26px; }
    .pricing__price { font-size: 36px; }
    .pricing__checkmarks { grid-template-columns: 1fr; }
    .pricing__block { padding: 32px 24px; }
}

/* =====================================================================
   S8 — SOCIAL PROOF (Testimonials)
   Scoped under body.v4-page to avoid conflicting with audit.html v3 .proof rules.
   Stats bar reuses v3 .proof__stats-bar styles (already defined above in this file).
   ===================================================================== */
body.v4-page .proof {
    padding: 80px 0 0;
    background: #F8FAFC;
}
body.v4-page .proof__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 56px;
}
body.v4-page .proof__card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
}
.proof__stars {
    color: #F59E0B;
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 14px;
}
.proof__card-headline-v4 {
    font-size: 17px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.4;
    margin-bottom: 12px;
}
.proof__card-body-v4 {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.7;
    flex: 1;
    margin-bottom: 16px;
}
.proof__attribution {
    font-size: 13px;
    font-weight: 600;
    color: #9CA3AF;
    font-style: italic;
}
body.v4-page .proof__cta-wrap {
    text-align: center;
    padding: 56px 0;
    background: #F8FAFC;
}
@media (max-width: 991px) {
    body.v4-page .proof__cards {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
    body.v4-page .proof { padding: 56px 0 0; }
}

/* =====================================================================
   S9 — FOOTER v4
   Dark navy. Horizontal nav row + bottom bar.
   ===================================================================== */
.footer-v4 {
    background: #111827;
    padding: 40px 0 0;
}
/* Horizontal nav row */
.footer-v4__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0;
}
.footer-v4__nav a {
    font-size: 14px;
    color: #94A3B8;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}
.footer-v4__nav a:hover {
    color: #ffffff;
}
/* Divider dot between nav links */
.footer-v4__nav-sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    user-select: none;
}
.footer-v4__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 0 0;
}
.footer-v4__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-v4__logo img {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.6;
}
.footer-v4__copyright {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.6;
    text-align: center;
    flex: 1;
}
.footer-v4__tagline {
    font-size: 12px;
    color: #4B5563;
    display: block;
}
.footer-v4__trademark {
    font-size: 11px;
    color: #374151;
    text-align: center;
    line-height: 1.6;
    padding: 16px 0 28px;
    max-width: 760px;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .footer-v4 { padding: 48px 0 0; }
    .footer-v4__cols { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
    .footer-v4__bottom-inner { flex-direction: column; text-align: center; }
}