/* Leadnox.si additions.
   Loaded after css/style.css (Marko base theme) and css/leadnox.css (the
   Leadnox brand layer, copied unchanged from leadnox.io). Components here are
   the ones the group site needs and leadnox.io does not ship: breadcrumbs,
   phased process steps, comparison tables, flow diagrams, founder cards,
   group article cards, the newsletter strip and the form status line.
   Every colour is a design-system token, so day and night mode both work
   without extra rules except where a fixed dark surface is involved.
   Easing vocabulary (design system ch.12): brand ease-out
   cubic-bezier(0.22, 0.68, 0.24, 1), spring cubic-bezier(0.4, 1.25, 0.35, 1). */

/* ---------------- 01. Home hero video plate ----------------
   The plate plays the Leadnox.si motion loop (search, compare, reach out,
   leads come in) through leadnox.js initHeroVideo(). The loop is already dark
   and keeps its graphics in the column right of the headline, so on wide
   screens it plays at full strength; where the copy runs across that column
   (below 1200px) it is turned down so the text always wins. */
.lx-hero-home .lx-hero-video { background-color: #050507; --lx-video-op: 1; }
@media (max-width: 1199px) {
    .lx-hero-home .lx-hero-video { --lx-video-op: 0.4; }
}

/* ---------------- 02. Breadcrumbs (inner hero) ---------------- */
.lx-crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.35rem;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.lx-crumbs li { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-color); }
.lx-crumbs li + li::before { content: "/"; color: var(--lx-purple); font-weight: 400; }
.lx-crumbs a { color: var(--text-color); text-decoration: none; transition: color 0.25s ease; }
.lx-crumbs a:hover { color: var(--lx-purple); }
.lx-crumbs [aria-current="page"] { color: var(--primary); }

/* ---------------- 03. Section heads, measure, CTA rows ---------------- */
.lx-head-center { align-items: center; }
.lx-head-center .title-heading { max-width: 58rem; }
.lx-lead { max-width: 62ch; }
.lx-head-center .lx-lead { margin-left: auto; margin-right: auto; }
.lx-prose-wide { max-width: 64rem; }
.lx-prose-wide.text-center { margin-left: auto; margin-right: auto; align-items: center; }
.lx-prose-wide.text-center .check-list { columns: auto; display: inline-block; text-align: left; }
.lx-prose-wide .check-list { columns: 2 22rem; column-gap: 2.5rem; }
.lx-prose-wide .check-list li { break-inside: avoid; }
.lx-prose .check-list li { font-weight: 600; color: var(--text-color); }
.lx-prose .check-list li strong { color: var(--primary); font-weight: 700; }
.lx-cta-row { margin-top: 0.4rem; }
.lx-after { max-width: 62rem; margin-left: auto; margin-right: auto; }
.lx-after p:last-child { margin-bottom: 0; }
.lx-card-grid .lx-h3-card .check-list { margin: 0.2rem 0 0; }
.lx-card-grid .lx-h3-card .check-list li { font-size: 0.92rem; font-weight: 600; line-height: 1.6; color: var(--text-color); }
.lx-card-grid .lx-h3-card .check-list li strong { color: var(--primary); }
.lx-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.4rem;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--lx-purple);
    text-decoration: none;
}
.lx-card-link i { transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.24, 1); }
.lx-card-link:hover i { transform: translateX(4px); }
.lx-bento-title-link { color: inherit; text-decoration: none; }
.lx-bento-title-link:hover { color: var(--lx-purple); }

/* ---------------- 04. Phased process steps ---------------- */
.lx-steps {
    --n: 4;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: 1.4rem;
}
.lx-steps-3 { --n: 3; }
.lx-steps-2 { --n: 2; }
.lx-steps-1 { --n: 1; }
@media (max-width: 1199px) { .lx-steps-4 { --n: 2; } }
@media (max-width: 767px) { .lx-steps { --n: 1; } }
.lx-step {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.9rem 1.6rem 1.7rem;
    border: 1px solid var(--lx-border);
    border-radius: 20px;
    background: var(--lx-gradient) top left / 100% 3px no-repeat, var(--lx-card-bg);
    transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.24, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.lx-step:hover { transform: translateY(-6px); border-color: var(--lx-border-strong); box-shadow: var(--lx-shadow); }
.lx-step-num {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    background: var(--lx-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lx-step h3 { font-size: 1.12rem; line-height: 1.35; color: var(--primary); margin: 0; }
.lx-step p { font-size: 0.95rem; margin: 0; }
.lx-step .check-list { margin: 0; }
.lx-step .check-list li { font-size: 0.9rem; font-weight: 600; line-height: 1.6; color: var(--text-color); }

/* ---------------- 05. Comparison tables ---------------- */
.lx-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--lx-border);
    border-radius: 22px;
    background: var(--lx-card-bg);
    box-shadow: var(--lx-shadow);
    -webkit-overflow-scrolling: touch;
}
.lx-table-wrap:focus-visible { outline: 3px solid var(--lx-purple); outline-offset: 3px; }
.lx-table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.95rem; }
.lx-table th, .lx-table td {
    padding: 1.1rem 1.25rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--lx-hairline);
    line-height: 1.6;
}
.lx-table thead th {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--lx-surface);
}
.lx-table tbody th { color: var(--primary); font-weight: 700; min-width: 10rem; }
.lx-table tbody tr:last-child th, .lx-table tbody tr:last-child td { border-bottom: 0; }
.lx-table td { color: var(--text-color); }
.lx-table .is-hi { background: var(--lx-glow-tint); color: var(--primary); }
.lx-table thead .is-hi { background: var(--lx-gradient); color: #FFFFFF; }
.lx-table tbody td.is-hi { font-weight: 600; }
.lx-cell-list { margin: 0; padding-left: 1.1rem; list-style: disc; }
.lx-cell-list li { margin-bottom: 0.3rem; }
.lx-cell-list li::marker { color: var(--lx-purple); }
@media (max-width: 767px) {
    .lx-table { min-width: 40rem; font-size: 0.9rem; }
    .lx-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--lx-surface-solid); }
}

/* ---------------- 06. Flow and architecture diagrams ---------------- */
.lx-diagram {
    margin: 0 auto;
    width: 100%;
    max-width: 56rem;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    border: 1px solid var(--lx-border);
    border-radius: 26px;
    background: var(--lx-card-bg);
    box-shadow: var(--lx-shadow);
}
.lx-dg-title {
    margin-bottom: 1.4rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lx-purple);
}
.lx-dg-flow { display: flex; flex-direction: column; align-items: center; }
.lx-dg-stage {
    width: 100%;
    padding: 1.15rem 1.4rem;
    border: 1px solid var(--lx-border-strong);
    border-radius: 16px;
    background: var(--lx-surface);
    text-align: center;
}
.lx-dg-stage-title { font-weight: 800; color: var(--primary); letter-spacing: 0.02em; }
.lx-dg-sub { margin: 0.35rem 0 0; font-size: 0.92rem; }
.lx-dg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
.lx-dg-chip {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--lx-border);
    border-radius: 100px;
    background: var(--lx-glow-tint);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--primary);
}
.lx-dg-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55rem 0;
    color: var(--lx-purple);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}
.lx-dg-arrow i { font-size: 1rem; }
.lx-dg-end { margin: 0.9rem 0 0; text-align: center; font-weight: 700; color: var(--lx-purple); }
.lx-dg-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.9rem; }
.lx-dg-cell {
    grid-column: span calc(var(--span, 1) * 2);
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--lx-border);
    border-radius: 16px;
    background: var(--lx-surface);
}
.lx-dg-cell-title { font-weight: 800; color: var(--primary); }
.lx-dg-items { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; list-style: disc; text-align: left; }
.lx-dg-items li::marker { color: var(--lx-purple); }
@media (max-width: 767px) {
    .lx-dg-grid { grid-template-columns: 1fr; }
    .lx-dg-cell { grid-column: auto; }
}

/* ---------------- 07. Callout panel ---------------- */
.lx-callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 60rem;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.2rem);
    text-align: center;
    border: 1px solid var(--lx-border-strong);
    border-radius: 28px;
    background: var(--lx-card-bg);
    box-shadow: var(--lx-shadow);
}
.lx-callout-text { font-size: 1.12rem; line-height: 1.75; max-width: 62ch; margin: 0; }

/* ---------------- 08. Marquee band ---------------- */
.lx-marquee-band { padding: 0 var(--lx-gutter); position: relative; z-index: 2; }

/* ---------------- 09. Founders ---------------- */
.lx-founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; }
@media (max-width: 860px) { .lx-founders { grid-template-columns: 1fr; } }
.lx-founder {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    border: 1px solid var(--lx-border);
    border-radius: 24px;
    background: var(--lx-card-bg);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.24, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.lx-founder:hover { transform: translateY(-6px); border-color: var(--lx-border-strong); box-shadow: var(--lx-shadow); }
@media (max-width: 575px) { .lx-founder { grid-template-columns: 1fr; } }
.lx-founder-photo { min-height: 100%; background: #0B0912; }
.lx-founder-photo img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; display: block; }
.lx-founder-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.8rem 1.6rem; }
.lx-founder-body h3 { font-size: 1.35rem; margin: 0; color: var(--primary); }
.lx-founder-role {
    margin: 0 0 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lx-purple);
}
.lx-founder-body p:not(.lx-founder-role) { font-size: 0.95rem; margin: 0; }
.lx-founder-link {
    margin-top: auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--lx-border);
    color: var(--primary);
    transition: background 0.3s ease, color 0.3s ease;
}
.lx-founder-link:hover { background: var(--lx-gradient); color: #FFFFFF; }

/* ---------------- 10. Group article cards (blog) ---------------- */
.lx-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
@media (max-width: 1099px) { .lx-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .lx-post-grid { grid-template-columns: 1fr; } }
.lx-post-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lx-border);
    border-radius: 22px;
    background: var(--lx-card-bg);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.24, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.lx-post-card:hover { transform: translateY(-6px); border-color: var(--lx-border-strong); box-shadow: var(--lx-shadow); }
.lx-post-thumb {
    height: 9.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 80% 15%, rgba(200, 42, 239, 0.55), transparent 55%),
        radial-gradient(circle at 15% 90%, rgba(79, 70, 229, 0.55), transparent 55%),
        #14101E;
    color: rgba(255, 255, 255, 0.9);
    font-size: 2.2rem;
}
.lx-post-card:nth-child(3n+2) .lx-post-thumb {
    background:
        radial-gradient(circle at 20% 20%, rgba(124, 58, 237, 0.6), transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(200, 42, 239, 0.45), transparent 55%),
        #14101E;
}
.lx-post-card:nth-child(3n) .lx-post-thumb {
    background:
        radial-gradient(circle at 50% 0%, rgba(79, 70, 229, 0.6), transparent 60%),
        radial-gradient(circle at 90% 100%, rgba(139, 92, 246, 0.5), transparent 55%),
        #14101E;
}
.lx-post-body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.5rem 1.5rem 1.4rem; flex: 1; }
.lx-post-body .lx-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
.lx-post-read { color: var(--text-color); }
.lx-post-body h3 { font-size: 1.1rem; line-height: 1.4; margin: 0; }
.lx-post-body h3 a { color: var(--primary); text-decoration: none; transition: color 0.25s ease; }
.lx-post-body h3 a:hover { color: var(--lx-purple); }
.lx-post-body p { font-size: 0.93rem; margin: 0; }
.lx-post-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--lx-hairline);
    font-size: 0.82rem;
}
.lx-post-foot .lx-card-link { margin-top: 0; padding-top: 0; font-size: 0.85rem; }

/* ---------------- 11. Newsletter strip ---------------- */
.lx-newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: clamp(1.8rem, 4vw, 3rem);
    border: 1px solid var(--lx-border-strong);
    border-radius: 28px;
    background: var(--lx-card-bg);
    box-shadow: var(--lx-shadow);
}
@media (max-width: 860px) { .lx-newsletter { grid-template-columns: 1fr; } }
.lx-newsletter-copy { display: flex; flex-direction: column; gap: 0.8rem; }
.lx-newsletter-copy p { margin: 0; }
.lx-newsletter-form { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.lx-newsletter-form input[type="email"] {
    flex: 1 1 15rem;
    min-height: 56px;
    padding: 0 1.1rem;
    border: 1px solid var(--lx-border-strong);
    border-radius: 14px;
    background: var(--lx-surface);
    color: var(--primary);
    font-size: 16px;
}
.lx-newsletter-form input[type="email"]:focus { outline: 3px solid var(--lx-purple); outline-offset: 2px; }
.lx-newsletter-note { flex-basis: 100%; margin: 0; font-size: 0.82rem; }

/* ---------------- 12. Forms: honeypot and status line ---------------- */
.lx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.lx-form-status { flex-basis: 100%; margin: 0; font-size: 0.92rem; font-weight: 600; min-height: 0; }
.lx-form-status.is-ok { color: #4ade80; }
.lx-form-status.is-info { color: var(--primary); }
.lx-form-status.is-error { color: var(--error-color, #e63946); }
.lx-form-status a { color: var(--lx-purple); font-weight: 700; }

/* ---------------- 13. Locations mega menu: city line under each state ---------------- */
.lx-mega .lx-mega-item { display: flex; flex-direction: column; gap: 0.1rem; white-space: normal; }
.lx-mega .lx-mega-item small { font-size: 0.74rem; color: #A5A5B0; }

/* ---------------- 14. Legal page container rhythm ---------------- */
.lx-legal .container { max-width: 60rem; }

/* ---------------- 15. Curved menu SVG on wide screens ----------------
   leadnox.js creates the curve only when the page loads below 992px, and its
   fixed positioning lives inside that media query. If the window is then
   widened, the SVG fell back into normal flow at the end of <body> and added
   a full page of empty space. Hide it whenever the desktop nav is showing. */
@media (min-width: 992px) { .lx-curve { display: none; } }

/* ---------------- 16. Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
    .lx-step, .lx-post-card, .lx-founder { transition: none; }
    .lx-step:hover, .lx-post-card:hover, .lx-founder:hover { transform: none; }
}

/* ---------------- 17. Touch targets ---------------- */
@media (hover: none) and (pointer: coarse) {
    .lx-crumbs a, .lx-card-link, .lx-post-body h3 a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ---------------- 18. Cards paired with a photo, and wide cards ----------------
   r_cards() pairs a one or two card section with the page's next photo, and
   renders a single-column grid as two-column panels (copy left, list right). */
.lx-split-cards { align-items: stretch; }
.lx-split-cards .lx-split-img { align-self: start; }
.lx-card-stack { display: flex; flex-direction: column; gap: 1.4rem; }
.lx-card-stack .lx-h3-card { height: auto; }
.lx-card-wide {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: 1.2rem 3rem;
    align-items: start;
}
.lx-card-wide-head, .lx-card-wide-body { display: flex; flex-direction: column; gap: 0.8rem; }
.lx-card-wide-body .check-list { margin: 0; }
@media (max-width: 991px) { .lx-card-wide { grid-template-columns: 1fr; } }

/* ---------------- 19. Coverflow copy: five lines, not four ----------------
   Below ~900px the cards hit their minimum size and the shortest verbatim
   service sentence needed a fifth line; four cut it off with an ellipsis. */
.lx-cf .lx-cf-main p { -webkit-line-clamp: 5; }

/* ---------------- 20. CTA band: heading above its buttons ----------------
   leadnox.css sets the band to a row from 992px with the buttons at flex:none.
   Leadnox.si bands usually carry two CTAs or a long label, which squeezed the
   heading into a narrow five-line column. Stack them at every width. */
@media (min-width: 992px) {
    .guide-content { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.8rem; }
    .guide-content > .d-flex.flex-column { max-width: 52rem; }
    .guide-content > .lx-cta-row { flex: 0 1 auto; flex-wrap: wrap; }
}

/* ---------------- 21. Card grids with very uneven card lengths ----------------
   r_cards() adds this when one card holds far more copy than its neighbours,
   so the short cards keep their natural height instead of stretching into
   large empty panels. */
.lx-card-grid-ragged { align-items: flex-start; }
.lx-card-grid-ragged .lx-h3-card { height: auto; }

/* ---------------- 22. Heading scale in half-width columns ----------------
   Leadnox.si section headings are longer than leadnox.io's (often 8 to 12
   words). At the full 64px H2 size, a split column or the FAQ intro column
   ran them to five or six lines. Scale them to the column, from 992px up. */
@media (min-width: 992px) {
    .lx-split .title-heading { font-size: clamp(2.1rem, 3.3vw, 3.1rem); line-height: 1.15; }
    .lx-faq-intro .title-heading { font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1.15; }
}

/* The band's button row also carries Bootstrap's .flex-column class, so the
   heading width caps in leadnox.css and section 20 caught it too; give the
   buttons the full band width so two CTAs sit side by side. */
.guide-content > .lx-cta-row { max-width: none; }
@media (min-width: 992px) {
    .lx-newsletter .title-heading { font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1.15; }
}

/* ---------------- 23. Services mega menu (services + industries) ---------------- */
.lx-mega-services { min-width: 560px; }
@media (max-width: 1199px) { .lx-mega-services { min-width: 480px; } }

/* ---------------- 24. Narrow-laptop fallback, 992px to 1599px ----------------
   From 1600px the header is exactly leadnox.io's (centred island, same type
   and spacing). Below that the centred island met the logo pill and the
   controls, so it joins the flex row with a 16px minimum gap and tighter
   type; under 1200px the header CTA steps out, as it does under 992px. */
@media (min-width: 992px) and (max-width: 1599px) {
    header.lx-notch .navbar-container { column-gap: 16px; }
    header.lx-notch .navbar-collapse {
        position: relative; left: auto; transform: none;
        flex: 0 1 auto; margin: 0 auto; padding: 0 12px;
    }
    header.lx-notch .navbar-nav .nav-link { font-size: 13.5px; padding: 8px 8px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    header.lx-notch .navbar-action-container .btn { display: none !important; }
    header.lx-notch .navbar-nav .nav-link { font-size: 13px; padding: 8px 7px; }
}


/* ---------------- 25. Accessibility and QA fixes ----------------
   From the adversarial review (WCAG 2.2 AA and design-system checks). */

/* Status line: always in the accessibility tree so a live update is read;
   collapsed to no height while empty. Day-mode colours that pass 4.5:1. */
.lx-form-status:empty { margin: 0; min-height: 0; }
body.lightmode .lx-form-status.is-ok { color: #15803d; }
body.lightmode .lx-form-status.is-error { color: #b4232f; }
.lx-form-required { margin: 0; font-size: 0.85rem; color: var(--text-color); }

/* Small purple text on day cards: deepen it to pass 4.5:1 on the lavender end. */
body.lightmode .lx-card-link,
body.lightmode .lx-founder-role,
body.lightmode .lx-dg-title,
body.lightmode .lx-dg-arrow,
body.lightmode .lx-dg-end,
body.lightmode .lx-form-status a,
body.lightmode .lx-post-body h3 a:hover { color: #7A1FA3; }

/* Highlighted comparison column header: darker gradient end stops so the
   white label passes 4.5:1 across the whole cell. */
.lx-table thead .is-hi { background: linear-gradient(100deg, #3F37C9 0%, #5B21B6 55%, #86198F 100%); }

/* Phones: pin the header cell of the first column too, so the row labels
   keep their column title while the table scrolls sideways. */
@media (max-width: 767px) {
    .lx-table thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--lx-surface-solid); color: var(--primary); }
}

/* Links that wrap headings or running text inherit its size and leading
   (the Marko base fixes bare links at 16px / 14px / 12px). */
main p a, main li a, main dd a, main td a, main h3 a, main h4 a,
.lx-bento-title-link { font-size: inherit; line-height: inherit; }

/* Closed mobile menu: out of the tab order and the accessibility tree, and
   never present on desktop where it cannot be opened. */
.sidebar:not(.active) { visibility: hidden; transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.8s; }
.sidebar.active { visibility: visible; transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s; }
@media (min-width: 992px) { aside .sidebar, aside .sidebar-overlay { display: none; } }

/* Collapsed FAQ answers: not focusable or read while closed. */
.lx-acc-panel[data-collapsed] .lx-acc-inner { visibility: hidden; }

/* Hover lift on the new cards, which also carry .lx-reveal (its settled
   transform otherwise wins over :hover). */
@media (hover: hover) and (pointer: fine) {
    body.lx-js .lx-step.lx-reveal.is-in:hover,
    body.lx-js .lx-post-card.lx-reveal.is-in:hover,
    body.lx-js .lx-founder.lx-reveal.is-in:hover { transform: translateY(-6px); }
}

/* Blog category pills: give the bare class a fill. */
.lx-post-card .blog-cat-pill {
    display: inline-block; padding: 0.25rem 0.7rem; border-radius: 100px;
    background: var(--lx-glow-tint); color: var(--primary);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}

/* CTA band heading at the band's design size (ch.11: H3 scale). */
.guide-content .title-heading { font-size: clamp(1.9rem, 3.2vw, 2.875rem); line-height: 1.15; }

/* Phones: headline gradient painted solid (clipped text can fail on iOS). */
@media (max-width: 991px) {
    h1 .lx-gradient-text, h1 .lx-word.lx-gradient-text {
        background: none !important; -webkit-text-fill-color: currentColor; color: #A855F7;
    }
    body.lightmode .lx-inner-hero h1 .lx-gradient-text, body.lightmode .lx-inner-hero h1 .lx-word.lx-gradient-text { color: #7A1FA3; }
}

@media (prefers-reduced-motion: reduce) {
    .lx-card-link i { transition: none; }
    .lx-card-link:hover i { transform: none; }
}

/* ---------------- 27. Call-to-action buttons: steady and centred ----------------
   One component for every CTA (owner request: no shaking, perfect alignment).
   - Still on hover: the magnetic pull is gone from the markup, and the hover
     no longer swaps the circle across the button (leadnox.css section 43) or
     scales it on press. Hover only lifts the surface and glow (leadnox.css 34)
     and nudges the arrow 3px inside its circle.
   - Symmetric: the circle sits 6px from the top, right and bottom edges; the
     label has the same space on its left as between it and the circle, and
     is centred vertically and, on full-width buttons, horizontally. */
.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 6px 6px 6px 25px;   /* 25 + the 1px border = the 26px gap to the circle */
    min-height: 64px;
    transform: none !important;
}
.btn-accent .btn-title {
    flex: 1 1 auto;
    width: auto;
    padding: 0 !important;
    text-align: center;
    line-height: 1.25;
    white-space: nowrap;
    transition: none !important;
}
.btn-accent .icon-circle {
    position: static !important;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    font-size: 22px;
    transform: none !important;
    transition: background-color .25s ease;
}
.btn-accent .icon-circle i { transition: transform .25s ease; }
@media (hover: hover) and (pointer: fine) {
    .btn-accent:hover .icon-circle i { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-accent .icon-circle i { transition: none; }
    .btn-accent:hover .icon-circle i { transform: none; }
}
/* the compact header CTA keeps its own size, at its own height (the nav no longer stretches it) */
.navbar-action-container .btn-accent { min-height: 0; height: auto; align-self: center; gap: 18px; padding: 6px 6px 6px 17px; }
/* the form submit spans its column, so its label centres in the free space */
.lx-form-submit { width: 100%; }

/* rows of CTAs follow their section: centred where the copy is centred */
.text-center .lx-cta-row,
.lx-carousel-cta .lx-cta-row { justify-content: center; }
.lx-cta-row { align-items: center; }

/* phones: every CTA spans the column, label centred, so stacked pairs line up */
@media (max-width: 767px) {
    .lx-cta-row,
    .lx-hero .d-flex.flex-column.flex-md-row,
    .lx-hero .d-flex.flex-md-row.flex-column { align-items: stretch !important; }
    .lx-cta-row .btn-accent,
    .lx-hero .btn-accent { width: 100%; }
    .btn-accent { gap: 16px; padding: 6px 6px 6px 15px; min-height: 58px; }
    .btn-accent .btn-title { white-space: normal; font-size: 15px; }
    .btn-accent .icon-circle { width: 46px; height: 46px; font-size: 19px; }
}