/* ==========================================================================
   dissolveX landing — shared polish layer
   Loaded last on every landing page (partials/head_end.html), so it can set
   platform-level behaviour once instead of in 28 page stylesheets:
   mobile-native touch handling, keyboard focus, press feedback, the mobile
   navigation sheet, and reduced-motion / transparency / contrast fallbacks.
   ========================================================================== */

:root {
    --dx-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --dx-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --dx-emerald: #10b981;
    --dx-emerald-deep: #047857;
    --dx-ink: #0b2b20;
    --dx-focus: #059669;
    --dx-safe-top: env(safe-area-inset-top, 0px);
    --dx-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- Platform baseline --------------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-padding-top: calc(96px + var(--dx-safe-top));
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Headlines break into even lines; body copy avoids one-word orphans. */
:where(h1, h2, h3) {
    text-wrap: balance;
}

:where(p, li, dd) {
    text-wrap: pretty;
}

/* Controls: fire on tap without the double-tap wait, and a long press does not
   select the label or open the link callout. Content text stays selectable. */
:where(a, button, [role="button"], label, summary, select) {
    touch-action: manipulation;
}

:where(button, [role="button"], a.dx-link, .dx-menu-toggle) {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Prevent image selection and dragging across all landing pages (Desktop & Mobile) */
img,
svg,
picture,
picture img,
[class*="-img"],
[class*="-mockup"] img {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-touch-callout: none !important;
}

/* Navigation that used to be <button data-href> is now a real link. Links
   default to inline and underlined; buttons did not, so restore the button
   box without outranking any class that styles it (zero specificity). */
:where(a.dx-link) {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: inherit;
    line-height: normal;
    cursor: pointer;
}

/* A whole card that navigates, while its real link stays the accessible name. */
.bento-card-linked {
    position: relative;
    cursor: pointer;
}

.dx-stretched-link {
    font-size: 0.8rem;
    font-weight: 700;
    color: #047857;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    text-decoration: none;
}

.dx-stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

/* Images: reserve their box from width/height attributes so the page does not
   jump as they load. */
:where(img[width][height]) {
    height: auto;
}


/* iOS zooms into any field under 16px and never zooms back out. */
@media (pointer: coarse) {
    input,
    select,
    textarea {
        font-size: max(16px, 1em) !important;
    }
}

/* --- Keyboard focus ------------------------------------------------------ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--dx-focus) !important;
    outline-offset: 3px !important;
}

:where(input, select, textarea):focus-visible {
    outline-offset: 1px !important;
}

.dx-skip-link {
    position: fixed;
    top: calc(12px + var(--dx-safe-top));
    left: 12px;
    z-index: 3000;
    padding: 10px 18px;
    border-radius: 9999px;
    background: var(--dx-ink);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transform: translateY(calc(-100% - 24px - var(--dx-safe-top)));
    transition: transform 200ms var(--dx-ease-out);
}

.dx-skip-link:focus-visible {
    transform: none;
}

/* --- Press feedback -------------------------------------------------------
   The individual `scale` property composes with any transform a component
   already uses for hover, so pressing never cancels a lift or a slide. */

:where(a.dx-link:not(.feat-brand-link), button:not(:disabled), .dx-menu-toggle, [role="button"]):active {
    scale: 0.97;
}

:where(.feat-footer-link, .feat-legal-btn, .dx-menu-link):active {
    scale: 1;
}

/* --- Hero badge position ---------------------------------------------------
   Every page's hero opens the same way: the small badge sits a fixed distance
   below the top of the page and a fixed distance above the headline. The
   pages had drifted between 110px and 150px from the top, with 16px to 28px
   to the headline; these two values are what the feature pages already used.
   Only position and spacing are set here; each badge keeps its own look. */

:root {
    --dx-hero-top: 140px;
    --dx-hero-badge-gap: 24px;
}

@media (max-width: 768px) {
    :root {
        --dx-hero-top: 110px;
    }
}

.feat-hero-section,
.onb-hero-section,
.price-hero-section,
.about-hero-section,
.pr-hero-section,
.rc-hero-section,
.terms-hero-section,
.cookies-hero-section,
.privacy-hero-section,
.why-hero-section,
.te-hero-section,
.careers-hero-section,
.demo-hero-section {
    padding-top: var(--dx-hero-top);
}

.feat-hero-badge,
.onb-hero-pill,
.price-pill-badge,
.about-hero-badge,
.pr-hero-pill,
.rc-hero-tag-pill,
.terms-badge,
.cookies-badge,
.privacy-badge,
.why-hero-badge,
.te-hero-pill,
.demo-header-badge {
    margin-bottom: var(--dx-hero-badge-gap);
}

/* Careers spaces its hero column with a 28px flex gap rather than margins,
   so the badge takes back the difference to land on the same gap. */
.careers-badge {
    margin-bottom: calc(var(--dx-hero-badge-gap) - 28px);
}

/* The home page's Features section is reached as /#features. Arriving there
   should put its badge where a hero badge sits on every other page, rather
   than wherever the section's own padding happens to leave it. */
#features {
    /* The page scrolls anchors to 96px below the top (scroll-padding above)
       and the section opens with 90px of padding before its badge. */
    scroll-margin-top: calc(var(--dx-hero-top) - 96px - var(--dx-safe-top) - 90px);
}

#features .section-badge-pill {
    margin-bottom: var(--dx-hero-badge-gap);
}

/* --- Current page in the navigation -----------------------------------------
   nav.js marks the link for the page (or home-page section) being viewed with
   aria-current. It takes the same look as hovering that link: the emerald ink
   and, in the bar, the soft pill the bar already uses. */

.feat-nav-links .feat-nav-link-btn[aria-current] {
    color: var(--dx-emerald-deep);
    background: rgba(16, 185, 129, 0.12);
}

/* The shared navbar CTA keeps Home's treatment on every landing page. */
.feat-nav-actions .feat-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border: 0;
    border-radius: 9999px;
    background: #0b2b20;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(15, 57, 43, 0.25);
    font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s, filter 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    .feat-nav-actions .feat-btn-primary:hover {
        background: #123d2f;
        transform: translateY(-1px);
    }
}

@media (max-width: 640px) {
    .feat-nav-actions .feat-btn-primary {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
}

.feat-footer-link[aria-current],
.feat-legal-btn[aria-current] {
    color: #10b981;
    font-weight: 600;
}

/* --- Styled dropdowns: see partials/select.css (loaded by head_end.html). */

/* --- Phones: shared layout for landing sections ---------------------------
   Two rules every feature page needs on a phone, written once here.

   1. Real screenshot placeholders. A *-img-mockup-wrapper holds a
      *-img-mockup-card holding the image, as on Onboarding. The card is the
      responsive part: it is as wide as its column and clips to its own
      rounded corners, and the image inside fills that width at its own
      proportions. Replacing the image with any other picture needs no CSS;
      the card simply takes the new picture's height.

   2. Split sections that swap sides on desktop (*-split-reversed) stack on a
      phone, and the text always comes before its picture, as it does in the
      sections that do not swap. */

@media (max-width: 768px) {
    [class*="-img-mockup-wrapper"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    [class*="-img-mockup-card"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        overflow: hidden;
        border-radius: 12px;
    }

    [class*="-img-mockup-card"] > img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 11px;
    }

    [class*="-split-reversed"] > [class*="-split-content"] {
        order: -1;
    }
}

/* Keep comparison-table rows steady when pressed. */

:where(.matrix-accordion-toggle):active {
    scale: 1;
}

/* --- Safe areas (viewport-fit=cover) ------------------------------------- */

/* --- Canonical Floating Navbar (Exact match to Home Page across all pages) --- */

.feat-nav-wrapper {
    position: fixed !important;
    top: var(--dx-safe-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
    background: transparent;
    transition: none;
}

.feat-nav-wrapper.nav-ready {
    transition: background-color 0.22s cubic-bezier(0.2, 0, 0, 1),
        box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1),
        border-color 0.22s cubic-bezier(0.2, 0, 0, 1) !important;
}

.feat-nav-wrapper .container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

.navbar,
.feat-navbar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: none !important;
    width: 100% !important;
    height: 44px !important;
    pointer-events: auto !important;
}

.feat-brand-link {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 44px !important;
    cursor: pointer !important;
}

/* Right Translucent Pill Capsule */
.feat-nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(15, 57, 43, 0.14) !important;
    border-radius: 9999px !important;
    padding: 5px 8px 5px 22px !important;
    box-shadow: 0 4px 20px rgba(15, 57, 43, 0.05) !important;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease !important;
}

.feat-nav-wrapper.scrolled .feat-nav-right {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(15, 57, 43, 0.2) !important;
}

/* Scrolled Full-Width State */
.feat-nav-wrapper.scrolled {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(15, 57, 43, 0.08) !important;
    box-shadow: 0 4px 25px rgba(15, 57, 43, 0.04) !important;
}

.feat-nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    list-style: none !important;
}

.feat-nav-links .feat-nav-link-btn {
    text-decoration: none !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    transition: color 0.2s !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    padding: 6px 14px !important;
    margin: -6px -14px !important;
    border-radius: 9999px !important;
    font-family: inherit !important;
    cursor: pointer !important;
    line-height: inherit !important;
    user-select: text !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
    .feat-nav-links .feat-nav-link-btn:hover {
        color: #047857 !important;
    }
}

.feat-nav-bullet {
    width: 4px !important;
    height: 4px !important;
    background: #cbd5e1 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.feat-nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.feat-btn-pill {
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s, filter 0.2s !important;
    cursor: pointer !important;
    font-family: inherit !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.feat-btn-secondary {
    background: transparent !important;
    color: #334155 !important;
}

@media (hover: hover) and (pointer: fine) {
    .feat-btn-secondary:hover {
        background: #f8fafc !important;
    }
}

.feat-btn-primary {
    background: #0f392b !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(15, 57, 43, 0.2) !important;
}

@media (hover: hover) and (pointer: fine) {
    .feat-btn-primary:hover {
        background: #10b981 !important;
        box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
        transform: translateY(-1px) !important;
    }
}

/* Paint the strip under the notch in the bar's own colour once it has one. */
.feat-nav-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--dx-safe-top);
    background: inherit;
    pointer-events: none;
}

.feat-footer {
    padding-bottom: calc(var(--dx-safe-bottom) + 0px);
}

/* --- Mobile navigation ---------------------------------------------------- */

.dx-menu-toggle {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    margin: -2px -2px -2px 2px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--dx-ink);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 160ms var(--dx-ease-out);
}

.dx-menu-toggle:active {
    background: rgba(16, 185, 129, 0.12);
}

.dx-menu-bars,
.dx-menu-bars::before,
.dx-menu-bars::after {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 2px;
    margin-left: -9px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 280ms var(--dx-ease-out), opacity 160ms ease;
}

.dx-menu-bars {
    top: 50%;
    margin-top: -1px;
    background: transparent;
}

.dx-menu-bars::before,
.dx-menu-bars::after {
    content: "";
    left: 0;
    margin-left: 0;
}

.dx-menu-bars::before {
    transform: translateY(-4px);
}

.dx-menu-bars::after {
    transform: translateY(4px);
}

.dx-menu-toggle[aria-expanded="true"] .dx-menu-bars::before {
    transform: rotate(45deg);
}

.dx-menu-toggle[aria-expanded="true"] .dx-menu-bars::after {
    transform: rotate(-45deg);
}

/* The scrim dims the page so the sheet reads as the focused task. */
.dx-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 1990;
    background: rgba(8, 26, 20, 0.34);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, visibility 0s linear 240ms;
}

/* The sheet grows out of the menu button (top right) and returns the same way. */
.dx-menu {
    position: fixed;
    top: calc(var(--dx-safe-top) + 72px);
    right: max(12px, env(safe-area-inset-right, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    z-index: 2000;
    max-height: calc(100svh - var(--dx-safe-top) - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 24px 60px -12px rgba(8, 26, 20, 0.28),
        0 0 0 1px rgba(16, 185, 129, 0.12);
    transform-origin: top right;
    transform: translateY(-8px) scale(0.96);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 260ms var(--dx-ease-drawer),
        opacity 180ms ease,
        visibility 0s linear 260ms;
}

.dx-menu-open .dx-menu {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition:
        transform 340ms var(--dx-ease-drawer),
        opacity 200ms ease,
        visibility 0s;
}

.dx-menu-open .dx-menu-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity 240ms ease, visibility 0s;
}

.dx-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dx-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 14px;
    color: var(--dx-ink);
    font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: background-color 120ms ease;
}

.dx-menu-link:active {
    background: rgba(16, 185, 129, 0.12);
}

.dx-menu-link svg {
    color: #94a3b8;
    flex-shrink: 0;
}

.dx-menu-link[aria-current] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--dx-emerald-deep);
}

.dx-menu-divider {
    height: 1px;
    margin: 8px 16px;
    background: rgba(15, 57, 43, 0.1);
}

.dx-menu-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 6px;
}

.dx-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    transition: background-color 120ms ease;
}

.dx-menu-cta-primary {
    background: var(--dx-ink);
    color: #fff;
}

.dx-menu-cta-secondary {
    background: #fff;
    color: var(--dx-ink);
    border: 1px solid rgba(15, 57, 43, 0.16);
}

@media (hover: hover) and (pointer: fine) {
    .dx-menu-link:hover {
        background: rgba(16, 185, 129, 0.08);
    }
}

@media (max-width: 1040px) {
    .dx-menu-toggle {
        display: inline-block;
    }

    .feat-nav-links,
    .feat-nav-actions .feat-btn-secondary {
        display: none !important;
    }

    .feat-nav-right {
        padding: 4px 4px 4px 8px !important;
        gap: 4px !important;
    }

    .feat-nav-actions .feat-btn-pill {
        white-space: nowrap;
    }

    .feat-nav-actions {
        border-left: 0 !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}

@media (min-width: 1041px) {
    .dx-menu,
    .dx-menu-scrim {
        display: none !important;
    }
}

/* Touch targets: 44px minimum where a finger is the pointer. */
@media (pointer: coarse) {
    .feat-btn-pill,
    .feat-hero-btn-primary,
    .feat-hero-btn-secondary {
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .feat-footer-links .feat-footer-link {
        padding-block: 8px !important;
    }

    .feat-legal-btn {
        padding-block: 12px !important;
    }

    .feat-social-box,
    .footer-social-box {
        min-width: 44px;
        min-height: 44px;
    }
}

/* --- Accessibility preferences -------------------------------------------
   Reduced motion keeps colour and opacity changes (they aid understanding)
   but removes travel, loops and parallax. */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 1ms !important;
        transition-delay: 0s !important;
    }

    .dx-menu,
    .dx-menu-open .dx-menu {
        transform: none !important;
    }

    :where(a.dx-link, button, .dx-menu-toggle, [role="button"]):active {
        scale: 1;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .dx-menu,
    .feat-nav-right,
    .feat-nav-wrapper.scrolled {
        background: #ffffff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (prefers-contrast: more) {
    .dx-menu,
    .feat-nav-right {
        background: #ffffff !important;
        border: 1px solid #0b2b20 !important;
    }

    :where(a, button, input, select, textarea):focus-visible {
        outline-width: 3px !important;
    }
}

/* Text for screen readers only. */
.dx-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* The skip link moves focus to <main>; the region itself needs no ring. */
main[tabindex="-1"]:focus {
    outline: none !important;
}

/* Grid and flex children default to min-width:auto, which lets one wide
   descendant (a nowrap label, a mock table) widen the whole column past the
   screen on phones. The overflow was being hidden by overflow-x: clip, so
   the text simply ran off the right edge. */
:where([class*="-split-grid"], [class*="-layout"], [class*="-content-grid"], [class*="-showcase-grid"], .demo-hero-container) > * {
    min-width: 0;
}

.contact-header-line {
    flex-wrap: wrap;
}

/* Mock sidebar step markers are text ("3", "•"); several page stylesheets
   paint them in greys and greens too light to read. */
html .feat-sidebar-nav-item .feat-item-icon {
    color: #475569;
}

html .feat-sidebar-nav-item.completed .feat-item-icon {
    color: #047857;
}

/* Set by nav.js on looping animations that have scrolled out of view. */
.dx-offscreen,
.dx-offscreen::before,
.dx-offscreen::after {
    animation-play-state: paused !important;
}

/* Phones: the bar's brand, trial button and menu button share one line down
   to 320px. Pages clip their .container on phones; the bar's container must
   not, or it cuts the capsule and its shadow. Neither the logo nor the
   capsule shrinks, so the button is never squeezed or pushed off the screen;
   the space between them is what gives. */
@media (max-width: 768px) {
    .feat-nav-wrapper .container {
        overflow: visible !important;
    }

    .feat-navbar {
        gap: 10px;
    }

    .feat-brand-link,
    .feat-nav-right {
        flex: 0 0 auto;
    }
}

/* Every page's bar uses the home page's 12px phone gutter (landing.css);
   pages without it kept the 40px desktop gutter. */
@media (max-width: 640px) {
    .feat-nav-wrapper .container,
    .feat-nav-wrapper.scrolled .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Narrow phones: the bar's side padding and the capsule's inner padding give
   up a little room; the logo and the button keep their size and shape. */
@media (max-width: 374px) {
    .feat-navbar {
        padding-left: 4px !important;
        padding-right: 0 !important;
    }

    .feat-nav-right {
        padding-left: 6px !important;
    }

    .feat-nav-actions .feat-btn-primary {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

.feat-spaces-grid > * {
    min-width: 0;
}

@media (max-width: 349px) {
    .why-support-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .why-sup-label {
        overflow-wrap: anywhere;
    }
}

/* Ensure all sliding tickers & marquees continue running smoothly on hover across all landing pages */
.marquee-container:hover .marquee-track,
.incol-marquee-container:hover .incol-marquee-track,
[class*="marquee-container"]:hover [class*="marquee-track"],
[class*="ticker-container"]:hover [class*="ticker-track"] {
    animation-play-state: running !important;
}

/* Global removal of background images on all CTA sections, banners, and scenic frames across all pages */
.feat-cta-banner-section,
[class*="-cta-banner-section"],
[class*="-cta-section"],
.cta-banner,
.home-cta-section,
.mf-download-section,
.why-cta-banner-section,
.price-cta-banner-section,
.onb-cta-banner-section,
.terms-cta-banner-section,
.rc-cta-banner-section,
.about-cta-banner-section,
[class*="-scenic-frame"],
[class*="-scenic-card"],
[class*="-scenic-backdrop"],
.hero-scenic-backdrop,
.feat-banner-scenic,
.off-scenic-backdrop {
    background-image: none !important;
}

.section-badge-pill,
.feat-hero-badge,
.ts-section-pill,
.lm-section-pill,
.sm-section-pill,
.hd-section-pill,
.dm-section-pill,
.pm-section-pill,
.hra-section-pill,
.rc-section-pill,
.okr-section-pill,
.comp-section-pill,
.feat-section-pill,
.why-hero-badge,
.about-hero-badge,
.pr-hero-pill,
.price-pill-badge,
.te-hero-pill,
.wg-hero-pill-badge,
.onb-section-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(15, 57, 43, 0.14) !important;
    border-radius: 9999px !important;
    padding: 7px 20px !important;
    font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #0b2b20 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    text-transform: none !important;
    width: fit-content !important;
    max-width: max-content !important;
}

.section-badge-pill svg,
.feat-hero-badge svg,
.ts-section-pill svg,
.lm-section-pill svg,
.sm-section-pill svg,
.hd-section-pill svg,
.dm-section-pill svg,
.pm-section-pill svg,
.hra-section-pill svg,
.rc-section-pill svg,
.okr-section-pill svg,
.comp-section-pill svg,
.feat-section-pill svg,
.why-hero-badge svg,
.pr-hero-pill svg,
.price-pill-badge svg,
.te-hero-pill svg,
.wg-hero-pill-badge svg,
.onb-section-tag svg {
    color: #047857 !important;
    stroke: #047857 !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Ensure any internal dots render as the identical 4-pointed sparkle star */
.feat-badge-dot,
.pm-pill-dot,
.rc-pill-dot,
.okr-pill-dot,
.comp-pill-dot,
.hra-pill-dot,
.pr-hero-pill-dot,
.why-badge-pulse-dot,
.wg-pulse-dot,
.te-pill-dot,
.price-pill-badge .pulse-dot {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    border-radius: 0 !important;
    background-color: #047857 !important;
    box-shadow: none !important;
    animation: none !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z'/%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
@media (max-width: 768px) {
    /* Fitted dashboard previews are scaled immediately, never animated from
       their unscaled desktop size during page load. */
    [data-dx-fitted] {
        transition: none !important;
    }

    /* These two pages place a preview as the last child of a block container.
       Contain its negative bottom margin so it returns the scaled-away space. */
    .te-container:has(> .te-mockup-frame[data-dx-fit]),
    .wg-stage:has(> [data-dx-fit]) {
        display: flow-root;
    }
}

/* Keep the official wordmark at the scale of each CTA dashboard mockup. */
.onb-mockup-brand-logo,
.em-dash-brand,
.att-dash-brand {
    display: flex;
    align-items: center;
}

.onb-mockup-brand-logo { min-height: 20px; }
.em-dash-brand { min-height: 21px; }
.att-dash-brand { min-height: 20px; }

.onb-mockup-brand-logo .dx-logo--wordmark,
.em-dash-brand .dx-logo--wordmark,
.att-dash-brand .dx-logo--wordmark {
    display: block;
    width: auto;
    max-width: 100%;
}

.onb-mockup-brand-logo .dx-logo--wordmark { height: 16px; }
.em-dash-brand .dx-logo--wordmark { height: 17px; }
.att-dash-brand .dx-logo--wordmark { height: 13px; }

/* Decorative controls retain their button artwork without button semantics. */
.cta-mockup-control {
    cursor: default !important;
    line-height: normal;
    /* Button artwork in a mockup does nothing, so it takes no hover either. */
    pointer-events: none;
}

.cta-mockup-control:not(.ts-cta-submit-btn) {
    font-family: Arial, sans-serif;
    text-align: center;
}

/* Decorative store display badges: visual only, no interaction or animation */
.mobile-store-btn,
.mf-store-btn {
    cursor: default !important;
    pointer-events: none !important;
    user-select: none !important;
    transform: none !important;
    transition: none !important;
}

.mobile-store-btn:hover,
.mf-store-btn:hover {
    background: #000000 !important;
    transform: none !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important;
    color: #ffffff !important;
}

/* Keep CTA copy and previews in separate grid tracks as headings wrap. */
section[class*="-cta-showcase-section"] [class*="-cta-showcase-card"] > * {
    min-width: 0;
}

section[class*="-cta-showcase-section"] [class*="-cta-showcase-title"] {
    text-wrap: balance;
}

section[class*="-cta-showcase-section"] [class*="-cta-actions-row"] {
    flex-wrap: wrap;
}

/* The handwritten CTA notes overlap preview labels and floating status cards. */
section[class*="-cta-showcase-section"] [class*="-doodle"] {
    display: none !important;
}

@media (max-width: 1120px) {
    section[class*="-cta-showcase-section"] [class*="-cta-showcase-card"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    section[class*="-cta-showcase-section"] [class*="-cta-showcase-left"] {
        max-width: 100%;
    }

    section[class*="-cta-showcase-section"] [class*="-cta-showcase-right"] {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }
}

/* Testimonial sliders (features/features_slider.js) do not loop; the arrow
   with no slide to go to is disabled and reads as unavailable. */
.feat-slider-btn:disabled,
.onb-slider-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
    .feat-slider-btn:disabled:hover,
    .onb-slider-btn:disabled:hover {
        background: #f8fafc;
        color: #334155;
        border-color: rgba(15, 23, 42, 0.1);
    }
}