/* Background Colors */
.bg-light-gray{
    background-color: #f0f0f0 !important;
}
.bg-subtle-gray{
    background-color: #F4F3F1;
}
.bg-hero-opacity{
    background-color: #365b7086;
}

/* Hero Section Background Image */
#hero-section {
    position: relative;
    background-color: #1a1a1a; /* Fallback color */
    background-image: linear-gradient(rgba(2, 15, 22, 0.6), rgba(2, 15, 22, 0.7)), url('../../img/landing/real-estate-card-img.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Ensure content stays above background */
#hero-section .container {
    position: relative;
    z-index: 2;
}

.card-border-hover:hover{
    border: 1px solid #ff6900 !important;
    box-shadow: 0 4px 8px rgba(255, 98, 0, 0.2) !important;
    transition: all 0.3s ease-in-out;
}

/* Video Container */
.video-wrapper {
    max-width: 950px;
}

/* Storage Facility Video Section - Larger Video */
#video-section .video-wrapper {
    max-width: 1400px;
    width: 100%;
}

#video-section .responsive-width {
    width: 90%;
}

@media (max-width: 1200px) {
    #video-section .video-wrapper {
        max-width: 1200px;
    }
}

@media (max-width: 991px) {
    #video-section .video-wrapper {
        max-width: 100%;
    }
    
    #video-section .responsive-width {
        width: 95%;
    }
}

@media (max-width: 768px) {
    #video-section .video-wrapper,
    #video-section .responsive-width {
        width: 100% !important;
    }
}

/* High-DPI Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #hero-section {
        background-image: linear-gradient(rgba(2, 15, 22, 0.6), rgba(2, 15, 22, 0.7)), url('../../img/landing/real-estate-card-img.png');
    }
}

/* ===== RESPONSIVE STYLES ===== */
    
/* Large Tablets and Small Desktops (≤991px) */
@media (max-width: 991px) {
    .display-3 {
        font-size: 2.5rem !important;
    }
    
    .display-4 {
        font-size: 2rem !important;
    }

    .lead {
        font-size: 1.125rem !important;
    }

    #hero-section {
        min-height: auto !important;
        padding: 8rem 0 5rem 0 !important;
        background-attachment: scroll;
        background-position: center center;
    }
}

/* Tablets (≤768px) */
@media (max-width: 768px) {
    /* Hero Section */
    #hero-section {
        min-height: auto !important;
        padding: 8rem 0 5rem 0 !important;
        background-attachment: scroll;
        background-position: center top;
        background-size: cover;
    }

    #hero-section .display-3 {
        font-size: 1.875rem !important;
    }

    #hero-section .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

 /* Mobile (≤576px) */
@media (max-width: 576px) {
    /* Hero Section */
    #hero-section {
        padding: 8rem 0 !important;
        background-attachment: scroll;
        background-position: center top;
        background-size: cover;
    }

    #hero-section .display-3 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }

    #hero-section .lead {
        font-size: 0.95rem !important;
    }

    #hero-section .btn-lg {
        padding: 0.625rem 1.25rem;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
    }

    #hero-section .d-flex.gap-3 {
        flex-direction: column;
        gap: 0.75rem !important;
    }

    #hero-section .feature-list li {
        font-size: 0.875rem;
    }

}



/* Extra Small Mobile (≤375px) */
@media (max-width: 375px) {
    #hero-section {
        background-position: 40% center;
    }

    .display-3,
    .display-4 {
        font-size: 1.375rem !important;
    }

    #hero-section .btn-lg {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
}

.pricing-card-popular {
    border: 2px solid var(--bs-primary) !important;
    border-radius: 1rem !important;
}

.testimonial-card {
    max-width: 700px;
    width: 100%;
}

.testimonials-carousel {
    position: relative;
}

.testimonials-control {
    width: auto;
    top: 50%;
    transform: translateY(-60%);
}

.testimonials-control-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dee2e6;
    color: #212529;
    font-size: 1rem;
}

.testimonials-control-icon:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.testimonials-indicators {
    bottom: 0;
    margin-bottom: 0;
}

.testimonials-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #dee2e6;
    border: none;
    opacity: 1;
}

.testimonials-indicators .active {
    background-color: var(--bs-primary);
}

/* ===== AI vs Human Receptionist Comparison ===== */
#ai-vs-human-section .airx-card {
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    overflow: hidden;
}
#ai-vs-human-section .airx-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}
#ai-vs-human-section .airx-table th,
#ai-vs-human-section .airx-table td {
    padding: 1rem 1.5rem;
    vertical-align: middle;
    border-bottom: 1px solid #eef0f2;
    text-align: center;
}
#ai-vs-human-section .airx-table tbody tr:last-child th,
#ai-vs-human-section .airx-table tbody tr:last-child td {
    border-bottom: 0;
}
#ai-vs-human-section .airx-table .airx-feature {
    text-align: left;
    font-weight: 600;
    color: #2b2b3a;
}
#ai-vs-human-section .airx-table thead th {
    font-weight: 700;
    font-size: 1.05rem;
    border-bottom: 2px solid #e9ecef;
}
#ai-vs-human-section .airx-col-human {
    color: #6c757d;
}
/* Highlighted AI column — tint adapts to the theme primary */
#ai-vs-human-section .airx-ai-col {
    background: rgba(var(--bs-primary-rgb), 0.06);
}
#ai-vs-human-section thead .airx-ai-col {
    background: rgba(var(--bs-primary-rgb), 0.12);
}
#ai-vs-human-section .airx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 1rem;
}
#ai-vs-human-section .airx-icon-yes {
    background: #e6f4ea;
    color: #1a9e4b;
}
#ai-vs-human-section .airx-icon-no {
    background: #fdecec;
    color: #e23d3d;
}
#ai-vs-human-section .airx-ai-text {
    font-weight: 600;
    color: var(--bs-primary);
}

/* ===== AI Receptionist vs Traditional Answering Service ===== */
#ai-vs-answering-section .airt-card {
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    height: 100%;
    background: #fff;
}
#ai-vs-answering-section .airt-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #eef0f2;
    font-weight: 700;
    font-size: 1.15rem;
    color: #2b2b3a;
}
/* Emphasize the AI card with a primary-tinted header + border */
#ai-vs-answering-section .airt-card-ai {
    border-color: rgba(var(--bs-primary-rgb), 0.35);
}
#ai-vs-answering-section .airt-card-ai .airt-card-header {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
}
#ai-vs-answering-section .airt-list {
    list-style: none;
    margin: 0;
    padding: 1rem 1.5rem;
}
#ai-vs-answering-section .airt-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 0;
    color: #4b4b57;
}
#ai-vs-answering-section .airt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: .95rem;
    flex-shrink: 0;
}
#ai-vs-answering-section .airt-icon-yes { background: #e6f4ea; color: #1a9e4b; }
#ai-vs-answering-section .airt-icon-no  { background: #fdecec; color: #e23d3d; }
#ai-vs-answering-section .airt-bottom-line {
    background: rgba(var(--bs-primary-rgb), 0.06);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.20);
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
}
#ai-vs-answering-section .airt-bl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--bs-primary);
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}
/* ============================ Pricing cards =============================
   Real Estate landing pricing section. Each tier is a rounded card with a
   dark bezel, a coloured header block and a white body; the popular tier is
   lifted and ringed in its accent colour.

   Colours live on .re-price-card as --re-accent so the three variants differ
   by one declaration each rather than by repeating every rule. */

.re-price-card {
    --re-accent: #0fbf9f;
    --re-accent-soft: rgba(15, 191, 159, 0.12);

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 1.5rem;
    /* No frame and no fill: the header and body paint their own surfaces, and
       this box exists only to cast the shadow and round the corners. Deliberately
       NOT overflow:hidden - that would clip the MOST POPULAR badge, which sits
       above the card's top edge. */
    background-color: transparent;
    box-shadow:
        0 12px 32px rgba(16, 24, 40, 0.10),
        0 2px 8px rgba(16, 24, 40, 0.06);
}

.re-price-solo       { --re-accent: #0fbf9f; --re-accent-soft: rgba(15, 191, 159, 0.12); }
.re-price-team       { --re-accent: #f77d28; --re-accent-soft: rgba(247, 125, 40, 0.12); }
.re-price-enterprise { --re-accent: #1b2440; --re-accent-soft: rgba(27, 36, 64, 0.10); }

/* The middle tier sits proud of its neighbours, lifted on a deeper shadow
   tinted with its own accent. */
.re-price-featured {
    box-shadow:
        0 22px 50px rgba(247, 125, 40, 0.26),
        0 4px 12px rgba(16, 24, 40, 0.08);
}

@media (min-width: 992px) {
    .re-price-featured {
        margin-top: -1.75rem;
        margin-bottom: -1.75rem;
    }
}

.re-price-badge {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 0.35rem 1.1rem;
    border-radius: 999px;
    /* Ink, not orange: the Team header is now Bookaroo orange, and an orange
       badge on it would read as one flat shape. */
    background-color: #1b2440;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.32);
}

/* ------------------------------- Header -------------------------------- */
.re-price-head {
    padding: 1.5rem 1.5rem 1.25rem;
    border-radius: 1.5rem 1.5rem 0 0;
    background-color: var(--re-accent);
}

.re-price-name {
    margin: 0 0 0.25rem;
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.re-price-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* -------------------------------- Body --------------------------------- */
.re-price-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.5rem;
    border-radius: 0 0 1.5rem 1.5rem;
    background-color: #fff;
}

.re-price-amount {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.re-price-from {
    color: #1b2440;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.re-price-figure {
    color: var(--re-accent);
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
}

/* Enterprise's accent is near-black; its price reads better in ink. */
.re-price-enterprise .re-price-figure {
    color: #1b2440;
}

.re-price-period {
    color: #7b8794;
    font-size: 0.9375rem;
    font-weight: 500;
}

.re-price-setup {
    margin: 0.5rem 0 0;
    color: #9aa5b1;
    font-size: 0.8125rem;
}

/* ----------------------- Included-minutes pill -------------------------- */
.re-price-pill {
    margin-top: 1rem;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    background-color: #f2f4f7;
    color: #1b2440;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
}

/* ---------------------------- Spec columns ------------------------------ */
.re-price-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #eaecf0;
}

.re-price-spec {
    padding: 0 0.5rem;
    color: #1b2440;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.re-price-spec + .re-price-spec {
    border-left: 1px solid #eaecf0;
}

/* ------------------------------ Highlights ------------------------------ */
.re-price-label {
    margin: 1.25rem 0 0.75rem;
    color: #9aa5b1;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.re-price-list {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.re-price-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
    color: #344054;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.re-price-list i {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--re-accent);
    font-size: 0.9375rem;
}

/* -------------------------- Annual-waiver badge -------------------------
   A LABEL, not a control. It used to be a full-width tinted block sitting
   directly above the CTA, which read as a second button. Shrink-wrapped to its
   text and pill-shaped so it is unmistakably informational: no block width, no
   pointer, no hover. */
.re-price-foot {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    /* The body is a flex column, so a block child would stretch edge to edge. */
    align-self: center;
    width: auto;
    max-width: 100%;
    margin-top: 1.25rem;
    padding: 0.3125rem 0.6875rem;
    border-radius: 999px;
    background-color: var(--re-accent-soft);
    color: var(--re-accent);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
    text-align: center;
    cursor: default;
}

.re-price-foot i {
    font-size: 0.75rem;
    line-height: 1;
}

.re-price-enterprise .re-price-foot {
    color: #1b2440;
}

.re-price-cta {
    display: block;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: var(--re-accent);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.re-price-cta:hover {
    color: #fff;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .re-price-cta {
        transition: none;
    }

    .re-price-cta:hover {
        transform: none;
    }
}

/* Feature "Learn More" modal ------------------------------------------------
   The trigger is an <a href="#">, so it must not look or behave like a link to
   somewhere else. */
.feature-learn-more {
    cursor: pointer;
    text-decoration: none;
}

.feature-modal-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

#featureModal .modal-content {
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.18);
}

#featureModal .modal-body p {
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* ------------------------------------------------------------------------- */
/* "Meet Andy" demo-call card, sitting under the walkthrough video.
   Lives on the dark video section, so it is a lighter navy panel rather than
   the white cards used elsewhere on this page.                               */
/* ------------------------------------------------------------------------- */

.re-andy-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
    padding: 22px 26px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: #152238;
}

.re-andy-icon {
    display: inline-grid;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 105, 0, .14);
    color: var(--bs-primary, #ff6900);
    font-size: 1.5rem;
}

.re-andy-body {
    flex: 1 1 320px;
    min-width: 0;
}

.re-andy-title {
    margin-bottom: 4px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
}

.re-andy-copy {
    max-width: 48ch;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .62);
    font-size: .92rem;
}

.re-andy-action {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.re-andy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    padding: 12px 26px;
    border: 0;
    border-radius: 12px;
    background: var(--bs-primary, #ff6900);
    color: #fff;
    font-weight: 600;
}

.re-andy-btn:hover,
.re-andy-btn:focus {
    background: #e85f00;
    color: #fff;
}

/* This is a primary way into the demo - the focus ring has to stay visible. */
.re-andy-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.re-andy-number {
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
}

.re-andy-number:hover {
    color: var(--bs-primary, #ff6900);
}

@media (max-width: 767.98px) {
    .re-andy-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    /* The 320px flex-basis above is a WIDTH only while the card is a row. Once
       it stacks, the main axis is vertical and that basis reserves 320px of
       empty height, leaving a large gap between the copy and the button. */
    .re-andy-body {
        flex: 0 1 auto;
        width: 100%;
    }

    .re-andy-action {
        align-items: stretch;
        width: 100%;
    }

    .re-andy-btn {
        width: 100%;
    }

    .re-andy-number {
        text-align: center;
    }
}