/* =========================================================
   B2B — Admin Dashboard Design System (shared)
   Responsive overrides — pairs with main.css.
========================================================= */

@media (max-width: 1024px) {
    /* Tighter section rhythm on tablet, matching the desktop
       reduction (--space-section: 64) but proportionally smaller. */
    :root { --space-section: 56px; }
    .title-top.section-margin-bottom { margin-bottom: 32px; }

    /* Hero collapses to single column on tablet — headline first,
       photo below, then TC quote, then benefits. */
    #hero .inner-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "photo"
            "quote"
            "benefits";
        gap: 40px;
        align-items: start;
    }
    .hero-content { max-width: 720px; }
    .hero-quote, .hero-quote-v6 { max-width: none; }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    /* Hero benefits 2x2 grid holds on tablet — collapses to 1 col on mobile below. */
    ul.hero-benefits.feature-list.no-bullet,
    ul.hero-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Demo CTA section — stack on tablet */
    .ctas-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    #get-started-cta { padding: 32px; }

    .problems-grid,
    .how-it-works-steps,
    .referral-flow,
    .referral-result-stats {
        grid-template-columns: 1fr;
    }


    .pricing-highlight-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-included-list { grid-template-columns: 1fr; }

    .event-types-grid { grid-template-columns: repeat(3, 1fr); }
    .platform-solutions-grid { grid-template-columns: repeat(2, 1fr); }

    .capital-body { grid-template-columns: 1fr; gap: 24px; }
    .capital-photo {
        aspect-ratio: 16 / 10;
        max-height: 360px;
    }

    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: 24px 16px;
    }
    .stats-bar-item { padding: 8px 16px; }

    /* Reviews stack on tablet — author block above body. The
       desktop's hidden meta-div fix carries through (display: none
       set in main.css applies at all viewports). */
    .review-box.flex {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
    .testimonial-author { flex: 1 1 auto; }

    .flex.col2 {
        flex-direction: column;
    }

    /* Photo strip — proportional reduction matching desktop's
       boxed treatment (max-width inner-max + 24px gutter +
       --radius-lg corners + violet hairline). Just shorter. */
    .section-photo-strip {
        height: 280px;
        margin: 32px auto;
    }
    .section-photo-strip--tall { height: 360px; }
}

@media (max-width: 768px) {
    :root { --space-section: 48px; }
    .title-top.section-margin-bottom { margin-bottom: 28px; }

    html, body { font-size: 15px; }
    /* Defensive: prevent any wide child (long pill text, comparison
       table) from making the whole page horizontally scrollable. */
    html, body { overflow-x: hidden; }

    header[role="banner"] { padding: 12px 0; }
    header nav { display: none; }
    .mobile-menu-icon { display: inline-flex; }

    .nav-cta-secondary, .nav-cta-primary, .nav-pricing-link { display: none; }

    .inner-wrapper { padding: 0 16px; }

    #hero { padding: 40px 0 24px; }
    .hero-content { margin-bottom: 36px; }
    .hero-content h2 {
        font-size: 1.875rem;
        margin: 12px 0 16px;
    }
    .hero-platform-desc {
        font-size: 1rem;
        line-height: 24px;
        margin-bottom: 24px;
    }
    #main-ctas-container { margin-bottom: 24px; }

    /* Buttons: full-width primary, normal-height (44 instead of
       48) on small screens so they aren't oversized. */
    .button-row { flex-direction: column; align-items: stretch; }
    .button {
        width: 100%;
        min-height: 44px;
        padding: 0 20px;
    }

    .hero-quote, .hero-quote-v6 { padding: 20px; }
    .hero-quote-text {
        font-size: 1rem;
        line-height: 24px;
    }

    .stats-bar {
        grid-template-columns: 1fr 1fr;
        padding: 20px 12px;
    }
    .stats-bar-value { font-size: 1.625rem; }
    .stats-bar-label { font-size: 11px; letter-spacing: 1px; }
    .stats-bar-item { padding: 8px 12px; }

    .grid-logos {
        gap: 20px 32px;
    }
    /* Hero benefits collapse to 1 column on mobile.
       Selector mirrors the desktop specificity-fix so this rule
       wins over .feature-list.no-bullet li padding-left:0. */
    ul.hero-benefits.feature-list.no-bullet,
    ul.hero-benefits {
        grid-template-columns: 1fr;
    }
    ul.hero-benefits.feature-list.no-bullet li,
    ul.hero-benefits li {
        padding: 16px 18px;
    }

    .feature-container { padding: 20px; }
    .feature-container.feature-container--compact { padding: 20px; }
    .feature-container.feature-container--compact > svg { padding: 8px; margin-bottom: 16px; }

    /* Data ownership card — pill list stacks vertically on mobile so
       long bullets ("Every buyer's data lands in your CRM, not
       someone else's") wrap inside the pill instead of forcing
       horizontal page overflow. */
    .data-ownership-card { padding: 24px 20px; }
    .data-ownership-card .feature-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        max-width: none;
    }
    .data-ownership-card .feature-list li {
        flex: 1 1 auto;
        width: 100%;
        box-sizing: border-box;
        border-radius: var(--radius-sm);
        white-space: normal;
        word-break: break-word;
    }
    .referral-feature { padding: 24px 20px; }
    .referral-flow { gap: 12px; }
    .referral-flow-step { padding: 18px 16px; }
    .referral-result-box { padding: 20px; }

    .capital-container { padding: 28px 24px; }
    .capital-photo {
        aspect-ratio: 16 / 9;
        max-height: 240px;
    }
    .capital-photo img { min-height: 0; }

    /* Comparison table — restructure to a stacked card layout per
       row on mobile. Each <tr> becomes a card showing the feature
       label as a header and the OTHER / TICKET FAIRY values as two
       labelled cells beneath. This avoids horizontal-scroll UX +
       column-cutoff that the desktop 3-col layout produces on a
       narrow viewport. */
    .comparison-table-wrap { overflow: hidden; }
    .comparison-table-v7 { display: block; min-width: 0; width: 100%; }
    .comparison-table-v7 thead { display: none; }
    .comparison-table-v7 tbody { display: block; width: 100%; }
    .comparison-row-main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "feature feature"
            "other ttf";
        gap: 8px 12px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(235, 235, 238, 0.06);
    }
    .comparison-row-main > .comparison-td {
        padding: 0;
        border: 0;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.4px;
    }
    .comparison-td--feature {
        grid-area: feature;
        gap: 10px;
    }
    .comparison-td--other,
    .comparison-td--ttf {
        background: var(--color-white-05);
        border: 1px solid var(--color-stroke-tertiary-rest);
        border-radius: var(--radius-sm);
        padding: 10px 12px !important;
        box-shadow: none;
        word-break: break-word;
    }
    .comparison-td--other { grid-area: other; }
    .comparison-td--ttf {
        grid-area: ttf;
        background: rgba(251, 163, 149, 0.06);
        border-color: rgba(251, 163, 149, 0.32);
        box-shadow: none;
    }
    .comparison-td--other::before,
    .comparison-td--ttf::before {
        content: attr(data-mobile-label);
        display: block;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--color-fg-tertiary-rest);
        margin-bottom: 4px;
    }
    .comparison-td--ttf::before { color: var(--color-peach-300); }
    /* Use :not([hidden]) so the JS-toggled `hidden` attribute still
       collapses the detail row. A flat `display: block` here would
       override the HTML hidden semantic and leave every detail open. */
    .comparison-row-detail:not([hidden]) { display: block; }
    .comparison-row-detail:not([hidden]) > .comparison-td-detail {
        display: block;
        margin: 0 16px 8px;
        padding: 12px 14px !important;
        border-left-width: 0;
        background: var(--color-white-05);
        border-radius: var(--radius-sm);
    }

    .mid-cta-card { padding: 36px 24px; }

    #reviews { padding: 28px 20px; margin: 32px 0; }
    /* Pull-quote scale-down: smaller decorative quote mark + less
       padding-left so the body has room to breathe on small screens. */
    .testimonial-pull-quote {
        font-size: 1.0625rem;
        line-height: 1.45;
        padding: 0 0 0 36px;
        margin: 16px 0 16px;
    }
    .testimonial-pull-quote::before {
        font-size: 64px;
        top: -20px;
        left: -2px;
    }

    .pricing-highlight-card { padding: 36px 24px; }
    .pricing-highlight-stats-grid { grid-template-columns: 1fr 1fr; padding: 12px; gap: 8px; }
    .pricing-stat { padding: 16px 12px; }
    .pricing-stat-value { font-size: 1.5rem; line-height: 30px; }
    .pricing-included-list { grid-template-columns: 1fr; }
    .pricing-included { margin-top: 28px; padding-top: 24px; }

    .event-types-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .event-type-card { padding: 20px 12px; }
    .integrations-grid { grid-template-columns: 1fr; }
    .integration-card { padding: 14px; }
    .integrations-group { margin-bottom: 28px; }

    .platform-solutions-grid { grid-template-columns: 1fr; }
    .platform-solution-link { padding: 16px; }

    .seo-explore-more > section .inner-wrapper > div { columns: 1 !important; }

    .further-reading-grid { grid-template-columns: 1fr; }
    .further-reading-card { padding: 16px; }

    .guarantee-card { padding: 28px 24px; }

    /* CTA section — get-started panel collapses + form full-width */
    .ctas-section { padding: 32px 0 0; }
    #get-started-cta { padding: 24px; }
    .cta-content h2,
    .cta-content .h2 {
        font-size: 1.375rem;
    }

    /* Sticky CTAs simplify on mobile (top-bar layout). */
    .sticky-ctas { padding: 8px 0; }
    .sticky-buttons .button {
        padding: 0 12px;
        min-height: 36px;
        font-size: 13px;
    }
    /* Drop logo + Pricing on small screens so the three remaining
       items (Features, Get Started, Book Demo) fit comfortably. */
    .sticky-pricing-btn, .sticky-logo { display: none; }

    .social-proof-popup {
        left: 16px;
        right: 16px;
        bottom: 80px;
        max-width: none;
    }

    /* Press modal — tighter padding + smaller bounded height so
       it doesn't take over the entire mobile viewport. The
       sticky close button (set in main.css) stays visible as the
       article content scrolls. */
    .press-modal { padding: 12px; }
    .press-modal-dialog {
        padding: 16px 20px 24px;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
    .press-modal-close {
        width: 36px;
        height: 36px;
        margin-right: -4px;
    }
    .press-modal-headline { font-size: 20px; line-height: 28px; }
    .press-modal-publisher-logo { max-height: 24px; margin-bottom: 12px; }
    .press-modal-photo-wrap { margin-bottom: 12px; }
    .press-modal-pullquote { padding: 12px 14px; font-size: 15px; }

    /* Modal — overlay positioning + tight, single-screen layout for
       the demo booking form. We compress padding, gaps, control
       heights, and hide non-essential decoration so the entire form
       (header → fields → radios → submit) fits inside one viewport
       without internal scroll on a typical phone (~700–800dvh). */
    .modal-content {
        width: calc(100% - 16px);
        margin: 8px auto;
        max-height: calc(100dvh - 16px);
        border-radius: var(--radius-md);
    }
    .modal .modal-content h2,
    .modal .modal-content #demo-booking-form h2 {
        padding: 0 0 10px 0 !important;
        font-size: 16px !important;
        line-height: 22px !important;
        margin: 0 0 8px !important;
    }
    .modal .modal-content h2 i,
    .modal .modal-content #demo-booking-form h2 i {
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    /* The modal clones #demo-booking-form's *inner HTML* into
       #modal-form-container, so ID-scoped selectors won't match
       inside the modal. We target by class / direct-descendant
       instead so the rules actually apply on mobile. */
    .modal .modal-content > *:not(.close) { padding-left: 16px; padding-right: 16px; }
    .modal #modal-form-container { padding-top: 12px; padding-bottom: 14px; }
    .modal-content #modal-form-container > p {
        font-size: 13px !important;
        line-height: 18px !important;
        margin: 0 0 12px !important;
    }
    .modal-content .book_now_form .form-fields {
        gap: 8px !important;
    }
    .modal-content .name-fields { gap: 8px !important; }
    .modal-content .form-field-container input[type="text"],
    .modal-content .form-field-container input[type="email"],
    .modal-content .form-field-container input[type="tel"] {
        min-height: 40px !important;
        font-size: 14px !important;
        padding: 0 12px !important;
    }
    /* Radio group on mobile keeps the desktop vocabulary
       (transparent group + per-option cards) just compressed. */
    .modal-content .radio-label { margin: 0 0 8px !important; font-size: 13px !important; }
    .modal-content .radio-options { gap: 4px !important; }
    .modal-content .radio-option {
        padding: 8px 10px !important;
        font-size: 13px !important;
        line-height: 18px !important;
    }
    .modal-content .radio-option input[type="radio"] {
        width: 16px !important;
        height: 16px !important;
        margin-right: 10px !important;
    }
    .modal-content .book_now_form #book-now-form-submit-btn-modal,
    .modal-content .book_now_form .button.gradient-purple {
        min-height: 44px !important;
        margin-top: 14px !important;
        font-size: 14px !important;
    }
    /* Trust indicators hidden in modal on mobile — they're
       redundant decoration when we're fighting for vertical space. */
    .modal-content .trust-indicators { display: none !important; }
    .modal-content > .close,
    .modal-content .close {
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        font-size: 18px;
    }

    /* FAQ */
    .faq-tabs { display: none; }
    .faq-mobile-select-container { display: block; }
    .faq-tab-panels { padding: 20px; }
    .faq-panel-title { font-size: 16px; }
    .faq-entity { padding: 14px; }

    .seo-explore-more { padding: 16px; }

    .testimonial-author-photo { width: 72px; height: 72px; }
    .testimonial-event-photo { aspect-ratio: 16 / 10; }

    /* Photo strips: short bands on mobile, matching desktop's
       boxed treatment (radius + hairline border). */
    .section-photo-strip { height: 200px; margin: 28px auto; padding: 0 16px; }
    .section-photo-strip--tall { height: 260px; }

    footer[role="contentinfo"] { padding: 24px 0; margin-top: 32px; }
    footer .flex { flex-direction: column; gap: 12px; text-align: center; }

    /* Risk reversal: stack neatly on mobile */
    .risk-reversal { padding: 12px 16px; font-size: 12px; }
    .risk-reversal p { gap: 6px 12px; }
    .risk-reversal-sep { display: none; }

    /* TF3 banner — tighten + smaller */
    .tf3-banner { padding: 0 16px; }
    .tf3-banner-link { font-size: 12px; gap: 8px; padding: 5px 12px 5px 5px; }
    .tf3-banner-tag { font-size: 9px; }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    .hero-content h2 { font-size: 1.625rem; }

    .video-play-btn-text { display: none; }
    .video-play-btn { bottom: 12px; left: 12px; }
    .video-play-btn-icon { width: 26px; height: 26px; }

    .stats-bar { grid-template-columns: 1fr; gap: 4px; }
    .stats-bar-item + .stats-bar-item::before {
        left: 16px; right: 16px; top: 0; bottom: auto;
        width: auto; height: 1px;
    }
    .stats-bar-value { font-size: 1.5rem; }

    .grid-logos {
        gap: 16px 24px;
    }

    .event-types-grid { grid-template-columns: 1fr 1fr; }
    .pricing-highlight-stats-grid { grid-template-columns: 1fr; }

    .button { font-size: 14px; padding: 0 16px; }

    /* Pull-quote even smaller on phone */
    .testimonial-pull-quote::before {
        font-size: 56px;
    }
}

/* Three Pillars: 3-col -> 1-col on small viewports */
@media (max-width: 900px) {
    .three-pillars-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Event-types pill row: tighter on mobile */
@media (max-width: 600px) {
    .event-types-pill-row {
        gap: 6px;
        padding-top: 20px;
        margin-top: 20px;
    }
    .event-types-pill {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Landing-page footer responsive: 4-col -> 2-col -> 1-col */
@media (max-width: 900px) {
    .landing-page-footer-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }
    .landing-page-footer-legal-row,
    .landing-page-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 520px) {
    .landing-page-footer-cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .landing-page-footer {
        padding: 40px 0 28px;
        margin-top: 40px;
    }
}

/* ==========================================================================
   MEET THE TEAM — mobile crossfading rotator (mirror of contact-us-v6)
   The desktop 3-up strip collapses to a single crossfading rotator: the
   three figures stack absolutely inside a 4:3 box and fade through on a
   15s loop. Each figure keeps its caption, so the label fades with the
   photo.
   ========================================================================== */
@keyframes team-rotator-fade {
    /* visibility (not just opacity) flips each off-screen figure out of
       the accessibility tree, so screen readers only encounter the
       on-screen slide instead of all three captions at once — matching
       .hero-photo-rotator. Per the CSS visibility-interpolation rule the
       figure stays `visible` for the whole 0%-40% window (fade-in + hold
       + fade-out), then drops to `hidden` for the rest of the loop. */
    0%   { opacity: 0; visibility: visible; }
    7%   { opacity: 1; }
    33%  { opacity: 1; }
    40%  { opacity: 0; visibility: hidden; }
    100% { opacity: 0; visibility: hidden; }
}
@media (max-width: 768px) {
    .meet-the-team .team-photo-strip {
        display: block;
        position: relative;
        aspect-ratio: 4 / 3;
        margin-top: 16px;
        border-radius: 16px;
        overflow: hidden;
    }
    .meet-the-team .team-photo,
    .meet-the-team .team-photo--group {
        position: absolute;
        inset: 0;
        flex: none;
        border-radius: 0;
        opacity: 0;
        /* Hidden by default so figures still inside their pre-roll
           animation-delay (figures 2 & 3) stay out of the a11y tree
           until the keyframes flip them visible for their window. */
        visibility: hidden;
        animation: team-rotator-fade 15s ease-in-out infinite;
    }
    .meet-the-team .team-photo:nth-child(1) { animation-delay: -1s; }
    .meet-the-team .team-photo:nth-child(2) { animation-delay: 4s; }
    .meet-the-team .team-photo:nth-child(3) { animation-delay: 9s; }
    .meet-the-team .team-photo img {
        width: 100%;
        height: 100%;
    }
    .meet-the-team .team-photo figcaption {
        font-size: 17px;
        padding: 36px 20px 16px;
    }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .meet-the-team .team-photo {
        animation: none;
        opacity: 0;
        visibility: hidden;
    }
    .meet-the-team .team-photo:first-child {
        opacity: 1;
        visibility: visible;
    }
}

/* ==========================================
   MOBILE: center all content text (≤768px)
   Mirrors contact-us-v6/responsive.css. On phones the layout is single
   column, so every content section centers its text. The footer keeps its
   multi-column nav (excluded), and the hero owns its own alignment (excluded
   so its benefit rows don't drift — .hero-content keeps any centering its own
   rule applies). Flex items the cards left-pack on desktop are centered
   individually, since text-align can't reach flex item positioning.
   (No comparison-feature fix needed here: b2b's .comparison-td--feature is a
   flex row, so it stays left-packed regardless of text-align.)
   ========================================== */
@media (max-width: 768px) {
    .inner-wrapper:not(.landing-page-footer-inner) {
        text-align: center;
    }
    #hero .inner-wrapper {
        text-align: left;
    }
    .problems-card-icon,
    .problems-card-solution-link {
        align-self: center;
    }
    .problems-card-solution {
        align-items: center;
    }
    .three-pillars-card {
        align-items: center;
    }
    .faq-answer ul,
    .faq-answer ol {
        display: inline-block;
        text-align: left;
    }
}