:root {
    /* Color tokens — existing, carried over from layout.php unchanged */
    --primary-color: #2563eb;
    --secondary-color: #1e40af;
    --accent-color: #3b82f6;
    --dark-color: #1f2937;
    --light-color: #f8fafc;

    /* Breakpoint reference values (documentation only; media queries can't consume custom properties) */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;

    /* Typography scale — compact build (~8-10% smaller desktop maxes than the
       original, per REDESIGN.md, to match the denser target visual scale at
       100% zoom / medium font). Each clamp() still hits its mobile floor at
       375px and its desktop max at 1280px with a smooth ramp between. */
    --fs-hero: clamp(2.1rem, 4.2431vw + 1.1055rem, 4.5rem); /* home.php hero — 72px desktop from 1280px up */
    --fs-page-hero-lg: clamp(2.1rem, 1.9448vw + 1.6442rem, 3.2rem); /* about/contact/features/clinics heading */
    --fs-page-hero-md: clamp(2.1rem, 1.5912vw + 1.7271rem, 3.0rem); /* pricing/register/register_success heading */
    --fs-page-hero-xl: clamp(2.1rem, 2.2983vw + 1.5613rem, 3.4rem); /* faq heading */
    --fs-page-hero-sm: clamp(1.95rem, 0.7072vw + 1.7843rem, 2.35rem); /* tenant_login heading */
    --fs-section-title: clamp(1.8rem, 1.2376vw + 1.5099rem, 2.5rem); /* home/about/pricing/features section titles */
    --fs-section-subtitle: clamp(0.95rem, 0.1768vw + 0.9086rem, 1.05rem);
    --fs-cta-heading: clamp(1.8rem, 0.8840vw + 1.5928rem, 2.3rem); /* .cta-card h2 */

    /* Numeral display figures: left fixed, not clamped — large numerals in tight
       containers (stat band, pricing card) where clamp scaling risks misalignment
       with adjacent labels, and none of these had a snap-jump bug to begin with. */
    --fs-stat-number: 2.3rem;
    --fs-price-amount: 3rem;
    --fs-price-currency: 2.3rem;

    --space-section-subtitle-mb: 3rem;
    --space-cta-padding-y: 4rem;
    --space-cta-padding-y-mobile: 2.75rem;

    /* ===== Content type scale =====
       Normalized 2px-increment scale (12,14,16,18,20,22,24,26,28,32) used for
       all body copy, labels, captions, badges, card text, etc. Each is fluid:
       a smaller mobile floor ramping to its exact px target by 1280px, so text
       scales down gracefully on small screens without dropping below readable.
       Named by their DESKTOP target px. */
    --text-12: clamp(11px, 0.1105vw + 10.5856px, 12px);
    --text-14: clamp(13px, 0.1105vw + 12.5856px, 14px);
    --text-16: clamp(15px, 0.1105vw + 14.5856px, 16px);
    --text-18: clamp(16px, 0.2210vw + 15.1713px, 18px);
    --text-20: clamp(17px, 0.3315vw + 15.7569px, 20px);
    --text-22: clamp(18px, 0.4420vw + 16.3425px, 22px);
    --text-24: clamp(19px, 0.5525vw + 16.9282px, 24px);
    --text-26: clamp(20px, 0.6630vw + 17.5138px, 26px);
    --text-28: clamp(22px, 0.6630vw + 19.5138px, 28px);
    --text-32: clamp(24px, 0.8840vw + 20.6851px, 32px);
}

/* Shared component classes — single source of truth for what used to be
   duplicated inline across every saas/*.php page. */
.section-title {
    font-family: 'Poppins', sans-serif;
    color: #111827;
    font-weight: 600 !important;
    font-size: var(--fs-section-title) !important;
    margin-bottom: 0.5rem;
    text-align: center;
    letter-spacing: -1.2px !important;
    width: 100%;
}
.section-title .blur-text-word {
    letter-spacing: -1.2px !important;
}

.section-subtitle {
    color: #6b7280;
    font-weight: 400 !important;
    font-size: var(--fs-section-subtitle) !important;
    text-align: center;
    margin-bottom: var(--space-section-subtitle-mb);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.cta-card {
    background: linear-gradient(135deg, #4338ca 0%, #2563eb 60%, #1e3a8a 100%);
    border-radius: 24px;
    padding: var(--space-cta-padding-y) 2rem;
    color: white;
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
    text-align: center;
}
.cta-card h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400 !important;
    font-size: var(--fs-cta-heading) !important;
    letter-spacing: -1.2px !important;
    color: white !important;
    margin-bottom: 1.25rem;
}
.cta-card h2 .blur-text-word {
    letter-spacing: -1.2px !important;
    margin-right: 0.02em;
}
.cta-card p {
    color: #c7d2fe;
    font-size: 1.1rem;
    margin-top: -0.5rem;
    margin-bottom: 2.5rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .cta-card { padding: var(--space-cta-padding-y-mobile) 1.5rem; }
}

.btn-cta-white,
.btn-cta-transparent {
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: 0.85rem 2.25rem !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: all 0.25s ease !important;
}
.btn-cta-white {
    background: #fff !important;
    color: #1e3a8a !important;
}
.btn-cta-white:hover {
    background: #f1f5f9 !important;
    color: #1e3a8a !important;
    transform: translateY(-2px);
}
.btn-cta-transparent {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
}
.btn-cta-transparent:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-2px);
}

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background-color: #1f2937;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}
.back-to-top:hover {
    background-color: #111827;
    color: white;
    transform: translateY(-2px);
}

/* Breakpoint-collision smoothing: Bootstrap's .container is flat at 720px from
   768-991px then jumps to 960px at exactly 992px — the same width where the
   custom navbar uncollapses. Splitting the 240px jump into two 120px steps
   means neither transition alone reads as "a different page". */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container { max-width: 840px; }
}