/* AnswerAI custom landing sections (demo call + hear it live) and chrome fixes.
   These style non-Framer DOM injected by /landing/aa/landing.js, matching the
   AgentLab template: Merriweather display serif, Cabin UI sans, monochrome with
   #0057a8 accent (#30aece appears only inside gradients). */

/* ---- template chrome fixes (CSS-only hides) ---- */
section.framer-l06Ud, /* hero logo marquee */
section.framer-S7npf, /* template testimonials (replaced by #hear-it-live) */
.framer-jncjg1-container, /* "Company" nav dropdown — its pages don't exist here */
.framer-ik2ku8, /* accordion chevron on the phone-menu item repurposed as Contact */
.framer-1vfwl9t /* third-party logo ticker inside the split-card art (template mock) */ {
    display: none !important;
}

/* Brand logo: painted via CSS background so it's correct at first paint and
   immune to hydration re-renders. The template grid mark + wordmark stay in
   the DOM (hidden); the anchor box is sized explicitly for the 961x343 PNG,
   and its wrapper is unclipped so the larger box isn't cut off (the phone
   header/hamburger wrapper has a fixed height). */
a.framer-1g50z6c {
    width: 158px !important;
    height: 56px !important;
    background: url("/logo.png") no-repeat left center / contain;
    /* Framer places header items at precomputed absolute offsets tuned for
       the template's 34px logo; recentre the 56px box in the bar. */
    transform: translateY(0px);
}

@media screen and (max-width: 1199px) {

    a.framer-1g50z6c 
    {
        width: 132px !important;
    }

    .framer-yVODL .framer-1ws1u1t
    {
        transform: translateY(8px);
    }
}

div.framer-9os9sp {
margin-top: 8px !important;
}

div.framer-9kwa2j
{
    margin-top: 6px !important;
}

a.framer-oq2Zm.framer-14ckjdc.framer-v-trnyp0.framer-7hd92a
{
    padding: 4px 30px !important;
}

div.framer-mi05wd
{
    display: contents !important;
}

/* Footer variant of the same logo component sits on black — use the white mark. */
a.framer-1g50z6c.framer-v-rq5z2b {
    background-image: url("/logo-white.svg");
}

a.framer-1g50z6c > * {
    visibility: hidden !important;
}

div[class*="-container"]:has(> a.framer-1g50z6c) {
    height: auto !important;
    overflow: visible !important;
}

/* ---- sub-1200 header bar breathing room (aa) ----
   The closed tablet/phone nav (variant framer-v-jw9bb8, rendered <1200px) is
   hard-clipped at max-height:72px with padding 20px 20px 0, so the 56px logo
   (20px top padding + 56px = 76px) sits flush against / slightly clipped by
   the bar's bottom edge, and the hero starts immediately below. Grow the
   closed bar to 96px (20px top + 56px logo + 20px bottom, mirroring the top
   padding) and move the bar's absolute "Border Wrap" bottom-line layer
   (framer-1dhj8e7, pinned at 72px in this variant) down to the new edge.
   Scoped to the closed variant only: the open menu (framer-v-p55fyj) and the
   desktop nav (framer-v-1yqy8ov, >=1200px) keep their template metrics. On
   tablet the header container is position:sticky (in flow) so the hero shifts
   down; on phone (<=767.98px) it is position:fixed, and the taller white bar
   simply covers 24px more of the hero's 145px top padding - no content is
   obscured. */
@media (max-width: 1199.98px) {
    nav.framer-yVODL.framer-v-jw9bb8.framer-1yqy8ov {
        max-height: 96px !important;
        padding-bottom: 20px !important;
    }

    .framer-yVODL.framer-v-jw9bb8 .framer-1dhj8e7 {
        height: 96px !important;
    }
}

/* Sign-up header button (rendered natively by the edited Framer chunk/SSR).
   Only the anchor surface is recoloured — descendants keep their own
   backgrounds because Framer draws the arrow icon as a mask filled by
   background-color, which a blanket override would erase. */
.aa-signup a {
    background-color: #0057a8 !important;
    border-color: #0057a8 !important;
}

.aa-signup a:hover {
    background-color: #003a70 !important;
    border-color: #003a70 !important;
}

/* Slight rounding on all button-shaped elements. framer-oq2Zm is the shared
   scope class of every rolling-text button (log in, sign up, page CTAs,
   form submits); Icon is the hamburger square. */
a.framer-oq2Zm,
div[data-framer-name="Icon"],
.aa-btn,
.aa-play {
    border-radius: 6px !important;
    overflow: hidden;
}

/* Black buttons → teal. Every black button's inline style references the
   black token for its background, so matching that substring recolors all of
   them (SSR writes it without a space, hydration with one) while leaving
   white/outline buttons and the #0057a8 sign-up (excluded via .aa-signup)
   untouched. */
:not(.aa-signup) > a.framer-oq2Zm[style*="background-color:var(--token-74d9d790"],
:not(.aa-signup) > a.framer-oq2Zm[style*="background-color: var(--token-74d9d790"],
form button[style*="background-color:var(--token-74d9d790"],
form button[style*="background-color: var(--token-74d9d790"],
div[data-framer-name="Icon"],
.aa-btn {
    background-color: #30aece !important;
    border-color: #30aece !important;
}

:not(.aa-signup) > a.framer-oq2Zm[style*="background-color:var(--token-74d9d790"]:hover,
:not(.aa-signup) > a.framer-oq2Zm[style*="background-color: var(--token-74d9d790"]:hover,
form button[style*="background-color:var(--token-74d9d790"]:hover,
form button[style*="background-color: var(--token-74d9d790"]:hover,
.aa-btn:hover {
    background-color: #2596b8 !important;
    border-color: #2596b8 !important;
}

/* Form status sits at the top of both public forms now. */
.aa-form .aa-status,
form .aa-status[data-aa-contact] {
    margin: 0 auto 16px;
}

/* ---- shared section shell ---- */
.aa-section {
    position: relative;
    font-family: "Cabin", "Cabin Placeholder", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.aa-section *,
.aa-section *::before,
.aa-section *::after {
    box-sizing: border-box;
}

.aa-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 110px 48px 120px;
}

.aa-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #111;
}

.aa-badge::before {
    content: "";
    width: 14px;
    height: 8px;
    background: linear-gradient(90deg, #0057a8, #30aece);
    display: inline-block;
}

.aa-h2 {
    margin: 0 0 20px;
    font-family: "Merriweather", "Merriweather Placeholder", serif;
    font-weight: 300;
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.15;
    letter-spacing: 0;
    color: #000;
    text-align: center;
}

.aa-sub {
    margin: 0 auto 44px;
    max-width: 560px;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    color: #4d4d4d;
}

/* ---- demo call section ---- */
.aa-demo {
    background-color: #fff;
    background-image: radial-gradient(rgba(0, 87, 168, 0.16) 1.3px, transparent 1.3px);
    background-size: 16px 16px;
}

.aa-demo .aa-inner {
    max-width: 720px;
}

.aa-form {
    margin: 0 auto;
}

.aa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.aa-field {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: #111;
    outline: none;
    transition: border-color 0.15s ease;
    appearance: none;
}

select.aa-field {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23111' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

select.aa-field:invalid {
    color: #7a7a7a;
}

.aa-field::placeholder {
    color: #7a7a7a;
}

.aa-field:focus {
    border-color: #0057a8;
}

.aa-field[aria-invalid="true"] {
    border-color: #b3261e;
}

.aa-btn {
    display: block;
    width: 100%;
    height: 54px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.aa-btn:hover {
    background: #0057a8;
    border-color: #0057a8;
}

.aa-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}

.aa-note {
    margin: 16px auto 0;
    max-width: 540px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.55;
    color: #7a7a7a;
}

.aa-note a {
    color: #0057a8;
    text-decoration: none;
}

.aa-note a:hover {
    text-decoration: underline;
}

.aa-status {
    display: none;
    margin: 18px auto 0;
    max-width: 560px;
    padding: 14px 18px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.5;
}

.aa-status[data-kind="ok"] {
    display: block;
    border: 1px solid #0057a8;
    background: rgba(0, 87, 168, 0.06);
    color: #003a70;
}

.aa-status[data-kind="error"] {
    display: block;
    border: 1px solid #b3261e;
    background: rgba(179, 38, 30, 0.05);
    color: #8c1d17;
}

/* ---- hear it live (dark) ---- */
.aa-listen {
    background: #000;
}

.aa-listen .aa-inner {
    max-width: 980px;
}

.aa-listen .aa-badge,
.aa-listen .aa-h2 {
    color: #fff;
}

.aa-listen .aa-sub {
    color: rgba(255, 255, 255, 0.55);
}

.aa-players {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.aa-player {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.aa-player:first-child {
    border-top: none;
}

.aa-play {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.aa-play:hover {
    background: #0057a8;
    border-color: #0057a8;
}

.aa-play svg {
    width: 14px;
    height: 14px;
    display: block;
}

.aa-play .aa-ic-pause {
    display: none;
}

.aa-player[data-playing="true"] .aa-ic-play {
    display: none;
}

.aa-player[data-playing="true"] .aa-ic-pause {
    display: block;
}

.aa-player-main {
    flex: 1 1 auto;
    min-width: 0;
}

.aa-player-title {
    margin: 0 0 4px;
    font-family: "Merriweather", "Merriweather Placeholder", serif;
    font-weight: 300;
    font-size: 19px;
    color: #fff;
}

.aa-player-line {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aa-track {
    position: relative;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
}

.aa-track-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, #0057a8, #30aece);
}

.aa-time {
    flex: 0 0 auto;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.5);
    min-width: 42px;
    text-align: right;
}

/* ---- responsive ---- */
@media (max-width: 809px) {
    .aa-inner {
        padding: 70px 24px 80px;
    }

    .aa-grid {
        grid-template-columns: 1fr;
    }

    .aa-player {
        gap: 14px;
        padding: 16px;
    }

    .aa-player-title {
        font-size: 16px;
    }

    .aa-player-line {
        white-space: normal;
    }
}