/* ==========================================================================
   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;
}

/* 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, 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);
    font-weight: 700;
}

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

/* --- Styled dropdowns (partials/select.js) ----------------------------------
   The trigger keeps the field's own classes, so it looks exactly like the
   other inputs; only the list below it is drawn here. White, rounded, with
   the site's green for the hovered, focused and chosen option. */

.dx-select {
    position: relative;
}

.dx-select-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.dx-select-trigger {
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    line-height: 1.3;
}

.dx-select-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dx-select-trigger.is-placeholder .dx-select-value {
    color: #94a3b8;
}

.dx-select.is-open .dx-select-trigger {
    background-color: #ffffff;
    border-color: var(--dx-emerald);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.dx-select-trigger[aria-invalid="true"] {
    border-color: #ef4444;
}

.dx-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    /* As wide as the field; a narrow field (the country code) lets its list
       grow to fit the options instead of wrapping each one. */
    box-sizing: border-box;
    min-width: 100%;
    width: max-content;
    max-width: max(100%, 13.75rem);
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(15, 57, 43, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
    transform-origin: top center;
    animation: dx-select-in 140ms var(--dx-ease-out);
}

.dx-select--up .dx-select-menu {
    top: auto;
    bottom: calc(100% + 6px);
    transform-origin: bottom center;
}

.dx-select-option {
    position: relative;
    padding: 9px 34px 9px 12px;
    border-radius: 8px;
    font-size: 0.86rem;
    line-height: 1.35;
    color: #0f172a;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    user-select: none;
}

.dx-select-option.is-active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--dx-ink);
}

.dx-select-option[aria-selected="true"] {
    color: var(--dx-emerald-deep);
    font-weight: 600;
}

/* A check marks the chosen option, drawn in CSS so the markup stays text. */
.dx-select-option[aria-selected="true"]::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 5px;
    height: 10px;
    margin-top: -6px;
    border: solid var(--dx-emerald-deep);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@keyframes dx-select-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
}

.dx-select--up .dx-select-menu {
    animation-name: dx-select-in-up;
}

@keyframes dx-select-in-up {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dx-select-menu,
    .dx-select--up .dx-select-menu {
        animation: dx-select-fade 120ms ease;
    }

    @keyframes dx-select-fade {
        from {
            opacity: 0;
        }
    }
}

/* --- FAQ toggles ----------------------------------------------------------
   Every FAQ question is a full-width button, so the press scale above shrank
   the whole row and made its round icon jump on release. The row now stays
   still, and the icon alone answers the click: its colours cross-fade and the
   glyph turns half a circle as "+" becomes "\2212". The turn is a rotation
   about the icon's own centre, so the glyph never leaves its circle. */

:where(.feat-faq-q, .faq-line-question, .onb-faq-question, .off-faq-q, .faq-question-btn, .matrix-accordion-toggle):active {
    scale: 1;
}

.feat-faq-icon,
.faq-toggle-icon,
.onb-faq-icon,
.off-faq-icon,
.faq-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform-origin: 50% 50%;
    scale: none;
    animation: none;
    transition:
        background-color 200ms var(--dx-ease-out),
        color 200ms var(--dx-ease-out),
        border-color 200ms var(--dx-ease-out),
        transform 280ms var(--dx-ease-out);
}

.feat-faq-item .feat-faq-icon,
.faq-line-item .faq-toggle-icon,
.onb-faq-item .onb-faq-icon,
.off-faq-item .off-faq-icon,
.faq-item-card .faq-indicator {
    transform: rotate(0deg);
}

.feat-faq-item.active .feat-faq-icon,
.faq-line-item.active .faq-toggle-icon,
.onb-faq-item.active .onb-faq-icon,
.off-faq-item.active .off-faq-icon,
.faq-item-card.active .faq-indicator {
    transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
    .feat-faq-item:not(.active) .feat-faq-q:hover .feat-faq-icon,
    .faq-line-item:not(.active) .faq-line-question:hover .faq-toggle-icon,
    .onb-faq-item:not(.active) .onb-faq-question:hover .onb-faq-icon {
        border-color: rgba(16, 185, 129, 0.5);
        color: var(--dx-emerald-deep);
    }

    .faq-item-card:not(.active) .faq-question-btn:hover .faq-indicator {
        color: var(--dx-ink);
    }
}

@media (prefers-reduced-motion: reduce) {
    .feat-faq-icon,
    .faq-toggle-icon,
    .onb-faq-icon,
    .off-faq-icon,
    .faq-indicator {
        transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
    }

    .feat-faq-item.active .feat-faq-icon,
    .faq-line-item.active .faq-toggle-icon,
    .onb-faq-item.active .onb-faq-icon,
    .off-faq-item.active .off-faq-icon,
    .faq-item-card.active .faq-indicator {
        transform: none;
    }
}

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

.feat-nav-wrapper {
    top: var(--dx-safe-top) !important;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* 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: 900px) {
    .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: 901px) {
    .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;
}

/* Very narrow phones (under 350px): the trial button moves into the menu sheet so
   the brand, and the menu button, always fit on one line. */
@media (max-width: 349px) {
    .feat-nav-actions {
        display: none !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;
}

/* Universal FAQ Badge Pill & Symmetrical Question Mark Icon */
.feat-faq-top-center,
.onb-faq-badge-center,
.faq-pill-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    text-align: center !important;
}

.feat-faq-top-badge,
.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,
.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;
}

.feat-faq-top-badge svg,
.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;
}

/* ==========================================================================
   UNIVERSAL BUTTER-SMOOTH FAQ ACCORDION (Single, Continuous Fluid Transition)
   Eliminates jerky two-step collapse, delayed fades, and hanging margins.
   Container has zero padding/border so it collapses completely to 0 in one pass.
   ========================================================================== */

.faq-line-answer,
.feat-faq-a,
.onb-faq-a,
.off-faq-a,
.faq-answer-panel {
    display: grid !important;
    grid-template-rows: 0fr !important;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
}

.faq-line-item.active .faq-line-answer,
.feat-faq-item.active .feat-faq-a,
.onb-faq-item.active .onb-faq-a,
.off-faq-item.active .off-faq-a,
.faq-item-card.active .faq-answer-panel {
    grid-template-rows: 1fr !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Direct child of the grid track MUST have 0 padding, 0 margin, 0 border so it collapses completely to 0px */
.faq-line-answer > *,
.feat-faq-a > *,
.onb-faq-a > *,
.off-faq-a > *,
.faq-answer-panel > *,
.feat-faq-a-inner,
.onb-faq-a-inner,
.off-faq-a-inner,
.faq-line-inner,
.faq-answer-inner {
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Inner content typography & divider spacing (placed on children inside the wrapper) */
.faq-line-content,
.feat-faq-a-inner > *,
.onb-faq-a-inner > *,
.off-faq-a-inner > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 2px !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.faq-line-content,
.feat-faq-a-inner > :first-child,
.onb-faq-a-inner > :first-child,
.off-faq-a-inner > :first-child,
.faq-answer-inner > :first-child {
    border-top: 1px solid rgba(15, 57, 43, 0.08) !important;
}

/* Paragraph spacing inside answers */
.faq-line-content p,
.feat-faq-a-inner p,
.onb-faq-a-inner p,
.off-faq-a-inner p,
.faq-answer-inner p {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.65 !important;
}

.faq-line-content p:last-child,
.feat-faq-a-inner p:last-child,
.onb-faq-a-inner p:last-child,
.off-faq-a-inner p:last-child,
.faq-answer-inner p:last-child {
    margin-bottom: 0 !important;
}

/* Pricing panel specific inset padding */
.faq-answer-inner > * {
    padding-left: 26px !important;
    padding-right: 26px !important;
    padding-top: 16px !important;
    padding-bottom: 20px !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}