/* PhoneFlow Design System — tokens + base typography.
   Loads AFTER per-page inline <style>, so these rules override where they conflict. */

:root {
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.08), 0 24px 48px rgba(15, 23, 42, 0.06);
    --shadow-xl: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.1), 0 32px 64px rgba(15, 23, 42, 0.08);
    --shadow-orange: 0 12px 32px -8px rgba(255, 107, 43, 0.35), 0 4px 12px -4px rgba(255, 107, 43, 0.2);
    --shadow-blue: 0 12px 32px -8px rgba(59, 130, 246, 0.3), 0 4px 12px -4px rgba(59, 130, 246, 0.18);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.2);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 24px;

    --border-hairline: 1px solid rgba(15, 23, 42, 0.06);
    --border-soft: 1px solid rgba(15, 23, 42, 0.08);

    --section-padding-y: clamp(4rem, 8vw, 7rem);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Global site scale — zoom shrinks EVERYTHING (fonts, padding, widths, images).
   0.85 ≈ "browser zoom 85%" baked in. Slight shrink, not aggressive. */
html {
    zoom: 0.85;
}

/* Tighter container + compressed section padding so vertical rhythm stays dense */
.container {
    max-width: 1180px !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.section {
    padding-top: clamp(2rem, 4vw, 3.5rem) !important;
    padding-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}

/* Typography — Inter replaces Poppins everywhere */
body,
html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
}

body {
    font-size: 1.0625rem;
    line-height: 1.65;
}

/* Form controls + buttons don't inherit font-family from body by default */
button,
input,
select,
textarea,
.cta-primary,
.cta-secondary {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.feature-title,
.footer-section h3 {
    font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.022em;
    font-feature-settings: 'ss01', 'cv11';
}

/* Heroic H1: bigger, confident, tightened
   Selectors cover existing inline `.hero h1` / `.hero-split h2` specificities. */
.hero-title,
h1,
.hero h1,
.hero-split h2 {
    font-size: clamp(2.75rem, 5.5vw, 5rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.section-title,
h2,
.section h2 {
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

h3, .feature-title {
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* Section eyebrow — small-caps tracking-wide label above headlines (Vapi/Retell pattern) */
.section-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-orange);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}

/* Subtle selection to match brand */
::selection {
    background: rgba(255, 107, 43, 0.18);
    color: var(--text-primary);
}

/* Dot-grid background utility — applies to any wrapping element */
.dot-grid-bg {
    position: relative;
    isolation: isolate;
}

.dot-grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(15, 23, 42, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}

/* Scroll-reveal tuning (existing .reveal animations become snappier) */
.reveal {
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}