/**
 * SaaS Platform Landing Page Styles
 * Flat design system - NO GRADIENTS
 * Uses CSS variables from SiteSettings (base.html)
 */

/* ============================================
   LANDING PAGE BASE
   ============================================ */

.lp-page {
    /* -----------------------------------------------------------------
       EDITORIAL TYPE SYSTEM (page-scoped)
       Playfair Display for display headings + numerals, Inter for UI/body.
       Playfair is loaded via @font-face in platform-theme.css.
       ----------------------------------------------------------------- */
    --lp-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --lp-font-ui: var(--font-body);

    /* -----------------------------------------------------------------
       INK + NEUTRAL TOKENS (flat, solid — no gradients)
       Consolidates the scattered darks and text grays onto one scale.
       Semantic status colors (#EF4444/#10B981/#F59E0B) stay literal.
       ----------------------------------------------------------------- */
    --lp-ink: #1C1C1C;          /* primary dark surface + strongest text */
    --lp-ink-soft: #2D2D2D;     /* elevated dark panels */
    --lp-panel: #16181D;        /* deep mockup background */
    --lp-panel-line: #333A46;   /* hairline inside dark mockups */

    --lp-body: #4B5563;         /* body copy on light surfaces */
    --lp-muted: #6B7280;        /* secondary text on light surfaces */
    --lp-faint: #9CA3AF;        /* tertiary / captions, incl. on dark */
    --lp-on-dark: #D6D3CE;      /* body copy on dark surfaces (AA) */

    --lp-line: var(--color-border, #EDE4D9);   /* primary border on light */
    --lp-hairline: #F1ECE4;     /* faint row divider (warm) */
    --lp-track: #E7E1D8;        /* input track / subnav rule */
    --lp-dark-line: rgba(255, 255, 255, 0.12); /* border on dark surfaces */

    /* -----------------------------------------------------------------
       SHAPE + MOTION — one radius for cards, one for controls; two
       durations (micro / reveal) with a single easing curve.
       ----------------------------------------------------------------- */
    --lp-radius-card: var(--radius-card);
    --lp-radius-control: var(--radius-control);
    --lp-radius-pill: var(--radius-pill);
    --lp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --lp-dur-micro: 0.2s;
    --lp-dur-reveal: 0.45s;

    font-family: var(--font-body);
    color: var(--color-text, #1C1C1C);
    overflow-x: hidden;
}

.lp-page * {
    box-sizing: border-box;
}

.lp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 768px) {
    .lp-container {
        padding: 0 40px;
    }
}

@media (min-width: 1280px) {
    .lp-container {
        padding: 0 24px;
    }
}

/* ============================================
   SECTION SPACING
   ============================================ */

.lp-section {
    padding: 80px 0;
}

@media (min-width: 768px) {
    .lp-section {
        padding: 120px 0;
    }
}

.lp-section--tight {
    padding: 60px 0;
}

@media (min-width: 768px) {
    .lp-section--tight {
        padding: 80px 0;
    }
}

/* Section backgrounds */
.lp-section--cream {
    background-color: var(--color-surface, #FBF6F0);
}

.lp-section--dark {
    background-color: var(--lp-ink);
    color: #FFFFFF;
}

.lp-section--white {
    background-color: #FFFFFF;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.lp-eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary, #D4922A);
    margin-bottom: 16px;
    display: block;
}

.lp-section--dark .lp-eyebrow {
    color: var(--color-primary, #D4922A);
}

.lp-heading-xl {
    font-family: var(--lp-font-display);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.lp-heading-lg {
    font-family: var(--lp-font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.lp-body-lg {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--lp-body);
}

.lp-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--lp-muted);
}

.lp-section--dark .lp-body-lg,
.lp-section--dark .lp-body {
    color: #D1D5DB;
}

.lp-text-center {
    text-align: center;
}

.lp-section-intro {
    max-width: 680px;
    margin: 0 auto 56px;
    text-align: center;
}

/* ============================================
   HERO SECTION
   ============================================ */

.lp-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - var(--nav-height, 80px));
    height: calc(100svh - var(--nav-height, 80px));
    min-height: 500px;
    background-color: var(--lp-ink);
    color: #FFFFFF;
}

/* On short/mobile viewports let the hero grow to fit its content instead of
   vertically clipping the headline + stats behind flex centering. */
@media (max-width: 767px) {
    .lp-hero {
        height: auto;
        min-height: calc(100svh - var(--nav-height, 80px));
        padding: 56px 0 52px;
    }
}

/* Full-viewport contract for top-level marketing pages. The base .lp-hero
   remains available to deliberately compact/interior pages. This modifier
   uses the rendered fixed-header measurement, with the established 80px nav
   token as a no-JS fallback, and grows rather than clipping when its copy is
   taller than the available viewport. */
.lp-viewport-page #main-content {
    padding-top: var(--site-header-stack-height, var(--nav-height, 80px));
}

.lp-hero--viewport {
    --lp-hero-inline-gutter: 24px;
    box-sizing: border-box;
    height: auto;
    min-height: calc(100vh - var(--site-header-stack-height, var(--nav-height, 80px)));
    min-height: max(500px, calc(100vh - var(--site-header-stack-height, var(--nav-height, 80px))));
    padding: clamp(40px, 7vh, 72px) 0 calc(clamp(40px, 7vh, 72px) + env(safe-area-inset-bottom, 0px));
}

@supports (height: 100svh) {
    .lp-hero--viewport {
        min-height: calc(100svh - var(--site-header-stack-height, var(--nav-height, 80px)));
        min-height: max(500px, calc(100svh - var(--site-header-stack-height, var(--nav-height, 80px))));
        padding-top: clamp(40px, 7svh, 72px);
        padding-bottom: calc(clamp(40px, 7svh, 72px) + env(safe-area-inset-bottom, 0px));
    }
}

/* Follow browser-chrome expansion/contraction when dynamic viewport units are
   available. The svh rule above remains the stable modern fallback. */
@supports (height: 100dvh) {
    .lp-hero--viewport {
        min-height: calc(100dvh - var(--site-header-stack-height, var(--nav-height, 80px)));
        min-height: max(500px, calc(100dvh - var(--site-header-stack-height, var(--nav-height, 80px))));
        padding-top: clamp(40px, 7dvh, 72px);
        padding-bottom: calc(clamp(40px, 7dvh, 72px) + env(safe-area-inset-bottom, 0px));
    }
}

.lp-page .lp-hero--viewport .lp-hero__content {
    padding-left: max(var(--lp-hero-inline-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--lp-hero-inline-gutter), env(safe-area-inset-right, 0px));
}

.lp-hero--viewport .lp-hero__scroll-indicator {
    bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

@media (max-height: 560px) {
    .lp-hero--viewport .lp-hero__scroll-indicator {
        display: none;
    }
}

.lp-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
}

.lp-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 2;
}

.lp-hero__content {
    position: relative;
    z-index: 3;
    max-width: 780px;
    text-align: center;
    padding: 0 24px;
}

.lp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background-color: rgba(212, 146, 42, 0.16);
    border: 1px solid rgba(212, 146, 42, 0.35);
    border-radius: var(--lp-radius-pill);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #F0C77E;
    margin-bottom: 28px;
}

.lp-hero__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary, #D4922A);
    animation: lp-pulse 2s ease-in-out infinite;
}

@keyframes lp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.lp-hero__title {
    font-family: var(--lp-font-display);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.015em;
    max-width: 15ch;
    margin: 0 auto 1.5rem;
    color: #FFFFFF;
}

.lp-hero__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-primary, #D4922A);
}

.lp-hero__subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 2.25rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.lp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
    margin-bottom: 48px;
}

.lp-hero__social-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    padding-top: 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lp-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 190px;
}

.lp-hero__stat-value {
    font-family: var(--lp-font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.lp-hero__stat-label {
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
}

/* Scroll Indicator */
.lp-hero__scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: rgba(255, 255, 255, 0.5);
    animation: lp-gentleBounce 2.5s ease-in-out infinite;
}

@keyframes lp-gentleBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

/* ============================================
   BUTTONS
   ============================================ */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-control);
    border: none;
    cursor: pointer;
    transition: transform var(--lp-dur-micro) var(--lp-ease), background-color var(--lp-dur-micro) var(--lp-ease), box-shadow var(--lp-dur-micro) var(--lp-ease), border-color var(--lp-dur-micro) var(--lp-ease), color var(--lp-dur-micro) var(--lp-ease);
    text-decoration: none;
    white-space: nowrap;
}

.lp-btn--primary {
    background-color: var(--color-primary, #D4922A);
    color: #FFFFFF;
}

.lp-btn--primary:hover {
    background-color: #B87A1E;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 146, 42, 0.3);
}

.lp-btn--secondary {
    background-color: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.lp-btn--secondary:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.05);
}

.lp-btn--outline {
    background-color: transparent;
    color: var(--color-primary, #D4922A);
    border: 2px solid var(--color-primary, #D4922A);
}

.lp-btn--outline:hover {
    background-color: var(--color-primary, #D4922A);
    color: #FFFFFF;
}

.lp-btn--large {
    padding: 16px 36px;
    font-size: 1rem;
}

.lp-btn--icon {
    width: 20px;
    height: 20px;
}

/* ============================================
   PAIN POINTS SECTION
   ============================================ */

.lp-pain-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .lp-pain-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

.lp-pain-card {
    padding: 40px 32px;
    background-color: #FFFFFF;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border, #EDE4D9);
    transition: transform var(--lp-dur-micro) var(--lp-ease), box-shadow var(--lp-dur-micro) var(--lp-ease), border-color var(--lp-dur-micro) var(--lp-ease);
    position: relative;
}

.lp-pain-card:hover {
    border-color: var(--color-primary, #D4922A);
    transform: translateY(var(--hover-lift-card));
    box-shadow: var(--shadow-hover-card);
}

.lp-pain-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    background-color: #FEF3E2;
    color: var(--color-primary, #D4922A);
}

.lp-pain-card__icon svg {
    width: 28px;
    height: 28px;
}

.lp-pain-card__stat {
    font-family: var(--lp-font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary, #D4922A);
    margin-bottom: 4px;
}

.lp-pain-card__title {
    font-family: var(--lp-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text, #1C1C1C);
    margin-bottom: 12px;
}

.lp-pain-card__body {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--lp-muted);
}

/* ============================================
   FEATURES SECTION
   ============================================ */

.lp-feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    padding: 40px 0;
}

@media (min-width: 768px) {
    .lp-feature {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        padding: 60px 0;
    }
}

.lp-feature--reverse .lp-feature__visual {
    order: -1;
}

@media (min-width: 768px) {
    .lp-feature--reverse .lp-feature__visual {
        order: 1;
    }

    .lp-feature--reverse .lp-feature__content {
        order: -1;
    }
}

.lp-feature__visual {
    background-color: var(--color-surface, #FBF6F0);
    border-radius: var(--radius-card);
    padding: 32px;
    border: 1px solid var(--color-border, #EDE4D9);
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-feature__visual-inner {
    width: 100%;
    text-align: center;
}

.lp-feature__content {
    padding: 8px 0;
}

.lp-feature__badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: rgba(58, 158, 143, 0.1);
    color: var(--color-secondary, #3A9E8F);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.lp-feature__title {
    font-family: var(--lp-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text, #1C1C1C);
    margin-bottom: 16px;
}

.lp-feature__desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--lp-muted);
    margin-bottom: 24px;
}

.lp-feature__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-feature__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
    color: #374151;
}

.lp-feature__check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(58, 158, 143, 0.1);
    color: var(--color-secondary, #3A9E8F);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.lp-feature__check svg {
    width: 12px;
    height: 12px;
}

/* Feature grid for compact features */
.lp-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 640px) {
    .lp-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .lp-features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

.lp-feature-card {
    padding: 32px 28px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform var(--lp-dur-micro) var(--lp-ease), box-shadow var(--lp-dur-micro) var(--lp-ease), border-color var(--lp-dur-micro) var(--lp-ease);
}

.lp-feature-card:hover {
    border-color: rgba(212, 146, 42, 0.3);
    transform: translateY(var(--hover-lift-card));
    box-shadow: var(--shadow-hover-card);
}

.lp-feature-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-card);
    background-color: rgba(212, 146, 42, 0.15);
    color: var(--color-primary, #D4922A);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.lp-feature-card__icon svg {
    width: 24px;
    height: 24px;
}

.lp-feature-card__title {
    font-family: var(--lp-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.lp-feature-card__body {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--lp-faint);
}

/* ============================================
   COMPARISON TABLE
   ============================================ */

.lp-comparison-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -24px;
    padding: 0 24px;
}

.lp-comparison {
    width: 100%;
    min-width: 800px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-border, #EDE4D9);
    background-color: #FFFFFF;
}

.lp-comparison th,
.lp-comparison td {
    padding: 17px 22px;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.45;
    border-bottom: 1px solid var(--lp-hairline);
}

.lp-comparison thead th {
    background-color: var(--color-surface, #FBF6F0);
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-text, #1C1C1C);
    padding: 20px;
    border-bottom: 2px solid var(--color-border, #EDE4D9);
}

.lp-comparison thead th:last-child,
.lp-comparison thead th.lp-comparison__highlight {
    background-color: rgba(212, 146, 42, 0.08);
    color: var(--color-primary, #D4922A);
}

.lp-comparison tbody td:last-child {
    background-color: rgba(212, 146, 42, 0.05);
    font-weight: 500;
    box-shadow: inset 3px 0 0 rgba(212, 146, 42, 0.35);
}

.lp-comparison tbody tr:last-child :is(th, td) {
    border-bottom: none;
}

.lp-comparison tbody th:first-child,
.lp-comparison tbody td:first-child {
    font-weight: 600;
    color: var(--color-text, #1C1C1C);
}

/* ============================================
   PRICING SECTION
   ============================================ */

.lp-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    max-width: 880px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .lp-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    /* Single-column variant — used when white-label is demoted to a band below */
    .lp-pricing-grid--single {
        grid-template-columns: 1fr;
        max-width: 620px;
    }
}

.lp-pricing-card {
    padding: 36px 28px;
    background-color: #FFFFFF;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border, #EDE4D9);
    position: relative;
    transition: transform var(--lp-dur-micro) var(--lp-ease), box-shadow var(--lp-dur-micro) var(--lp-ease), border-color var(--lp-dur-micro) var(--lp-ease);
}

@media (min-width: 768px) {
    .lp-pricing-card {
        border-radius: var(--radius-card);
    }
}

.lp-pricing-card--featured {
    border-color: var(--color-primary, #D4922A);
    box-shadow: 0 8px 32px rgba(212, 146, 42, 0.12);
    z-index: 1;
}

@media (min-width: 768px) {
    .lp-pricing-card--featured {
        border-radius: var(--radius-card);
    }
}

.lp-pricing-card__popular {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    background-color: var(--color-primary, #D4922A);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 100px;
    white-space: nowrap;
    max-width: calc(100% - 24px);
}

/* Mobile: let the long ribbon wrap inside the card instead of
   overflowing the viewport. */
@media (max-width: 767px) {
    .lp-pricing-card__popular {
        white-space: normal;
        text-align: center;
        width: max-content;
        max-width: calc(100% - 24px);
        line-height: 1.3;
    }
}

.lp-pricing-card__name {
    font-family: var(--lp-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text, #1C1C1C);
    margin-bottom: 4px;
}

.lp-pricing-card__desc {
    font-size: 0.8125rem;
    color: var(--lp-faint);
    margin-bottom: 24px;
    min-height: 36px;
}

.lp-pricing-card__price {
    margin-bottom: 24px;
}

.lp-pricing-card__amount {
    font-family: var(--lp-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text, #1C1C1C);
    letter-spacing: -0.03em;
    line-height: 1;
}

.lp-pricing-card__period {
    font-size: 0.875rem;
    color: var(--lp-faint);
}

.lp-pricing-card__fee {
    font-size: 0.8125rem;
    color: var(--lp-muted);
    margin-top: 4px;
}

.lp-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8125rem;
    color: #374151;
}

.lp-pricing-card__features li svg {
    width: 16px;
    height: 16px;
    color: var(--color-secondary, #3A9E8F);
    flex-shrink: 0;
    margin-top: 1px;
}

.lp-pricing-card__cta {
    width: 100%;
}

/* Pricing note (transparency callout) */
.lp-pricing-note {
    max-width: 800px;
    margin: 0 auto 40px;
}

.lp-pricing-note__inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background-color: var(--color-surface, #FBF6F0);
    border: 1px solid var(--color-border, #EDE4D9);
    border-left: 3px solid var(--color-primary, #D4922A);
    border-radius: 0 8px 8px 0;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--lp-body);
}

.lp-pricing-note__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-primary, #D4922A);
    margin-top: 1px;
}

.lp-pricing-note__inner strong {
    color: var(--color-text, #1C1C1C);
}

/* Dark pricing card variant (White-Label) */
.lp-pricing-card--dark {
    background-color: var(--lp-ink);
    border-color: #374151;
    color: #FFFFFF;
}

.lp-pricing-card--dark .lp-pricing-card__name {
    color: #FFFFFF;
}

.lp-pricing-card--dark .lp-pricing-card__desc {
    color: var(--lp-faint);
}

.lp-pricing-card--dark .lp-pricing-card__amount {
    color: var(--color-primary, #D4922A);
}

.lp-pricing-card--dark .lp-pricing-card__period {
    color: var(--lp-muted);
}

.lp-pricing-card--dark .lp-pricing-card__fee {
    color: var(--lp-faint);
}

.lp-pricing-card--dark .lp-pricing-card__features li {
    color: #D1D5DB;
}

.lp-pricing-card--dark .lp-pricing-card__features li svg {
    color: var(--color-primary, #D4922A);
}

@media (min-width: 768px) {
    .lp-pricing-card--dark {
        border-radius: var(--radius-card);
    }
}

/* Highlight column for our platform in comparison */
.lp-comparison__highlight {
    background-color: rgba(212, 146, 42, 0.08);
    color: var(--color-primary, #D4922A);
}

/* ============================================
   FAQ SECTION
   ============================================ */

.lp-faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lp-faq-item {
    border-bottom: 1px solid var(--color-border, #EDE4D9);
}

.lp-faq-item:first-child {
    border-top: 1px solid var(--color-border, #EDE4D9);
}

.lp-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--lp-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text, #1C1C1C);
    transition: color 0.2s;
}

.lp-faq-question:hover {
    color: var(--color-primary, #D4922A);
}

.lp-faq-question__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform var(--lp-dur-micro) var(--lp-ease);
    color: var(--lp-faint);
}

.lp-faq-item--open .lp-faq-question__icon {
    transform: rotate(45deg);
    color: var(--color-primary, #D4922A);
}

.lp-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--lp-dur-reveal) var(--lp-ease), padding var(--lp-dur-reveal) var(--lp-ease);
}

.lp-faq-item--open .lp-faq-answer {
    max-height: 500px;
    padding-bottom: 24px;
}

.lp-faq-answer p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--lp-muted);
}

/* ============================================
   FINAL CTA
   ============================================ */

.lp-final-cta {
    text-align: center;
    padding: 100px 0;
    background-color: var(--lp-ink);
    color: #FFFFFF;
}

@media (min-width: 768px) {
    .lp-final-cta {
        padding: 140px 0;
    }
}

.lp-final-cta__title {
    font-family: var(--lp-font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.lp-final-cta__subtitle {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--lp-faint);
    margin-bottom: 40px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.lp-final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}

.lp-final-cta__note {
    font-size: 0.8125rem;
    color: var(--lp-muted);
}

/* ============================================
   STICKY NAV (Platform-specific)
   ============================================ */

.lp-subnav {
    position: sticky;
    top: 80px;
    z-index: 30;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border-bottom: 1px solid var(--lp-track);
    display: none;
}

@media (min-width: 768px) {
    .lp-subnav {
        display: block;
    }
}

.lp-subnav__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    height: 52px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.lp-subnav__inner::-webkit-scrollbar {
    display: none;
}

.lp-subnav__link {
    position: relative;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--lp-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--lp-dur-micro) var(--lp-ease);
    padding: 17px 0;
}

.lp-subnav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--color-primary, #D4922A);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--lp-dur-micro) var(--lp-ease);
}

.lp-subnav__link:hover {
    color: var(--color-primary, #D4922A);
}

.lp-subnav__link--active {
    color: var(--color-primary, #D4922A);
}

.lp-subnav__link--active::after,
.lp-subnav__link:hover::after {
    transform: scaleX(1);
}

/* Accessibility: honor reduced-motion — no transforms, animations, or
   transitions for users who ask for calm. */
@media (prefers-reduced-motion: reduce) {
    .lp-page *,
    .lp-page *::before,
    .lp-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0 !important;
        scroll-behavior: auto !important;
    }

    .lp-hero__badge-dot,
    .lp-hero__scroll-indicator {
        animation: none;
    }

    .lp-pain-card:hover,
    .lp-feature-card:hover,
    .lp-pricing-card:hover,
    .lp-btn--primary:hover {
        transform: none;
    }
}

/* ============================================
   HOW IT WORKS STEPS
   ============================================ */

.lp-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .lp-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
    }
}

.lp-step {
    text-align: center;
}

.lp-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-primary, #D4922A);
    color: #FFFFFF;
    font-family: var(--lp-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.lp-step__title {
    font-family: var(--lp-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--color-text, #1C1C1C);
}

.lp-step__body {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--lp-muted);
}

/* ============================================
   PROOF CASE STUDY
   ============================================ */

.lp-btn--small {
    padding: 10px 18px;
    font-size: 0.8125rem;
}

.lp-casestudy {
    padding: 40px;
    background-color: var(--lp-ink);
    color: #FFFFFF;
    border-radius: var(--radius-card);
    margin-bottom: 32px;
}
.lp-casestudy__body .lp-eyebrow {
    color: var(--color-primary, #D4922A);
    display: block;
    margin-bottom: 12px;
}
.lp-casestudy__title {
    font-family: var(--lp-font-display);
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 0 0 12px;
    color: #FFFFFF;
}
.lp-casestudy__lead {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 24px;
}
.lp-casestudy__stack {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.lp-casestudy__stack li {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    padding-left: 14px;
    border-left: 2px solid var(--color-primary, #D4922A);
}
.lp-casestudy__stack strong {
    color: #FFFFFF;
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}
.lp-casestudy__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.lp-casestudy__links .lp-btn--secondary {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 720px) {
    .lp-casestudy {
        padding: 28px;
    }
    .lp-casestudy__stack {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PRODUCT OFFER ARCHITECTURE
   Shared by /list-your-tours/ and /white-label/.
   ============================================ */

.lp-page :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--color-primary, #D4922A);
    outline-offset: 3px;
}

.lp-offer-grid {
    align-items: stretch;
}

.lp-offer-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lp-offer-card .lp-offer-card__status {
    position: static;
    inset: auto;
    transform: none;
    display: inline-flex;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 5px 12px;
    white-space: normal;
    line-height: 1.3;
}

.lp-offer-card .lp-pricing-card__features {
    flex: 1 1 auto;
}

.lp-offer-card__boundary {
    padding-top: 16px;
    /* The footnote belongs to the hairline above it, not to the CTA below.
       Without this the two collide whenever the copy fills the row. */
    margin-bottom: 24px;
    border-top: 1px solid var(--lp-hairline);
    line-height: 1.55;
}

.lp-pricing-card--dark .lp-offer-card__boundary {
    border-color: var(--lp-dark-line);
}

.lp-offer-card .lp-pricing-card__cta {
    margin-top: auto;
}

/* The outlined Direct CTA carries a 2px border; give every offer CTA the same
   border box so the three buttons are the same height. */
.lp-offer-card .lp-btn--primary.lp-pricing-card__cta {
    border: 2px solid transparent;
}

/* Row-for-row alignment across the three offer cards. Each card's copy is a
   different length, so flex alone left the price blocks, the feature lists,
   the footnote hairline, and the CTAs on different baselines. Subgrid makes
   the grid own the row heights instead of each card's own content.
   NOTE: `span 7` = the seven children every offer card must have (status,
   name, desc, price, features, boundary, CTA). Add a child, update the span
   and the parent's grid-template-rows. Browsers without subgrid keep the
   flex layout above. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 720px) {
        .lp-offer-grid {
            grid-template-rows: auto auto auto auto 1fr auto auto;
        }

        .lp-offer-card {
            display: grid;
            grid-row: span 7;
            grid-template-rows: subgrid;
            /* Inherited row-gap would land between every row inside the card. */
            row-gap: 0;
        }

        .lp-offer-card .lp-pricing-card__cta {
            margin-top: 0;
        }
    }
}

.lp-offer-card__price-text {
    display: block;
    font-size: clamp(1.85rem, 3.4vw, 2.5rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

/* Secondary buttons normally sit on dark surfaces. Direct is a light card. */
.lp-offer-card--direct .lp-btn--secondary {
    color: var(--color-primary, #D4922A);
    border: 2px solid var(--color-primary, #D4922A);
}

.lp-offer-card--direct .lp-btn--secondary:hover {
    color: #FFFFFF;
    background-color: var(--color-primary, #D4922A);
    border-color: var(--color-primary, #D4922A);
}

.lp-lifecycle__stage {
    min-width: 0;
}

.lp-lifecycle__stage .lp-feature-card__icon {
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lp-offer-detail__summary {
    min-height: 0;
}

.lp-platform-proof-strip {
    row-gap: 24px;
}

/* Keep the product-fit emphasis on Marketplace, the available-now path.
   The old comparison table highlighted its final competitor column. */
.lp-fit-table thead th:last-child {
    background-color: var(--color-surface, #FBF6F0);
    color: var(--color-text, #1C1C1C);
}

.lp-fit-table tbody td:nth-child(2) {
    background-color: rgba(212, 146, 42, 0.05);
    box-shadow: inset 3px 0 0 rgba(212, 146, 42, 0.35);
    font-weight: 600;
}

.lp-fit-table tbody td:last-child {
    background-color: transparent;
    box-shadow: none;
    font-weight: 400;
}

.lp-scope-grid {
    align-items: stretch;
    max-width: 1040px;
}

.lp-scope-card {
    display: flex;
    flex-direction: column;
}

.lp-scope-card .lp-pricing-card__features {
    flex: 1 1 auto;
}

.wl-process__steps {
    max-width: 1080px;
}

.lp-hero--compact .lp-hero__actions {
    margin-bottom: 0;
}

.wl-hero .lp-hero__overlay {
    background-color: rgba(0, 0, 0, 0.76);
}

@media (min-width: 768px) {
    .lp-hero--compact {
        height: min(78svh, 780px);
        min-height: 620px;
    }

    .wl-process__steps {
        gap: 36px 48px;
    }
}

@media (max-width: 767px) {
    /* The old named-competitor table hid columns three and four on mobile.
       Present every offer as a labeled card instead. */
    .lp-fit-table__wrapper {
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .lp-fit-table {
        display: block;
        min-width: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .lp-fit-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .lp-fit-table thead th:nth-child(3),
    .lp-fit-table thead th:nth-child(4) {
        display: table-cell;
    }

    .lp-fit-table tbody {
        display: grid;
        gap: 16px;
    }

    .lp-fit-table tbody tr {
        display: block;
        overflow: hidden;
        border: 1px solid var(--color-border, #EDE4D9);
        border-radius: var(--radius-card);
        background-color: #FFFFFF;
    }

    .lp-fit-table tbody td,
    .lp-fit-table tbody td:nth-child(2),
    .lp-fit-table tbody td:last-child {
        display: grid !important;
        grid-template-columns: minmax(92px, 0.7fr) minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        width: 100%;
        padding: 11px 14px;
        border-bottom: 1px solid var(--lp-hairline);
        background: #FFFFFF;
        box-shadow: none;
        color: var(--lp-body);
        font-weight: 400;
        overflow-wrap: anywhere;
    }

    .lp-fit-table tbody th:first-child {
        display: block !important;
        padding: 14px;
        background-color: var(--lp-ink);
        color: #FFFFFF;
        font-family: var(--lp-font-display);
        font-size: 0.9375rem;
        font-weight: 700;
    }

    .lp-fit-table tbody td:last-child {
        border-bottom: 0;
    }

    .lp-fit-table tbody td:not(:first-child)::before {
        content: attr(data-label);
        color: var(--color-primary, #D4922A);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .lp-offer-detail.lp-feature--reverse .lp-feature__visual {
        order: initial;
    }
}

/* ============================================
   SALES PAGE POLISH
   Shared visual rhythm for the operator and White Label sales pages.
   ============================================ */

.lp-sales-page {
    --lp-sales-paper: #FCFAF7;
    --lp-sales-line: #E7DED3;
    --lp-sales-shadow: 0 18px 50px rgba(28, 28, 28, 0.07);
    --lp-accent-text: #9C6210;
    --lp-teal-text: #247B70;
    background-color: var(--lp-sales-paper);
}

.lp-sales-page :where(section[id], article[id]) {
    scroll-margin-top: calc(var(--site-header-stack-height, var(--nav-height, 80px)) + 24px);
}

.lp-sales-page .lp-container {
    max-width: 1240px;
}

.lp-sales-page .lp-section {
    padding: clamp(72px, 7.5vw, 104px) 0;
}

.lp-sales-page .lp-section-intro {
    max-width: 740px;
    margin-bottom: clamp(42px, 5vw, 56px);
}

.lp-sales-page .lp-section-intro .lp-heading-xl,
.lp-sales-page .lp-final-cta__title {
    font-weight: 600;
    text-wrap: balance;
}

.lp-sales-page .lp-section-intro .lp-body-lg {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.lp-sales-page .lp-eyebrow {
    color: var(--lp-accent-text);
}

.lp-sales-page .lp-section--dark .lp-eyebrow,
.lp-sales-page .lp-final-cta .lp-eyebrow {
    color: #E6AA45;
}

.lp-sales-page .lp-hero__content {
    max-width: 920px;
}

.lp-sales-page .lp-hero__title {
    max-width: 100%;
    text-wrap: balance;
}

.lp-sales-page .lp-hero__subtitle {
    max-width: 620px;
    text-wrap: pretty;
}

.lp-platform-page .lp-hero__overlay {
    background-color: rgba(0, 0, 0, 0.61);
}

.lp-sales-page .lp-btn {
    min-height: 50px;
    font-weight: 700;
    letter-spacing: 0.005em;
}

.lp-sales-page .lp-btn--primary {
    color: var(--color-on-primary, var(--lp-ink));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

.lp-sales-page .lp-btn--primary:hover {
    background-color: #E0A03A;
    color: var(--color-on-primary, var(--lp-ink));
    box-shadow: 0 8px 22px rgba(28, 28, 28, 0.16);
}

.lp-sales-page .lp-btn--outline,
.lp-sales-page .lp-offer-card--direct .lp-btn--secondary {
    color: var(--lp-accent-text);
    border-color: var(--lp-accent-text);
}

.lp-sales-page .lp-btn--outline:hover,
.lp-sales-page .lp-offer-card--direct .lp-btn--secondary:hover {
    color: var(--color-on-primary, var(--lp-ink));
    background-color: var(--color-primary, #D4922A);
    border-color: var(--color-primary, #D4922A);
}

.lp-sales-page :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--lp-ink);
}

.lp-sales-page .lp-pain-card,
.lp-sales-page .lp-pricing-card,
.lp-sales-page .lp-feature__visual {
    border-color: var(--lp-sales-line);
}

.lp-sales-page .lp-pain-card,
.lp-sales-page .lp-pricing-card {
    box-shadow: 0 1px 0 rgba(28, 28, 28, 0.02);
}

.lp-sales-page .lp-pain-card:hover,
.lp-sales-page .lp-pricing-card:hover {
    border-color: rgba(212, 146, 42, 0.62);
    box-shadow: var(--lp-sales-shadow);
    transform: none;
}

.lp-sales-page .lp-pain-card__body,
.lp-sales-page .lp-pricing-card__features li,
.lp-sales-page .lp-pricing-card__fee {
    line-height: 1.62;
}

.lp-sales-page .lp-pricing-card:not(.lp-pricing-card--dark) .lp-pricing-card__desc {
    color: var(--lp-muted);
}

.lp-sales-page .lp-pain-card__icon,
.lp-sales-page .lp-pricing-card__features li svg,
.lp-sales-page .lp-feature__check {
    color: var(--lp-teal-text);
}

.lp-sales-page .lp-pain-card__stat,
.lp-sales-page .lp-pricing-note__icon {
    color: var(--lp-accent-text);
}

.lp-sales-page .lp-feature__badge {
    color: var(--lp-teal-text);
}

.lp-sales-page .lp-pricing-card__popular {
    color: var(--color-on-primary, var(--lp-ink));
}

.lp-platform-proof-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: min(100%, 720px);
    margin-left: auto;
    margin-right: auto;
}

.lp-platform-proof-strip .lp-hero__stat {
    max-width: none;
    min-width: 0;
    padding: 0 24px;
}

.lp-platform-proof-strip .lp-hero__stat + .lp-hero__stat {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.lp-platform-proof-strip .lp-hero__stat-label {
    color: rgba(255, 255, 255, 0.84);
}

.lp-offer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
}

.lp-offer-card {
    padding: 34px 30px;
}

.lp-offer-card .lp-pricing-card__name {
    font-size: 1.35rem;
    margin-bottom: 8px;
}

.lp-offer-card .lp-pricing-card__desc,
.lp-offer-card .lp-pricing-card__features li,
.lp-offer-card .lp-pricing-card__fee {
    font-size: 0.875rem;
}

.lp-sales-page .lp-pricing-card__period {
    color: var(--lp-muted);
}

.lp-offer-card .lp-pricing-card__features {
    gap: 12px;
}

.lp-offer-card--white-label {
    background-color: #191A1A;
    border-color: rgba(255, 255, 255, 0.14);
}

.lp-offer-card--white-label .lp-offer-card__status {
    color: #E6AA45;
    background-color: rgba(212, 146, 42, 0.12);
}

.lp-offer-card--white-label .lp-pricing-card__features li svg {
    color: #E6AA45;
}

.lp-offer-detail {
    padding: 48px 0;
}

.lp-offer-detail + .lp-offer-detail {
    border-top: 1px solid var(--lp-sales-line);
}

.lp-offer-detail .lp-feature__visual {
    padding: clamp(30px, 4vw, 44px);
}

.lp-lifecycle__stage {
    border-top: 2px solid rgba(212, 146, 42, 0.36);
}

.lp-lifecycle__stage .lp-feature-card__body {
    color: #B8BDC6;
}

.lp-fit-table {
    border-color: var(--lp-sales-line);
    box-shadow: 0 12px 34px rgba(28, 28, 28, 0.05);
}

.lp-fit-table thead th {
    background-color: #F7F2EB;
}

.lp-sales-page .lp-fit-table thead th.lp-comparison__highlight {
    color: var(--lp-accent-text);
}

.lp-fit-table tbody tr:hover td {
    background-color: #FCF8F2;
}

.lp-fit-table tbody tr:hover td:nth-child(2) {
    background-color: rgba(212, 146, 42, 0.08);
}

.lp-sales-page .lp-fit-table tbody td[data-label]::before {
    color: var(--lp-accent-text);
}

.lp-sales-page .lp-subnav__link:hover,
.lp-sales-page .lp-subnav__link--active {
    color: var(--lp-accent-text);
}

.lp-sales-page .lp-subnav__link::after {
    background-color: var(--lp-accent-text);
}

.lp-sales-page .lp-faq-question:hover {
    color: var(--lp-accent-text);
}

.lp-sales-page .lp-faq-question__icon {
    color: var(--lp-muted);
}

.lp-sales-page .lp-faq-item--open .lp-faq-question__icon {
    color: var(--lp-accent-text);
}

.lp-sales-page .lp-section--dark .lp-eyebrow,
.lp-sales-page .lp-casestudy .lp-eyebrow {
    color: #E6AA45;
}

.lp-sales-page .lp-final-cta__note {
    color: #B8BDC6;
}

.wl-process .lp-step {
    padding: 26px 24px;
    text-align: left;
    background-color: var(--lp-sales-paper);
    border: 1px solid var(--lp-sales-line);
    border-top: 3px solid rgba(212, 146, 42, 0.7);
    border-radius: var(--radius-card);
}

.wl-process .lp-step__number {
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    font-size: 1.125rem;
    color: var(--color-on-primary, var(--lp-ink));
}

.wl-process .lp-step__title {
    font-size: 1.15rem;
}

.wl-proof .lp-casestudy {
    background-color: #242524;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.2);
}

.wl-commercial .lp-pricing-card--featured,
.lp-scope-card.lp-pricing-card--featured {
    box-shadow: var(--lp-sales-shadow);
}

.wl-terms .lp-pricing-grid {
    align-items: stretch;
}

.wl-terms .lp-pricing-card {
    display: flex;
    flex-direction: column;
}

.wl-terms .lp-pricing-card__features {
    flex: 1 1 auto;
}

.lp-sales-page .lp-faq-question {
    padding: 22px 4px;
}

.lp-sales-page .lp-final-cta {
    padding: clamp(88px, 9vw, 116px) 0;
}

.lp-subnav {
    top: var(--site-header-stack-height, var(--nav-height, 80px));
}

@media (min-width: 720px) and (max-width: 1079px) {
    .lp-offer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-offer-card--white-label {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 24px) / 2);
    }
}

@media (min-width: 768px) and (max-width: 899px) {
    .lp-fit-table__wrapper {
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .lp-fit-table {
        min-width: 0;
        table-layout: fixed;
    }

    .lp-fit-table th,
    .lp-fit-table td {
        padding: 12px 10px;
        font-size: 0.75rem;
        overflow-wrap: anywhere;
    }

    .lp-fit-table thead th {
        padding: 14px 10px;
        font-size: 0.8125rem;
    }
}

@media (min-width: 768px) {
    .lp-platform-page :where(section[id], article[id]) {
        scroll-margin-top: calc(var(--site-header-stack-height, var(--nav-height, 80px)) + 76px);
    }
}

@media (min-width: 1080px) {
    .lp-offer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
    }

    .lp-offer-card--white-label {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }

    .lp-platform-cta__actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: min(100%, 1120px);
        margin-left: auto;
        margin-right: auto;
    }

    .lp-platform-cta__actions .lp-btn {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        white-space: nowrap;
    }
}

@media (max-width: 560px) {
    .lp-hero--viewport {
        --lp-hero-inline-gutter: 20px;
    }

    .lp-sales-page .lp-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .lp-sales-page .lp-section {
        padding: 68px 0;
    }

    .lp-sales-page .lp-section-intro {
        margin-bottom: 38px;
    }

    .lp-sales-page .lp-heading-xl {
        font-size: clamp(1.9rem, 9vw, 2.35rem);
    }

    .lp-sales-page .lp-body-lg {
        font-size: 1.0625rem;
        line-height: 1.65;
    }

    .lp-platform-page .lp-hero--viewport {
        padding: 46px 0 calc(40px + env(safe-area-inset-bottom, 0px));
    }

    .lp-sales-page .lp-hero__content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .lp-sales-page .lp-hero__badge {
        margin-bottom: 24px;
    }

    .lp-sales-page .lp-hero__subtitle {
        margin-bottom: 30px;
    }

    .lp-hero__actions {
        width: 100%;
        margin-bottom: 32px;
    }

    .lp-hero__actions .lp-btn,
    .lp-cta-grid .lp-btn {
        width: 100%;
        white-space: normal;
    }

    .lp-cta-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .lp-platform-proof-strip {
        padding-top: 24px;
    }

    .lp-platform-proof-strip .lp-hero__stat {
        padding: 0 7px;
    }

    .lp-platform-proof-strip .lp-hero__stat-value {
        font-size: 1.15rem;
        line-height: 1.2;
    }

    .lp-platform-proof-strip .lp-hero__stat-label {
        font-size: 0.625rem;
        line-height: 1.38;
    }

    .lp-platform-page .lp-hero__scroll-indicator {
        display: none;
    }

    .lp-offer-card,
    .lp-sales-page .lp-pricing-card,
    .lp-sales-page .lp-pain-card {
        padding: 28px 24px;
    }

    .lp-offer-detail {
        padding: 36px 0;
    }

    .lp-fit-table tbody :is(th, td),
    .lp-fit-table tbody td:nth-child(2),
    .lp-fit-table tbody td:last-child {
        grid-template-columns: minmax(84px, 0.62fr) minmax(0, 1fr);
        gap: 12px;
    }

    .wl-process .lp-step {
        padding: 24px 22px;
    }
}

.lp-sales-page #floating-actions {
    display: none !important;
}

@media (max-width: 1079px) {
    .lp-sales-page .chatbot-fab {
        display: none !important;
    }
}