/* ==========================================================================
   Landing page — SME Knowledge Capture  (/lp/sme-knowledge-capture/)
   Scoped page styles. Reuses global components wherever one exists
   (.ind-hero, .ind-service-card, .faq-item, .cta-button, .section/.container).
   Only patterns the site has no real component for live here. Everything is
   scoped under .page-lp-knowledge-capture so it can't leak.
   ========================================================================== */

/* Construction redesign design system — sol-c-* hero, tokens, keyframes (Option A) */
@import url("/css/sol-construction.css");

/* Hero — autoplaying SME clip, placed directly on the banner at its native 720x509 */
.page-lp-knowledge-capture .lp-hero-img {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    aspect-ratio: 720 / 509;
}

/* Keep the visual content-height (don't stretch) so the statements strip
   overlaps the clip's bottom-left corner; cap to the clip's native width. */
.page-lp-knowledge-capture .sol-c-hero__visual {
    align-self: center;
    max-width: 720px;
}
.page-lp-knowledge-capture .sol-c-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
/* Stacked layout (992 breakpoint and below): title full width, clip centered,
   statements block re-anchored to the clip's bottom edge. */
@media (max-width: 991px) {
    .page-lp-knowledge-capture .sol-c-hero__inner { grid-template-columns: 1fr; }
    /* Title area spans full width; copy stays left, button keeps its size */
    .page-lp-knowledge-capture .sol-c-hero__text { width: 100%; text-align: left; }
    /* h1 matches the 768 treatment: ~44px and full column width (drop base 14ch cap + clamp) */
    .page-lp-knowledge-capture .sol-c-hero h1 { font-size: clamp(2rem, 8vw, 2.75rem); max-width: none; }
    .page-lp-knowledge-capture .sol-c-hero__ctas { justify-content: flex-start; }
    /* Animation centered below the copy, full width up to 720px */
    .page-lp-knowledge-capture .sol-c-hero__visual { max-width: 720px; margin: 0 auto; position: relative; }
    /* Statements block: absolute, centered on the clip's bottom edge, 70% wide */
    .page-lp-knowledge-capture .sol-c-hero__platform {
        position: absolute;
        left: 52.75%;
        top: 100%;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: 70%;
        max-width: none;
        margin: 0;
        display: block;
    }
    /* Push the next section down so the hanging statements block clears the stats */
    .page-lp-knowledge-capture .sol-c-hero { padding-bottom: 200px; }
}

/* Hero CTA — match the nav button's purple (construction ships it teal) */
.page-lp-knowledge-capture .sol-c-hero__cta-primary {
    background: linear-gradient(45deg, var(--color-accent-primary-light), var(--color-accent-primary));
}
.page-lp-knowledge-capture .sol-c-hero__cta-primary::after {
    background: var(--color-accent-primary-dark);
}
/* h1 accent: flip the teal gradient so the dark end lands on "experts do?" */
.page-lp-knowledge-capture .sol-c-hero h1 .sol-c-hero__accent {
    background: linear-gradient(135deg, var(--sol-c-teal-light) 0%, var(--sol-c-teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Hero — CTA microcopy directly under the button ------------------------- */
.page-lp-knowledge-capture .lp-hero-microcopy {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    max-width: 46ch;
    margin-top: var(--space-md);
}

/* Shared section scaffolding -------------------------------------------- */
.page-lp-knowledge-capture .lp-section {
    padding: var(--space-section-y) var(--space-section-x);
}
.page-lp-knowledge-capture .lp-section > .container {
    max-width: var(--max-width-medium);
    margin: 0 auto;
}
.page-lp-knowledge-capture .lp-bg-alt {
    background: #f1f1f6;
}
/* "Couldn't you just record it yourself?" — image sits at its natural size in
   the bottom-right corner; min 900px tall; #f1f1f6 fills the rest. */
.page-lp-knowledge-capture .lp-record-bg {
    min-height: 900px;
    background-color: #f1f1f6;
    background-image: url("/images/lp/Background-record-yourself_150619578.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto;
}
/* Container stays full width/position; the copy column inside is 70% wide,
   left-anchored at its original spot (loses 30% off the right). */
/* The five copy lines live in their own column on the left 50%, left-aligned
   in the parent, with 64px of space top and bottom. */
.page-lp-knowledge-capture .lp-record-bg .lp-record-col {
    max-width: 50%;
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}
/* All copy in the column fills it (drop the prose reading cap so the body
   lines up with the lead/standout lines) */
.page-lp-knowledge-capture .lp-record-bg .lp-prose {
    max-width: none;
}
/* Lead lines ("You could..." + "Neovation...") — matched grey Host Grotesk */
.page-lp-knowledge-capture .lp-record-lead,
.page-lp-knowledge-capture .lp-record-closing-lead {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: var(--color-text-secondary);
}
.page-lp-knowledge-capture .lp-record-lead { margin: 0 0 var(--space-lg); }
.page-lp-knowledge-capture .lp-record-closing-lead { margin: 0 0 var(--space-sm); }
/* "Knowledge capture done for you." — bold standout in grey */
.page-lp-knowledge-capture .lp-record-closing {
    margin-top: var(--space-2xl);
    font-family: var(--font-heading);
}
.page-lp-knowledge-capture .lp-record-closing-emphasis {
    font-size: 2rem;
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    margin: 0;
}
.page-lp-knowledge-capture .lp-record-closing-emphasis .lp-u {
    text-decoration: underline;
    text-decoration-color: var(--color-accent-tertiary);
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
}
.page-lp-knowledge-capture .lp-section h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-md);
}

/* Prose (Problem / Urgency / Method) ------------------------------------ */
.page-lp-knowledge-capture .lp-prose {
    max-width: 70ch;
}
.page-lp-knowledge-capture .lp-prose p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-md);
}
.page-lp-knowledge-capture .lp-prose p:last-child {
    margin-bottom: 0;
}
.page-lp-knowledge-capture .lp-prose ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.page-lp-knowledge-capture .lp-prose li {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* White CTA band, 1200px, 64px below the three cards: title/sub left, button right */
.page-lp-knowledge-capture .lp-cta-band {
    max-width: 1200px;
    margin: var(--space-3xl) auto 0;
    background: #fff;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
}
.page-lp-knowledge-capture .lp-cta-band__title {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    text-align: left;
    margin: 0 0 var(--space-sm);
}
.page-lp-knowledge-capture .lp-cta-band__sub {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    text-align: left;
    margin: 0;
}
/* Match the nav button exactly (purple gradient, medium weight, 10/20 padding) */
.page-lp-knowledge-capture .lp-cta-band .cta-button {
    flex-shrink: 0;
    background: linear-gradient(45deg, var(--color-accent-primary-light), var(--color-accent-primary));
    font-weight: var(--weight-medium);
    padding: 0.625rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
@media (max-width: 767px) {
    .page-lp-knowledge-capture .lp-cta-band {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-lg);
    }
}

/* Process — three compact numbered steps -------------------------------- */
.page-lp-knowledge-capture .lp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}
.page-lp-knowledge-capture .lp-step {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 2rem;
}
.page-lp-knowledge-capture .lp-step-number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    background: rgba(0, 161, 172, 0.1);
    color: var(--color-accent-tertiary);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}
.page-lp-knowledge-capture .lp-step h3 {
    font-size: var(--text-h5);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}
.page-lp-knowledge-capture .lp-step p {
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* ── Problem (dark, continuous) — stats + title + cycling tabs + prose ──── */
.page-lp-knowledge-capture .lp-problem {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--sol-c-ink);
    color: #fff;
    padding: 0 var(--space-section-x) var(--space-section-y);
}
.page-lp-knowledge-capture .lp-problem__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(120% 90% at 28% 22%, rgba(0, 161, 172, 0.20) 0%, transparent 60%);
    animation: solCShiftDrift 32s ease-in-out infinite alternate;
}

/* Stats — full-bleed band: dividers touch the hero above, full-width border below */
.page-lp-knowledge-capture .lp-problem__stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    margin: 0 calc(-1 * var(--space-section-x)); /* break out to the viewport edges */
    padding: 0 var(--space-section-x);            /* re-inset the content */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.page-lp-knowledge-capture .lp-problem__stats .lp-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3xl) var(--space-xl); /* equal top/bottom: dividers reach hero + border */
}
.page-lp-knowledge-capture .lp-problem__stats .lp-stat + .lp-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.page-lp-knowledge-capture .lp-problem__stats .lp-stat:first-child { padding-left: 0; }
.page-lp-knowledge-capture .lp-problem__stats .lp-stat:last-child { padding-right: 0; }
.page-lp-knowledge-capture .lp-stat-eyebrow {
    color: var(--sol-c-teal-light);
    margin-bottom: var(--space-md);
}
.page-lp-knowledge-capture .lp-stat-number {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: clamp(2.6rem, 4.2vw, 3.35rem);
    line-height: 1;
    background: linear-gradient(135deg, var(--color-accent-tertiary-light) 0%, var(--color-accent-tertiary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Accent stat (Preserving Success) — eyebrow + number in orange */
.page-lp-knowledge-capture .lp-stat--accent .lp-stat-eyebrow { color: var(--color-accent-secondary); }
.page-lp-knowledge-capture .lp-stat--accent .lp-stat-number {
    background: none;
    color: var(--color-accent-secondary);
    -webkit-text-fill-color: var(--color-accent-secondary);
}
.page-lp-knowledge-capture .lp-stat__body { margin-top: var(--space-3xl); }
.page-lp-knowledge-capture .lp-stat-text {
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: var(--space-xs);
}
.page-lp-knowledge-capture .lp-stat-source {
    font-size: var(--text-caption);
    color: rgba(255, 255, 255, 0.5);
}

/* Title block — left-aligned inside the 1440 container */
.page-lp-knowledge-capture .lp-problem__header {
    max-width: 800px;
    margin: 0 0 var(--space-3xl);
}
.page-lp-knowledge-capture .lp-problem__header .sol-c-eyebrow {
    color: var(--sol-c-teal-light);
    justify-content: flex-start;
}
.page-lp-knowledge-capture .lp-problem__header h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin: var(--space-md) 0 0;
}

/* 1440 container holding the title + tab system */
.page-lp-knowledge-capture .lp-problem__main {
    max-width: var(--max-width-medium);
    margin: var(--space-section-y) auto 0;
}
/* Tab system — tabs sit left inside the 1440; media breaks out full-bleed right */
.page-lp-knowledge-capture .lp-problem__tabs {
    position: relative;
    /* Contain the centered full-bleed image so the prose below clears it */
    min-height: calc(50vw * 468 / 690);
    /* Center the tab column vertically so it aligns with the centered image */
    display: flex;
    align-items: center;
}
/* Left tab column: 70% of its former (half-of-row) width; placement unchanged */
.page-lp-knowledge-capture .lp-tabs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: calc((100% - 4rem) * 0.35);
}
/* Each tab is a rounded highlight block (PPA-style). The dark fill is the
   container; an inset 6px orange bar on the LEFT edge marks the active tab.
   Left padding = 20px container inset + 6px bar + 16px gap before the text. */
.page-lp-knowledge-capture .lp-tab {
    position: relative;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-lg);
    padding: 16px 20px 16px 42px;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color var(--transition-base), background-color var(--transition-base);
}
/* Orange bar — left edge only, rounded; revealed on the active tab */
.page-lp-knowledge-capture .lp-tab::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 16px;
    bottom: 16px;
    width: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-secondary);
    opacity: 0;
    transition: opacity var(--transition-base);
}
.page-lp-knowledge-capture .lp-tab:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.25);
}
.page-lp-knowledge-capture .lp-tab.is-active {
    color: #fff;
    background: rgba(0, 0, 0, 0.25);
}
.page-lp-knowledge-capture .lp-tab.is-active::before { opacity: 1; }
.page-lp-knowledge-capture .lp-tab:focus-visible {
    outline: 2px solid var(--color-accent-secondary);
    outline-offset: 2px;
}
/* Media: 50vw wide, right edge flush to the viewport, vertically centered on the
   tab column. Box ratio matches the source images (690x468) so they fill it
   completely — no crop, no letterbox, no frame/border. */
.page-lp-knowledge-capture .lp-tabs__media {
    position: absolute;
    top: 50%;
    right: calc(50% - 50vw);
    transform: translateY(-50%);
    width: 50vw;
    aspect-ratio: 690 / 468;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    overflow: hidden;
}
/* Two stacked layers cross-fade between tabs (no blink) */
.page-lp-knowledge-capture .lp-tabs__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity var(--transition-slow);
}
.page-lp-knowledge-capture .lp-tabs__img.is-shown { opacity: 1; }

/* Prose — 768 (--max-width-narrow), centered; text left-aligned */
/* Three-column narrative (1200), icon above each; 128px below the image */
.page-lp-knowledge-capture .lp-problem__cols {
    max-width: 1200px;
    margin: var(--space-section-y) auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
}
.page-lp-knowledge-capture .lp-problem__col {
    text-align: left;
}
.page-lp-knowledge-capture .lp-problem__col-icon {
    display: block;
    font-size: 1.75rem;
    color: var(--sol-c-teal-light);
    margin-bottom: var(--space-md);
}
.page-lp-knowledge-capture .lp-problem__col p {
    font-size: var(--text-lg);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}
/* Closing — two centered lines, second larger + bold (cf. construction) */
.page-lp-knowledge-capture .lp-problem__closing {
    max-width: var(--max-width-narrow);
    margin: var(--space-3xl) auto 0;
    text-align: center;
    font-family: var(--font-heading);
}
.page-lp-knowledge-capture .lp-problem__closing-lead {
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 var(--space-sm);
}
.page-lp-knowledge-capture .lp-problem__closing-emphasis {
    font-size: 2rem;
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: #fff;
    margin: 0;
}
.page-lp-knowledge-capture .lp-problem__closing-emphasis .lp-u {
    text-decoration: underline;
    text-decoration-color: var(--color-accent-tertiary);
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .page-lp-knowledge-capture .lp-problem__bg { animation: none; }
    .page-lp-knowledge-capture .lp-tabs__img { transition: none; }
}
@media (max-width: 991px) {
    /* Stats: 3 across the top, 2 across the bottom at 50/50 (6-col grid + spans) */
    .page-lp-knowledge-capture .lp-problem__stats { grid-template-columns: repeat(6, 1fr); }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(-n+3) { grid-column: span 2; }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(n+4) { grid-column: span 3; }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat { padding: var(--space-2xl) var(--space-lg); }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat + .lp-stat { border-left: 0; }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:not(:nth-child(3n+1)) { border-left: 1px solid rgba(255, 255, 255, 0.15); }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(n+4) { border-top: 1px solid rgba(255, 255, 255, 0.15); }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(3n+1) { padding-left: 0; }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(3n) { padding-right: 0; }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:last-child { padding-right: 0; }
    /* Record-section copy: full width on the 25% white panel, padded all round (cascades down) */
    .page-lp-knowledge-capture .lp-record-bg .lp-record-col { max-width: 100%; background: rgba(255, 255, 255, 0.25); padding: var(--space-2xl); }
    /* Push the section's bottom-right background image down */
    .page-lp-knowledge-capture .lp-record-bg { padding-bottom: 540px; }
    /* Legacy + problem-closing copy left-aligned from here down (parent-scoped
       to win over the base centered rules that appear later in the file) */
    .page-lp-knowledge-capture .lp-section .lp-legacy { text-align: left; }
    .page-lp-knowledge-capture .lp-problem .lp-problem__closing { text-align: left; }
    /* "What you walk away with": single column; full-width section insets matching How-it-works */
    .page-lp-knowledge-capture .ind-services {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: var(--space-section-x);
        padding-right: var(--space-section-x);
    }
    .page-lp-knowledge-capture .ind-services-grid { grid-template-columns: 1fr; }
    .page-lp-knowledge-capture .lp-problem__tabs { min-height: 0; display: block; }
    .page-lp-knowledge-capture .lp-tabs { width: 100%; }
    .page-lp-knowledge-capture .lp-problem__cols { grid-template-columns: 1fr; gap: var(--space-xl); }
    /* Media stops breaking out — stacks full-width below the tabs */
    .page-lp-knowledge-capture .lp-tabs__media {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        margin-top: var(--space-xl);
        border-radius: var(--radius-xl);
    }
}

/* Legacy line below the How-it-works steps — centered lead + bold standout (dark) */
.page-lp-knowledge-capture .lp-legacy {
    max-width: var(--max-width-narrow);
    margin: var(--space-3xl) auto 0;
    text-align: center;
    font-family: var(--font-heading);
}
.page-lp-knowledge-capture .lp-legacy__lead {
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-sm);
}
.page-lp-knowledge-capture .lp-legacy__emphasis {
    font-size: 2rem;
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    margin: 0;
}
.page-lp-knowledge-capture .lp-legacy__emphasis .lp-u {
    text-decoration: underline;
    text-decoration-color: var(--color-accent-tertiary);
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
}

/* Closing CTA + form ---------------------------------------------------- */
.page-lp-knowledge-capture #book-a-call {
    /* Anchor the section's top edge to the nav so the floating navbar hangs
       into the section's top padding (the 128px padding clears the title). */
    scroll-margin-top: 12px;
}
.page-lp-knowledge-capture .lp-closing-lead {
    max-width: 60ch;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-lg);
}
.page-lp-knowledge-capture .lp-form-wrap {
    max-width: 560px;
    margin: 0 auto;
}

/* Closing — 50/50: benefits + CTA text left, form right */
.page-lp-knowledge-capture .lp-closing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
    margin-top: var(--space-2xl);
}
.page-lp-knowledge-capture .lp-closing-left h3 {
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-lg);
}
.page-lp-knowledge-capture .lp-closing-list {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.page-lp-knowledge-capture .lp-closing-list li {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}
/* FAQ — centered 768px column (items stay left-aligned) */
.page-lp-knowledge-capture .faq-section .container {
    max-width: var(--max-width-narrow);
}

/* Responsive ------------------------------------------------------------ */
@media (max-width: 991px) {
    .page-lp-knowledge-capture .lp-steps { grid-template-columns: 1fr; }
    .page-lp-knowledge-capture .lp-closing-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
}

/* Tight two-column desktop — the 1200 breakpoint, down to the 991 stack.
   (Scoped >=992 because the hero stacks and the statements block goes
   position:relative below 991, where these absolute offsets would break it.) */
@media (min-width: 992px) and (max-width: 1200px) {
    /* Record-section copy: 80% wide on a 25%-white panel, padded all round */
    .page-lp-knowledge-capture .lp-record-bg .lp-record-col {
        max-width: 80%;
        background: rgba(255, 255, 255, 0.25);
        padding: var(--space-2xl);
    }
    /* Push the section's bottom-right background image down another 480px */
    .page-lp-knowledge-capture .lp-record-bg {
        padding-bottom: calc(var(--space-section-y) + 480px);
    }
    /* Re-anchor the hero statements block over the clip's bottom-left */
    .page-lp-knowledge-capture .sol-c-hero__platform {
        left: -6%;
        width: 80%;
        bottom: -35%;
    }
}

/* 768 breakpoint and below */
@media (max-width: 767px) {
    /* Keep the 992 hero spacing (don't shrink the padding here) */
    .page-lp-knowledge-capture .sol-c-hero { padding: calc(80px + 2rem) var(--space-section-x) 200px; }
    /* Reduce the gap between the stat number and its text to 48px */
    .page-lp-knowledge-capture .lp-stat__body { margin-top: var(--space-2xl); }
    /* Stats: 2x2 at 50/50 with the 5th stat full-width below */
    .page-lp-knowledge-capture .lp-problem__stats { grid-template-columns: repeat(2, 1fr); }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(-n+4) { grid-column: auto; }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(5) { grid-column: 1 / -1; }
    /* reset the 6-col borders/padding, then rebuild for 2 columns + a full-width row */
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(n) {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
        border-left: 0;
        border-top: 0;
    }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.15); }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.15); }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(odd) { padding-left: 0; }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(even) { padding-right: 0; }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(5) { padding-right: 0; }
    /* Button keeps its natural size (construction stretches it to 100% here) */
    .page-lp-knowledge-capture .sol-c-hero__cta-primary { width: auto; }
    /* Hero statements block sits lower on small screens */
    .page-lp-knowledge-capture .sol-c-hero__platform { top: 115%; }
}

/* 479 breakpoint and below */
@media (max-width: 479px) {
    /* Reduce the gap between the stat number and its text to 32px */
    .page-lp-knowledge-capture .lp-stat__body { margin-top: var(--space-xl); }
    /* Statements block drops below the clip in normal flow, ~16px gap */
    .page-lp-knowledge-capture .sol-c-hero__platform {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        transform: none;
        width: auto;
        max-width: none;
        margin: var(--space-md) auto 0;
    }
    /* Block is in flow now — use standard section bottom spacing */
    .page-lp-knowledge-capture .sol-c-hero { padding-bottom: var(--space-2xl); }
    /* Record-section copy panel: 24px padding all round */
    .page-lp-knowledge-capture .lp-record-bg .lp-record-col { padding: var(--space-lg); }
}

/* 350 breakpoint and below — stats stack to a single column */
@media (max-width: 350px) {
    .page-lp-knowledge-capture .lp-problem__stats { grid-template-columns: 1fr; }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat:nth-child(n) {
        grid-column: auto;
        border-left: 0;
        border-top: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .page-lp-knowledge-capture .lp-problem__stats .lp-stat + .lp-stat { border-top: 1px solid rgba(255, 255, 255, 0.15); }
}