/* ==============================================================
   Spinvest Landing Design System – landing.css v2.0
   ==============================================================
   Loaded on frontend AND inside the Gutenberg editor
   (via add_editor_style in functions.php).

   INDEX
   ─────
   1.  CSS Variables
   2.  Base Reset
   3.  Landing Page Wrapper
   4.  Gutenberg Alignment Fixes
   5.  Section Backgrounds  (sp-section-*)
   6.  Section Padding
   7.  Layout Containers    (sp-container, sp-narrow, sp-centered)
   8.  Typography
   9.  Section Label / Badge (sp-badge, sp-section-label)
  10.  Buttons              (sp-btn-primary, sp-btn-ghost, sp-btn-dark)
  11.  Cards                (sp-card, sp-card-grid, sp-card-accent)
  12.  Hero Section         (sp-hero)
  13.  Feature / Benefits Grid
  14.  Process Steps        (sp-process)
  15.  Offer / Pricing Card (sp-offer-card)
  16.  FAQ Section          (sp-faq)
  17.  CTA Section          (sp-cta)
  18.  Trust / Quote Block  (sp-trust)
  19.  Checklist            (sp-checklist)
  20.  Lead Magnet          (sp-lead-magnet)
  21.  Separator & Spacer
  22.  Images & Logo        (sp-logo-area)
  23.  Gutenberg Block Polish
  24.  Utility Helpers
  25.  Responsive
   ============================================================== */


/* --------------------------------------------------------------
   1. CSS VARIABLES
   -------------------------------------------------------------- */
:root,
.editor-styles-wrapper {
    /* Brand colours */
    --sp-lime:          #CADA37;
    --sp-lime-dark:     #B8C825;
    --sp-lime-pale:     rgba(202, 218, 55, 0.12);
    --sp-lime-glow:     rgba(202, 218, 55, 0.25);
    --sp-anthracite:    #6D6E72;
    --sp-dark:          #222426;
    --sp-dark-2:        #2D3035;
    --sp-dark-3:        #383C42;
    --sp-white:         #FFFFFF;
    --sp-light:         #F5F5F3;
    --sp-light-2:       #EBEBEA;

    /* Text */
    --sp-text:          #222222;
    --sp-text-2:        #444444;
    --sp-muted:         #666666;
    --sp-muted-2:       #888888;

    /* UI */
    --sp-border:        #E5E5E5;
    --sp-border-dark:   rgba(255, 255, 255, 0.08);

    /* Radii */
    --sp-radius-sm:     8px;
    --sp-radius:        16px;
    --sp-radius-lg:     24px;
    --sp-radius-xl:     32px;
    --sp-radius-pill:   100px;

    /* Shadows */
    --sp-shadow-sm:     0 2px 8px rgba(0,0,0,0.05);
    --sp-shadow:        0 8px 32px rgba(0,0,0,0.08);
    --sp-shadow-md:     0 16px 48px rgba(0,0,0,0.10);
    --sp-shadow-lg:     0 24px 64px rgba(0,0,0,0.14);
    --sp-shadow-xl:     0 32px 80px rgba(0,0,0,0.18);

    /* Layout */
    --sp-container:     1200px;
    --sp-narrow:        720px;
    --sp-section-py:    96px;
    --sp-section-py-md: 64px;
    --sp-section-py-sm: 40px;

    /* Typography */
    --sp-font:          'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Animation */
    --sp-trans:         all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}


/* --------------------------------------------------------------
   2. BASE RESET
   -------------------------------------------------------------- */
.sp-landing-body,
.sp-landing-page,
.editor-styles-wrapper {
    margin:  0;
    padding: 0;
}

.sp-landing-body *,
.sp-landing-page *,
.sp-landing-body *::before,
.sp-landing-body *::after {
    box-sizing: border-box;
}

/* Hide theme chrome when this template is active */
.sp-landing-body #wpadminbar       { /* admin bar is hidden via PHP */    }
.sp-landing-body .site-header,
.sp-landing-body header.site-header,
.sp-landing-body #masthead,
.sp-landing-body #site-navigation,
.sp-landing-body .site-footer,
.sp-landing-body footer.site-footer,
.sp-landing-body #colophon,
.sp-landing-body .entry-header,
.sp-landing-body .entry-footer,
.sp-landing-body .post-navigation,
.sp-landing-body .comments-area      { display: none !important; }

/* Remove default WP/theme page padding that might leak in */
.sp-landing-body .site-content,
.sp-landing-body .site,
.sp-landing-body #content,
.sp-landing-body #primary,
.sp-landing-body main.site-main     { padding: 0 !important; margin: 0 !important; max-width: none !important; }


/* --------------------------------------------------------------
   3. LANDING PAGE WRAPPER
   -------------------------------------------------------------- */
.sp-landing-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--sp-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--sp-text);
    background: var(--sp-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* --------------------------------------------------------------
   4. GUTENBERG ALIGNMENT FIXES
   -------------------------------------------------------------- */

/* Prevent Gutenberg's .entry-content from constraining our full-width blocks */
.sp-landing-page .wp-block-group.alignfull,
.sp-landing-page > .wp-block-group {
    margin-left:  0;
    margin-right: 0;
    max-width:    none;
    width:        100%;
}

/* Gutenberg adds negative margin on alignfull inside constrained containers */
.sp-landing-page .alignfull {
    margin-left:  calc(-1 * var(--wp--style--root--padding-left, 0px));
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
    width: auto;
    max-width: 100%;
}

/* Remove Gutenberg default block spacing inside landing page */
.sp-landing-page .wp-block-group + .wp-block-group {
    margin-top: 0;
}


/* --------------------------------------------------------------
   5. SECTION BACKGROUNDS
   -------------------------------------------------------------- */
.sp-section-dark  { background-color: var(--sp-dark);  }
.sp-section-dark-2{ background-color: var(--sp-dark-2); }
.sp-section-light { background-color: var(--sp-light); }
.sp-section-white { background-color: var(--sp-white); }
.sp-section-lime  { background-color: var(--sp-lime);  }

/* Lime section text */
.sp-section-lime .wp-block-heading,
.sp-section-lime h1, .sp-section-lime h2,
.sp-section-lime h3, .sp-section-lime h4 {
    color: var(--sp-dark);
}
.sp-section-lime p,
.sp-section-lime .wp-block-paragraph {
    color: rgba(34, 36, 38, 0.80);
}


/* --------------------------------------------------------------
   6. SECTION PADDING
   All section-level groups automatically get vertical padding.
   -------------------------------------------------------------- */
.sp-landing-page > .wp-block-group,
.sp-landing-page > .wp-block-cover,
.sp-landing-page > .wp-block-media-text {
    padding-top:    var(--sp-section-py);
    padding-bottom: var(--sp-section-py);
    padding-left:   24px;
    padding-right:  24px;
}

/* Hero is bigger */
.sp-landing-page > .wp-block-group.sp-hero {
    padding-top:    120px;
    padding-bottom: 120px;
    min-height:     88vh;
    display:        flex;
    flex-direction: column;
    justify-content: center;
}

/* Tighter padding option */
.sp-section-tight {
    padding-top:    var(--sp-section-py-md) !important;
    padding-bottom: var(--sp-section-py-md) !important;
}


/* --------------------------------------------------------------
   7. LAYOUT CONTAINERS
   -------------------------------------------------------------- */
.sp-container {
    max-width:   var(--sp-container);
    margin-left: auto;
    margin-right: auto;
    width:        100%;
}

.sp-narrow {
    max-width:    var(--sp-narrow);
    margin-left:  auto;
    margin-right: auto;
    width:        100%;
}

.sp-centered {
    text-align: center;
}

.sp-centered .wp-block-buttons {
    justify-content: center;
}


/* --------------------------------------------------------------
   8. TYPOGRAPHY
   -------------------------------------------------------------- */
.sp-landing-page h1,
.sp-landing-page h2,
.sp-landing-page h3,
.sp-landing-page h4,
.sp-landing-page h5,
.sp-landing-page h6,
.sp-landing-page .wp-block-heading {
    font-family:    var(--sp-font);
    font-weight:    800;
    line-height:    1.15;
    letter-spacing: -0.025em;
    color:          var(--sp-text);
    margin-top:     0;
    margin-bottom:  0.5em;
}

.sp-landing-page h1 { font-size: clamp(36px, 5.5vw, 64px); }
.sp-landing-page h2 { font-size: clamp(28px, 4vw,  48px);  }
.sp-landing-page h3 { font-size: clamp(20px, 2.5vw,28px);  }
.sp-landing-page h4 { font-size: clamp(17px, 2vw,  22px);  letter-spacing: -.01em; font-weight: 700; }

.sp-landing-page p,
.sp-landing-page .wp-block-paragraph {
    font-size:   16px;
    line-height: 1.7;
    color:       var(--sp-text-2);
    margin-top:  0;
}

.sp-landing-page .has-large-font-size  { font-size: clamp(19px, 2.5vw, 24px) !important; }
.sp-landing-page .has-x-large-font-size{ font-size: clamp(24px, 3.5vw, 36px) !important; }

/* Dark section typography */
.sp-section-dark .wp-block-heading,
.sp-section-dark h1, .sp-section-dark h2,
.sp-section-dark h3, .sp-section-dark h4 {
    color: var(--sp-white);
}
.sp-section-dark p,
.sp-section-dark .wp-block-paragraph {
    color: rgba(255, 255, 255, 0.70);
}
.sp-section-dark .wp-block-list li {
    color: rgba(255, 255, 255, 0.70);
}

/* Lists */
.sp-landing-page ul,
.sp-landing-page ol,
.sp-landing-page .wp-block-list {
    padding-left: 1.4em;
    margin: 0;
}
.sp-landing-page .wp-block-list li {
    margin-bottom: 0.5em;
    line-height: 1.65;
    color: var(--sp-text-2);
}


/* --------------------------------------------------------------
   9. SECTION LABEL / BADGE
   Usage: Add class "sp-badge" to a Paragraph block.
   -------------------------------------------------------------- */
.sp-badge p,
p.sp-badge,
.sp-section-label {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-size:       11px !important;
    font-weight:     700;
    letter-spacing:  0.10em;
    text-transform:  uppercase;
    color:           var(--sp-anthracite);
    background:      var(--sp-light-2);
    border-radius:   var(--sp-radius-pill);
    padding:         5px 14px;
    margin-bottom:   20px !important;
    width:           fit-content;
}

.sp-section-dark .sp-badge p,
.sp-section-dark p.sp-badge,
.sp-section-dark .sp-section-label {
    color:      var(--sp-lime);
    background: var(--sp-lime-pale);
}

.sp-section-lime .sp-badge p,
.sp-section-lime p.sp-badge {
    color:      var(--sp-dark);
    background: rgba(0,0,0,0.10);
}

/* Lime highlight in headline */
.sp-highlight {
    color: var(--sp-lime);
}


/* --------------------------------------------------------------
   10. BUTTONS
   -------------------------------------------------------------- */

/* Default Gutenberg button → lime green primary */
.sp-landing-page .wp-block-button__link,
.sp-landing-page .wp-element-button {
    font-family:     var(--sp-font) !important;
    font-size:       15px !important;
    font-weight:     700 !important;
    padding:         15px 30px !important;
    border-radius:   var(--sp-radius) !important;
    border:          none !important;
    cursor:          pointer;
    text-decoration: none;
    transition:      var(--sp-trans);
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    line-height:     1.2;
    letter-spacing: -0.01em;
    background:      var(--sp-lime) !important;
    color:           var(--sp-dark) !important;
    box-shadow:      none;
}
.sp-landing-page .wp-block-button__link:hover {
    background:  var(--sp-lime-dark) !important;
    transform:   translateY(-2px);
    box-shadow:  0 8px 24px var(--sp-lime-glow) !important;
}

/* Primary – same as default (lime) */
.sp-btn-primary .wp-block-button__link {
    background: var(--sp-lime) !important;
    color:      var(--sp-dark) !important;
}

/* Ghost – transparent with border */
.sp-btn-ghost .wp-block-button__link {
    background:  transparent !important;
    color:       var(--sp-muted) !important;
    border:      1.5px solid var(--sp-border) !important;
    box-shadow:  none !important;
}
.sp-btn-ghost .wp-block-button__link:hover {
    color:        var(--sp-text) !important;
    border-color: var(--sp-anthracite) !important;
    transform:    translateY(-1px);
    box-shadow:   none !important;
}

/* Ghost on dark sections */
.sp-section-dark .sp-btn-ghost .wp-block-button__link {
    color:        rgba(255,255,255,0.65) !important;
    border-color: rgba(255,255,255,0.20) !important;
}
.sp-section-dark .sp-btn-ghost .wp-block-button__link:hover {
    color:        var(--sp-white) !important;
    border-color: rgba(255,255,255,0.50) !important;
}

/* Dark – solid dark button */
.sp-btn-dark .wp-block-button__link {
    background: var(--sp-dark) !important;
    color:      var(--sp-white) !important;
}
.sp-btn-dark .wp-block-button__link:hover {
    background:  var(--sp-dark-2) !important;
    box-shadow:  var(--sp-shadow-md) !important;
}

/* White – for use on lime/dark backgrounds */
.sp-btn-white .wp-block-button__link {
    background: var(--sp-white) !important;
    color:      var(--sp-dark)  !important;
}

/* Small buttons */
.sp-btn-sm .wp-block-button__link {
    font-size: 13px !important;
    padding:   10px 20px !important;
}

/* Large buttons */
.sp-btn-lg .wp-block-button__link {
    font-size: 16px !important;
    padding:   18px 36px !important;
}

/* Buttons wrapper spacing */
.sp-landing-page .wp-block-buttons {
    gap:         12px;
    flex-wrap:   wrap;
    align-items: center;
    margin-top:  8px;
}


/* --------------------------------------------------------------
   11. CARDS
   -------------------------------------------------------------- */

/* Single card */
.sp-card {
    background:    var(--sp-white);
    border-radius: var(--sp-radius-lg);
    padding:       32px;
    box-shadow:    var(--sp-shadow);
    border:        1px solid var(--sp-border);
    height:        100%;
    transition:    var(--sp-trans);
}
.sp-card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--sp-shadow-md);
}

/* Card on dark section */
.sp-section-dark .sp-card {
    background:   var(--sp-dark-2);
    border-color: var(--sp-border-dark);
}
.sp-section-dark .sp-card h3,
.sp-section-dark .sp-card h4 {
    color: var(--sp-white);
}
.sp-section-dark .sp-card p {
    color: rgba(255,255,255,0.65);
}

/* Card on light section */
.sp-section-light .sp-card {
    background: var(--sp-white);
}

/* Accent top border on card */
.sp-card-accent {
    border-top: 3px solid var(--sp-lime) !important;
}

/* Icon inside card */
.sp-card-icon {
    width:         48px;
    height:        48px;
    background:    var(--sp-dark);
    border-radius: var(--sp-radius);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: 20px;
}
.sp-section-dark .sp-card-icon {
    background: var(--sp-dark-3);
}

/* Card grid – parent wrapper */
.sp-card-grid .wp-block-columns {
    gap:        24px !important;
    flex-wrap:  wrap;
    align-items: stretch;
}
.sp-card-grid .wp-block-column {
    display:        flex;
    flex-direction: column;
    min-width:      240px;
}

/* 2-col grid variant */
.sp-card-grid-2 .wp-block-columns {
    grid-template-columns: repeat(2, 1fr);
}


/* --------------------------------------------------------------
   12. HERO SECTION
   -------------------------------------------------------------- */
.sp-hero {
    position:   relative;
    overflow:   hidden;
    min-height: 88vh;
    display:    flex;
    flex-direction: column;
    justify-content: center;
}

/* Radial gradient glow in hero dark background */
.sp-hero.sp-section-dark::before {
    content:         '';
    position:        absolute;
    inset:           0;
    background:
        radial-gradient(ellipse 70% 55% at 75% 40%, rgba(202,218,55,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 10% 85%, rgba(202,218,55,0.04) 0%, transparent 60%);
    pointer-events:  none;
    z-index:         0;
}
.sp-hero.sp-section-dark > * { position: relative; z-index: 1; }

.sp-hero__title {
    font-size:      clamp(38px, 6vw, 68px) !important;
    letter-spacing: -0.035em !important;
    margin-bottom:  24px !important;
}

.sp-hero__subtitle {
    font-size:   clamp(16px, 2vw, 19px) !important;
    line-height: 1.7 !important;
    max-width:   560px;
    margin-bottom: 40px !important;
}


/* --------------------------------------------------------------
   13. FEATURE / BENEFITS GRID
   -------------------------------------------------------------- */
.sp-feature-grid .wp-block-columns {
    gap:   24px !important;
    flex-wrap: wrap;
}

/* Lime dot or marker before feature headings */
.sp-feature-item h3::before,
.sp-feature-item h4::before {
    content:        '●';
    color:          var(--sp-lime);
    font-size:      10px;
    margin-right:   10px;
    vertical-align: middle;
}


/* --------------------------------------------------------------
   14. PROCESS / STEPS
   -------------------------------------------------------------- */
.sp-process .wp-block-columns {
    gap:         0;
    align-items: start;
}
.sp-process .wp-block-column {
    padding:    0 20px;
    text-align: center;
    position:   relative;
}
.sp-process .wp-block-column:first-child { padding-left: 0; }
.sp-process .wp-block-column:last-child  { padding-right: 0; }

/* Connector line between steps */
.sp-process .wp-block-column:not(:last-child)::after {
    content:    '';
    position:   absolute;
    top:        36px;
    right:      -1px;
    width:      40%;
    height:     2px;
    background: linear-gradient(90deg, var(--sp-lime) 0%, transparent 100%);
    opacity:    0.25;
}

/* Step number */
.sp-step-number {
    display:        inline-block;
    font-size:      11px !important;
    font-weight:    800 !important;
    letter-spacing: 0.10em !important;
    color:          var(--sp-lime) !important;
    margin-bottom:  14px !important;
    text-transform: uppercase;
}

/* Step icon container */
.sp-step-icon {
    width:           56px;
    height:          56px;
    background:      var(--sp-dark-3);
    border:          2px solid rgba(202,218,55,0.3);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 20px;
}


/* --------------------------------------------------------------
   15. OFFER / PRICING CARD
   -------------------------------------------------------------- */
.sp-offer-card {
    background:     var(--sp-white);
    border-radius:  var(--sp-radius-xl);
    padding:        48px;
    box-shadow:     var(--sp-shadow-xl);
    border:         1px solid rgba(202,218,55,0.35);
    max-width:      580px;
    margin-left:    auto;
    margin-right:   auto;
    position:       relative;
}
.sp-offer-card::before {
    content:        '';
    position:       absolute;
    inset:          -1px;
    border-radius:  calc(var(--sp-radius-xl) + 1px);
    background:     linear-gradient(135deg, rgba(202,218,55,0.2) 0%, transparent 50%);
    pointer-events: none;
    z-index:        0;
}
.sp-offer-card > * { position: relative; z-index: 1; }

/* Offer price display */
.sp-price {
    font-size:      clamp(40px, 5vw, 56px) !important;
    font-weight:    800 !important;
    color:          var(--sp-text) !important;
    letter-spacing: -0.04em !important;
    line-height:    1 !important;
    margin-bottom:  4px !important;
}

/* Offer badge */
.sp-offer-badge {
    position:       absolute;
    top:            -16px;
    left:           50%;
    transform:      translateX(-50%);
    background:     var(--sp-lime);
    color:          var(--sp-dark);
    font-size:      11px;
    font-weight:    800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:        5px 18px;
    border-radius:  var(--sp-radius-pill);
    white-space:    nowrap;
}

/* Feature list inside offer card */
.sp-offer-card .wp-block-list {
    list-style: none;
    padding:    0;
    margin:     20px 0;
}
.sp-offer-card .wp-block-list li {
    padding:      10px 0 10px 28px;
    position:     relative;
    border-bottom: 1px solid var(--sp-border);
    font-size:    15px;
    color:        var(--sp-text);
    font-weight:  500;
}
.sp-offer-card .wp-block-list li:last-child {
    border-bottom: none;
}
.sp-offer-card .wp-block-list li::before {
    content:    '✓';
    position:   absolute;
    left:       0;
    color:      var(--sp-lime-dark);
    font-weight: 800;
    font-size:  14px;
}


/* --------------------------------------------------------------
   16. FAQ SECTION
   -------------------------------------------------------------- */
.sp-faq {
    max-width:  720px;
    margin:     0 auto;
}

.sp-faq .wp-block-group {
    border-bottom:  1px solid var(--sp-border);
    padding:        20px 0;
    background:     transparent !important;
    box-shadow:     none !important;
}
.sp-faq .wp-block-group:last-child {
    border-bottom: none;
}
.sp-faq .wp-block-group h3,
.sp-faq .wp-block-group h4 {
    font-size:    16px !important;
    font-weight:  700 !important;
    color:        var(--sp-text) !important;
    margin-bottom: 8px !important;
    cursor:       default;
}
.sp-faq .wp-block-group p {
    font-size:   14.5px !important;
    color:       var(--sp-muted) !important;
    line-height: 1.7 !important;
    margin:      0 !important;
}

/* Dark FAQ */
.sp-section-dark .sp-faq .wp-block-group {
    border-color: var(--sp-border-dark);
}
.sp-section-dark .sp-faq .wp-block-group h3,
.sp-section-dark .sp-faq .wp-block-group h4 {
    color: var(--sp-white) !important;
}
.sp-section-dark .sp-faq .wp-block-group p {
    color: rgba(255,255,255,0.60) !important;
}


/* --------------------------------------------------------------
   17. CTA SECTION
   -------------------------------------------------------------- */
.sp-cta {
    text-align: center;
    position:   relative;
    overflow:   hidden;
}

/* Decorative radial glow */
.sp-cta.sp-section-dark::after {
    content:    '';
    position:   absolute;
    width:      500px;
    height:     500px;
    background: radial-gradient(circle, rgba(202,218,55,0.07) 0%, transparent 70%);
    top:        -150px;
    right:      -150px;
    pointer-events: none;
}

.sp-cta__title {
    font-size:    clamp(32px, 5vw, 54px) !important;
    margin-bottom: 20px !important;
}

.sp-cta .wp-block-buttons {
    justify-content: center;
    margin-top:      32px;
}


/* --------------------------------------------------------------
   18. TRUST / QUOTE BLOCK
   -------------------------------------------------------------- */
.sp-trust {
    position: relative;
}

.sp-trust-quote {
    font-size:      clamp(20px, 2.8vw, 28px) !important;
    font-weight:    700 !important;
    line-height:    1.4 !important;
    letter-spacing: -0.02em !important;
}

.sp-trust-stats .wp-block-columns {
    gap: 40px !important;
}

.sp-stat-value {
    font-size:      clamp(28px, 3.5vw, 40px) !important;
    font-weight:    800 !important;
    color:          var(--sp-lime) !important;
    letter-spacing: -0.04em !important;
    line-height:    1 !important;
    margin-bottom:  6px !important;
}

.sp-stat-label {
    font-size:   13px !important;
    color:       var(--sp-anthracite) !important;
    font-weight: 500 !important;
}
.sp-section-dark .sp-stat-label {
    color: rgba(255,255,255,0.55) !important;
}


/* --------------------------------------------------------------
   19. CHECKLIST
   -------------------------------------------------------------- */
.sp-checklist .wp-block-list,
.sp-checklist ul {
    list-style: none !important;
    padding:    0 !important;
    margin:     0 !important;
}
.sp-checklist .wp-block-list li,
.sp-checklist ul li {
    display:      flex;
    align-items:  flex-start;
    gap:          12px;
    padding:      0 0 12px;
    font-size:    15px;
    font-weight:  500;
    color:        var(--sp-text);
    border:       none;
}
.sp-checklist .wp-block-list li::before,
.sp-checklist ul li::before {
    content:       '';
    flex-shrink:   0;
    width:         20px;
    height:        20px;
    background:    var(--sp-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l2.8 2.8L10 3' stroke='%23CADA37' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
    border-radius: 6px;
    margin-top:    2px;
}
.sp-section-dark .sp-checklist .wp-block-list li,
.sp-section-dark .sp-checklist ul li {
    color: rgba(255,255,255,0.80);
}
.sp-section-dark .sp-checklist .wp-block-list li::before {
    background-color: var(--sp-dark-3);
}


/* --------------------------------------------------------------
   20. LEAD MAGNET
   -------------------------------------------------------------- */
.sp-lead-magnet {
    border:        2px solid var(--sp-lime);
    border-radius: var(--sp-radius-lg);
    padding:       48px;
    text-align:    center;
    background:    var(--sp-white);
    max-width:     640px;
    margin:        0 auto;
}
.sp-section-dark .sp-lead-magnet {
    background:    var(--sp-dark-2);
    border-color:  rgba(202,218,55,0.35);
}


/* --------------------------------------------------------------
   21. SEPARATOR & SPACER
   -------------------------------------------------------------- */
.sp-landing-page .wp-block-separator,
.sp-landing-page hr {
    border:      none;
    border-top:  1px solid var(--sp-border);
    margin:      0;
}
.sp-section-dark .wp-block-separator,
.sp-section-dark hr {
    border-top-color: var(--sp-border-dark);
}

/* Lime separator */
.sp-separator-lime.wp-block-separator {
    border-top: 3px solid var(--sp-lime);
    width:      60px;
    margin:     0 0 28px;
    opacity:    1;
}
.sp-centered .sp-separator-lime {
    margin: 0 auto 28px;
}

.sp-landing-page .wp-block-spacer {
    display: block;
}


/* --------------------------------------------------------------
   22. IMAGES & LOGO
   -------------------------------------------------------------- */
.sp-landing-page .wp-block-image img {
    border-radius: var(--sp-radius);
    max-width:     100%;
    height:        auto;
}

/* Logo area – usually the first element in hero */
.sp-logo-area {
    margin-bottom: 48px;
}
.sp-logo-area .wp-block-image img {
    border-radius: 0;
    max-height:    52px;
    width:         auto;
}

/* Small logo in footer / trust sections */
.sp-logo-sm .wp-block-image img {
    max-height: 36px;
    width:      auto;
    border-radius: 0;
    opacity:    0.75;
}


/* --------------------------------------------------------------
   23. GUTENBERG BLOCK POLISH
   (applies globally inside .sp-landing-page)
   -------------------------------------------------------------- */

/* Cover block */
.sp-landing-page .wp-block-cover {
    min-height: 60vh;
}
.sp-landing-page .wp-block-cover__inner-container {
    max-width: var(--sp-container);
    margin:    0 auto;
    width:     100%;
    padding:   0 24px;
}

/* Media-Text block */
.sp-landing-page .wp-block-media-text {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.sp-landing-page .wp-block-media-text .wp-block-media-text__media img {
    border-radius: var(--sp-radius-lg);
}

/* Columns – remove default vertical margin */
.sp-landing-page .wp-block-columns {
    margin-bottom: 0;
    gap:           32px;
}
.sp-landing-page .wp-block-column {
    /* flex base handled per-context */
}

/* Group – clean base */
.sp-landing-page .wp-block-group:not([class*="sp-section"]):not([class*="sp-card"]):not([class*="sp-"]) {
    /* plain groups get no extra styling */
}

/* Quote block */
.sp-landing-page .wp-block-quote {
    border-left: 4px solid var(--sp-lime);
    padding-left: 24px;
}
.sp-landing-page .wp-block-quote p {
    font-size:   18px;
    font-style:  italic;
    line-height: 1.6;
}

/* Code block */
.sp-landing-page .wp-block-code {
    background:    var(--sp-dark);
    color:         var(--sp-white);
    border-radius: var(--sp-radius);
    padding:       24px;
    font-size:     14px;
}


/* --------------------------------------------------------------
   24. UTILITY HELPERS
   -------------------------------------------------------------- */

/* Lime text accent */
.sp-text-lime { color: var(--sp-lime) !important; }
.sp-text-dark  { color: var(--sp-dark) !important; }
.sp-text-muted { color: var(--sp-muted) !important; }
.sp-text-white { color: var(--sp-white) !important; }

/* Font weight helpers */
.sp-fw-400 { font-weight: 400 !important; }
.sp-fw-600 { font-weight: 600 !important; }
.sp-fw-800 { font-weight: 800 !important; }

/* Spacing helpers (apply to Spacer or Group blocks) */
.sp-mt-0 { margin-top:    0 !important; }
.sp-mb-0 { margin-bottom: 0 !important; }

/* No padding variant */
.sp-no-padding { padding: 0 !important; }

/* Rounded image */
.sp-rounded img { border-radius: var(--sp-radius-lg) !important; }
.sp-rounded-full img { border-radius: 50% !important; }

/* Bordered card */
.sp-bordered {
    border: 1px solid var(--sp-border) !important;
}
.sp-section-dark .sp-bordered {
    border-color: var(--sp-border-dark) !important;
}

/* Overflow hidden (for cards with background images) */
.sp-overflow-hidden { overflow: hidden; }


/* --------------------------------------------------------------
   25. RESPONSIVE
   -------------------------------------------------------------- */

/* ── Large Desktop (≤ 1280px) ── */
@media (max-width: 1280px) {
    .sp-landing-page > .wp-block-group,
    .sp-landing-page > .wp-block-cover {
        padding-left:  32px;
        padding-right: 32px;
    }
}

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
    :root {
        --sp-section-py: 72px;
    }

    .sp-landing-page > .wp-block-group.sp-hero {
        padding-top:    80px;
        padding-bottom: 80px;
        min-height:     auto;
    }

    .sp-landing-page .wp-block-media-text {
        grid-template-columns: 1fr;
    }
    .sp-landing-page .wp-block-media-text .wp-block-media-text__media {
        order: -1;
    }

    .sp-process .wp-block-column::after {
        display: none;
    }

    .sp-offer-card {
        padding: 36px;
    }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
    :root {
        --sp-section-py: 56px;
    }

    .sp-landing-page > .wp-block-group,
    .sp-landing-page > .wp-block-cover {
        padding-left:  20px;
        padding-right: 20px;
    }

    .sp-landing-page .wp-block-columns {
        flex-direction: column !important;
        gap:            24px !important;
    }

    .sp-landing-page .wp-block-column {
        width: 100% !important;
        min-width: unset !important;
    }

    /* Stack card grid */
    .sp-card-grid .wp-block-columns,
    .sp-feature-grid .wp-block-columns,
    .sp-process .wp-block-columns {
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Buttons full-width on mobile */
    .sp-landing-page .wp-block-buttons {
        flex-direction: column;
        align-items:    stretch;
    }
    .sp-landing-page .wp-block-button {
        width: 100%;
    }
    .sp-landing-page .wp-block-button__link {
        width:          100% !important;
        justify-content: center;
        text-align:     center;
    }

    .sp-offer-card {
        padding: 28px 20px;
    }

    .sp-hero__title {
        font-size: 36px !important;
    }

    /* Hero columns – text on top, visual below */
    .sp-hero .wp-block-columns {
        flex-direction: column !important;
    }

    .sp-lead-magnet {
        padding: 32px 20px;
    }

    .sp-trust .wp-block-columns {
        flex-direction: column !important;
        gap: 32px !important;
    }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .sp-landing-page > .wp-block-group,
    .sp-landing-page > .wp-block-cover {
        padding-left:  16px;
        padding-right: 16px;
    }

    .sp-landing-page h1 { font-size: 30px; }
    .sp-landing-page h2 { font-size: 26px; }

    .sp-badge p, p.sp-badge { font-size: 10px !important; }

    .sp-hero__subtitle {
        font-size: 15px !important;
    }
}


/* ==============================================================
   LEGACY SUPPORT
   Styles below support the old page-landing.php hard-coded
   template. They do not affect the new sp-* system above.
   ============================================================== */

/* Keep all .lp-* classes from v1 intact */
/* (no changes needed — they are separate class namespaces) */