/* ============================================================================
   AI receptionist & automation — marketing landing page.
   Converted from FEATURE-PAGE-AUTOMATION-AI.html.

   Every selector is namespaced under .airx so nothing can collide with the
   marketing site's global CSS (Bootstrap / app.css / bb-tokens). The design's
   CSS custom properties are scoped to .airx (not :root) for the same reason —
   the generic names (--bg, --ink, --accent …) would otherwise clash.

   The draft's ~800KB of base64 @font-face blocks are intentionally dropped:
   layouts.static already loads Rubik via Google Fonts, so we just reference it.
   ========================================================================== */

/* ---- design tokens (scoped to the page container) ---- */
.airx {
    --sans: "Rubik", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --serif: Georgia, "Times New Roman", serif;
    --bg: #F5F1EA; --surface: #FFFFFF; --surface-2: #FBF7F1;
    --border: #E8E1D6; --border-2: #D9D0C2;
    --ink: #221A11; --ink-2: #6B5F51; --ink-3: #9C9080;
    --accent: #D5324F; --accent-ink: #B22743; --accent-soft: rgba(213, 50, 79, .09);
    --good: #2E7D4F; --good-soft: rgba(46, 125, 79, .1);
    --radius: 14px; --shadow: 0 1px 2px rgba(34, 26, 17, .05), 0 12px 34px rgba(34, 26, 17, .07);
    --maxw: 1120px;
}
@media (prefers-color-scheme: dark) {
    .airx {
        --bg: #171009; --surface: #201810; --surface-2: #291F15;
        --border: #362A1C; --border-2: #46372A;
        --ink: #F5EEE3; --ink-2: #B6A897; --ink-3: #857767;
        --accent: #F1596F; --accent-ink: #F1596F; --accent-soft: rgba(241, 89, 111, .14);
        --good: #74C296; --good-soft: rgba(116, 194, 150, .14);
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 34px rgba(0, 0, 0, .34);
    }
}
.airx[data-theme="dark"] {
    --bg: #171009; --surface: #201810; --surface-2: #291F15;
    --border: #362A1C; --border-2: #46372A;
    --ink: #F5EEE3; --ink-2: #B6A897; --ink-3: #857767;
    --accent: #F1596F; --accent-ink: #F1596F; --accent-soft: rgba(241, 89, 111, .14);
    --good: #74C296; --good-soft: rgba(116, 194, 150, .14);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 34px rgba(0, 0, 0, .34);
}
.airx[data-theme="light"] {
    --bg: #F5F1EA; --surface: #FFFFFF; --surface-2: #FBF7F1;
    --border: #E8E1D6; --border-2: #D9D0C2;
    --ink: #221A11; --ink-2: #6B5F51; --ink-3: #9C9080;
    --accent: #D5324F; --accent-ink: #B22743; --accent-soft: rgba(213, 50, 79, .09);
    --good: #2E7D4F; --good-soft: rgba(46, 125, 79, .1);
    --shadow: 0 1px 2px rgba(34, 26, 17, .05), 0 12px 34px rgba(34, 26, 17, .07);
}

/* ---- page container: reset + full-bleed.
   The guest layout nests content in a padded Bootstrap .container-fluid, so the
   design's edge-to-edge section backgrounds (dark hero, problem/safe strips…)
   would otherwise stop short of the viewport edges. calc(50% - 50vw) is the same
   scroll-safe breakout features-tweaks.css uses for its .ais strips. ---- */
.airx, .airx * { box-sizing: border-box; }
.airx {
    /* The layout's .main-content is a flex column that fills the guest content
       area edge-to-edge; span it with width:100% rather than a viewport
       calc() breakout — the calc() collapsed .main-content to 0 width and
       shoved the page into the right half. */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.airx a { color: inherit; }
/* Contain section content to the design's max width and center it (the section
   backgrounds stay full-bleed on .airx; only the inner .wrap is constrained). */
.airx .wrap { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.airx h1, .airx h2, .airx h3 { text-wrap: balance; margin: 0; letter-spacing: -.022em; font-weight: 800; }
.airx .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* ---- nav (the draft's in-page nav; the site layout supplies the real nav, so
   these rules are inert here — kept for fidelity) ---- */
.airx .nav { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid transparent; transition: border-color .3s; }
.airx .nav.solid { border-bottom-color: var(--border); }
.airx .nav-in { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.airx .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.airx .brand .dot { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; color: #fff; font-size: 15px; }
.airx .nav-links { display: flex; align-items: center; gap: 26px; font-size: 15px; color: var(--ink-2); }
.airx .nav-links a { text-decoration: none; }
.airx .nav-links a:hover { color: var(--ink); }
.airx .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15px; font-weight: 700; border-radius: 10px; padding: 11px 18px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .12s, background .2s, box-shadow .2s; }
.airx .btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 34%, transparent); }
.airx .btn--primary:hover { transform: translateY(-1px); }
.airx .btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-2); }
.airx .btn--ghost:hover { background: var(--surface-2); }
@media (max-width: 720px) { .airx .nav-links a:not(.btn) { display: none; } }

/* ---- hero (ALWAYS dark, its own world) ---- */
.airx .hero { position: relative; overflow: hidden; background: #150E07; color: #F5EEE3; }
.airx .hero::before { content: ""; position: absolute; top: -30%; right: -10%; width: 780px; height: 780px; border-radius: 50%; background: radial-gradient(circle, rgba(241, 89, 111, .30), rgba(241, 89, 111, 0) 62%); pointer-events: none; }
.airx .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 12% 8%, rgba(255, 200, 150, .06), transparent 55%); pointer-events: none; }
.airx .hero-in { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; padding: 74px 0 86px; }
.airx .hero .eyebrow { color: #F1889A; }
.airx .hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.02; margin: 18px 0 0; }
.airx .hero h1 em { font-style: normal; color: #F1596F; }
.airx .hero .lede { font-size: clamp(17px, 1.7vw, 20px); color: #CBBBA8; margin: 22px 0 30px; max-width: 34ch; line-height: 1.5; }
.airx .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.airx .hero .btn--ghost { color: #F5EEE3; border-color: rgba(245, 238, 227, .22); }
.airx .hero .btn--ghost:hover { background: rgba(245, 238, 227, .06); }
.airx .hero-trust { margin-top: 26px; font-size: 14px; color: #9E9082; display: flex; align-items: center; gap: 9px; }
.airx .hero-trust .tick { color: #74C296; }

/* ---- fixed-header clearance.
   layouts.static has a position:fixed .navbar.fixed-top; without a top offset the
   hero tucks up under it. Give it a header's-worth of padding on desktop (mirrors
   features-tweaks.css offsetting .industries.features), and reset on <=991.98px
   where the fixed header collapses to a mobile bar. ---- */
.airx .hero { padding-top: 5.75rem; }
@media (max-width: 991.98px) { .airx .hero { padding-top: 0; } }

/* ---- phone mockup ---- */
.airx .phone { justify-self: center; width: 302px; max-width: 100%; background: #221913; border: 1px solid rgba(245, 238, 227, .12); border-radius: 34px; padding: 14px; box-shadow: 0 40px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(241, 89, 111, .08); }
.airx .phone-screen { background: #191009; border-radius: 24px; padding: 20px 18px; min-height: 452px; display: flex; flex-direction: column; }
.airx .phone-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #7C6F62; margin-bottom: 8px; }
.airx .call-head { text-align: center; padding: 10px 0 14px; border-bottom: 1px solid rgba(245, 238, 227, .08); }
.airx .call-tag { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #F1889A; font-weight: 700; }
.airx .call-num { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-top: 6px; }
.airx .call-sub { font-size: 13px; color: #8A7C6E; margin-top: 3px; }
.airx .thread { display: flex; flex-direction: column; gap: 9px; padding: 16px 0 6px; flex: 1; }
.airx .bub { max-width: 84%; font-size: 13.5px; line-height: 1.4; padding: 9px 12px; border-radius: 13px; }
.airx.anim .bub { opacity: 0; transform: translateY(6px); }
.airx.anim .reveal-on .bub { animation: airx-pop .5s forwards; }
.airx .bub.them { align-self: flex-start; background: #2C2118; color: #E7DACb; border-bottom-left-radius: 4px; }
.airx .bub.ai { align-self: flex-end; background: #F1596F; color: #fff; border-bottom-right-radius: 4px; }
.airx .bub:nth-child(1) { animation-delay: .3s; }
.airx .bub:nth-child(2) { animation-delay: 1.1s; }
.airx .bub:nth-child(3) { animation-delay: 1.9s; }
.airx .bub:nth-child(4) { animation-delay: 2.7s; }
.airx .booked { margin-top: 12px; display: flex; align-items: center; gap: 10px; background: var(--good-soft); border: 1px solid rgba(116, 194, 150, .3); color: #9CD9B4; border-radius: 12px; padding: 11px 13px; font-size: 13px; }
.airx.anim .booked { opacity: 0; transform: translateY(6px); }
.airx.anim .reveal-on .booked { animation: airx-pop .5s 3.6s forwards; }
.airx .booked b { color: #C7ECD5; }
.airx .booked .ico { width: 26px; height: 26px; flex: none; border-radius: 8px; background: rgba(116, 194, 150, .18); display: grid; place-items: center; }
@keyframes airx-pop { to { opacity: 1; transform: none; } }

/* ---- generic section ---- */
.airx section { padding: 76px 0; }
.airx .section-head { max-width: 640px; }
.airx .section-head h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; margin-top: 12px; }
.airx .section-head p { color: var(--ink-2); font-size: 18px; margin: 16px 0 0; }

/* ---- problem strip ---- */
.airx .problem { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.airx .problem-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.airx .pullquote { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3vw, 33px); line-height: 1.28; letter-spacing: -.01em; }
.airx .pullquote b { font-style: normal; color: var(--accent-ink); font-weight: 700; }
.airx .problem-stats { display: grid; gap: 16px; }
.airx .pstat { display: flex; gap: 14px; align-items: baseline; }
.airx .pstat .n { font-size: 34px; font-weight: 800; color: var(--accent-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-width: 92px; }
.airx .pstat .t { color: var(--ink-2); font-size: 15px; }

/* ---- capability chips ---- */
.airx .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.airx .chip { font-size: 14px; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 15px; display: inline-flex; align-items: center; gap: 8px; }
.airx .chip svg { width: 15px; height: 15px; color: var(--accent); }

/* ---- AI split: copy + demo transcript card ---- */
.airx .ai-split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; margin-top: 46px; }
.airx .demo-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.airx .demo-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--ink-2); }
.airx .demo-head .live { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); }
.airx .demo-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.airx .m { max-width: 82%; font-size: 14.5px; line-height: 1.45; padding: 10px 13px; border-radius: 13px; }
.airx .m.them { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.airx .m.ai { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.airx .m-note { align-self: center; font-size: 12.5px; color: var(--ink-3); }
.airx .demo-foot { border-top: 1px solid var(--border); padding: 13px 18px; display: flex; align-items: center; gap: 11px; background: var(--good-soft); }
.airx .demo-foot .ico { width: 30px; height: 30px; border-radius: 9px; background: var(--good); color: #fff; display: grid; place-items: center; flex: none; }
.airx .demo-foot .txt { font-size: 13.5px; color: var(--ink); }
.airx .demo-foot .txt b { color: var(--good); }

/* ---- safe by design ---- */
.airx .safe { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.airx .guards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 30px; margin-top: 40px; }
.airx .guard { display: flex; gap: 13px; align-items: flex-start; }
.airx .guard .gi { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.airx .guard .gi svg { width: 20px; height: 20px; }
.airx .guard h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.airx .guard p { color: var(--ink-2); font-size: 14.5px; margin: 4px 0 0; line-height: 1.45; }

/* ---- automation recipes ---- */
.airx .recipes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
.airx .recipe { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow); transition: transform .14s, border-color .2s; }
.airx .recipe:hover { transform: translateY(-3px); border-color: var(--border-2); }
.airx .recipe .rk { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.airx .recipe .rk svg { width: 16px; height: 16px; }
.airx .recipe .sentence { font-size: 17px; line-height: 1.5; }
.airx .recipe .sentence .when { color: var(--ink-3); font-weight: 700; }
.airx .recipe .sentence .tok { display: inline; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--accent-soft); }

/* ---- one system band ---- */
.airx .system { background: #150E07; color: #F5EEE3; }
.airx .system .eyebrow { color: #F1889A; }
.airx .system h2 { color: #F5EEE3; font-size: clamp(26px, 3.2vw, 36px); margin-top: 12px; }
.airx .system p { color: #C4B4A2; font-size: 17px; margin: 14px 0 0; max-width: 60ch; }
.airx .flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: stretch; margin-top: 42px; }
.airx .flow .node { background: rgba(245, 238, 227, .04); border: 1px solid rgba(245, 238, 227, .12); border-radius: 14px; padding: 20px; }
.airx .flow .node .nk { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #F1889A; }
.airx .flow .node h4 { margin: 8px 0 6px; font-size: 18px; font-weight: 700; }
.airx .flow .node p { color: #A99A89; font-size: 14px; margin: 0; }
.airx .flow .arrow { align-self: center; color: #6E5F51; font-size: 22px; }
@media (max-width: 860px) { .airx .flow { grid-template-columns: 1fr; } .airx .flow .arrow { transform: rotate(90deg); justify-self: center; } }

/* ---- CTA ---- */
.airx .cta { text-align: center; }
.airx .cta h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.05; }
.airx .cta p { color: var(--ink-2); font-size: 19px; margin: 16px auto 30px; max-width: 46ch; }
.airx .cta .hero-cta { justify-content: center; }

/* ---- footer (the draft's own; the site layout supplies the real footer — inert
   here, kept for fidelity) ---- */
.airx footer { border-top: 1px solid var(--border); padding: 34px 0; color: var(--ink-3); font-size: 14px; }
.airx .foot-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }

/* ---- reveal on scroll — content is only hidden once the JS marks .airx as
   animatable, so it stays fully readable with no JS, in print, or in a snapshot ---- */
.airx.anim .r { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.airx.anim .r.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
    .airx .hero-in, .airx .problem-in, .airx .ai-split { grid-template-columns: 1fr; }
    .airx .hero-in { padding: 54px 0 60px; gap: 40px; }
    .airx .guards, .airx .recipes { grid-template-columns: 1fr; }
    .airx .phone { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
    .airx .r { opacity: 1; transform: none; transition: none; }
    .airx .bub, .airx .booked { opacity: 1 !important; transform: none !important; animation: none !important; }
}