/* =========================================================================
   SprutCAM Special Offer Landing — standalone styles
   All rules are namespaced under .scso- to avoid clashing with theme leftovers.
   ========================================================================= */

/* --- Scoped reset --- */
.scso-body,
.scso-body *,
.scso-body *::before,
.scso-body *::after { box-sizing: border-box; }
.scso-body {
    margin: 0;
    padding: 0;
    background: #080c11;
    color: #fff;
    font-family: 'Hind Madurai', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.scso-body img { max-width: 100%; height: auto; display: block; }
.scso-body a { color: inherit; text-decoration: none; }
.scso-body button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.scso-body h1, .scso-body h2, .scso-body h3, .scso-body h4, .scso-body p { margin: 0; }
html { scroll-behavior: smooth; }   /* smooth anchor jumps for the hero scroll-down indicator */

/* Hero scroll-indicator — mouse-shaped pill with a dot that falls down and fades.
   Lives inside .scso-hero-content (flex column) so it flows with the layout
   automatically across viewport sizes. */
.scso-hero-scroll {
    width: 28px;
    height: 48px;
    margin-top: 70px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
    transition: border-color .2s ease;
}
.scso-hero-scroll:hover { border-color: rgba(255, 255, 255, 0.9); }
.scso-hero-scroll-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: scsoScrollDot 1.8s ease-in-out infinite;
}
@keyframes scsoScrollDot {
    0%   { opacity: 0; transform: translateY(0); }
    20%  { opacity: 1; transform: translateY(2px); }
    80%  { opacity: 1; transform: translateY(18px); }
    100% { opacity: 0; transform: translateY(22px); }
}
@media (prefers-reduced-motion: reduce) {
    .scso-hero-scroll-dot { animation: none; }
}

:root {
    --scso-accent: #00cb9a;
    --scso-accent-2: #2f8cff;
    --scso-accent-3: #8284fa;
    --scso-grad: linear-gradient(99deg, #00cb9a -0.77%, #2f8cff 65.22%, #8284fa 95.41%);
    --scso-grad-text: linear-gradient(90deg, #00cb9a 0%, #2f8cff 60%, #8284fa 100%);
    --scso-bg: #080c11;
    --scso-bg-2: #0a0f1f;
}

/* --- Containers — project-wide rule: content max 1224px.
   30px side gutters are applied by each SECTION (padding: Y 30px), not here. --- */
.scso-container       { max-width: 1224px; margin: 0 auto; padding: 0; }
.scso-container-narrow{ max-width: 960px;  margin: 0 auto; padding: 0; }
.scso-container-form  { max-width: 720px;  margin: 0 auto; padding: 0; position: relative; z-index: 1; }

/* --- Typography --- */
.scso-h2 {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}
.scso-h2-center { text-align: center; }
.scso-h2-dark   { color: #13151b; }
.scso-h2-faq    { font-size: clamp(28px, 3vw, 40px); margin-bottom: 48px; }

.scso-grad-text {
    background: var(--scso-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Buttons (Figma spec) --- */
.scso-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 21px;
    border-radius: 999px;
    padding: 16px 32px;
    color: #fff;
    font-family: 'Hind Madurai', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    border: 0;
    transition: transform .15s ease, box-shadow .2s ease;
}
.scso-btn svg { width: 14px; height: 12px; }
.scso-btn-primary {
    /* Dark translucent pill with gradient border (pseudo-element mask trick). */
    position: relative;
    background: rgba(37, 41, 53, 0.40);
    border: 0;
    border-radius: 100px;
    box-shadow: 0 0 10px 0 rgba(0, 203, 154, 0.25);
}
.scso-btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;                      /* border thickness */
    border-radius: 100px;
    background: var(--scso-grad);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.scso-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 40px rgba(0, 203, 154, 0.5); }
.scso-btn-compact { padding: 12px 36px; font-size: 16px; gap: 12px; }

.scso-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 14px;
    line-height: 1;
    color: #fff;
}
.scso-pill-outline {
    border: 1px solid var(--scso-accent);
    background: rgba(107, 165, 239, 0.1);
    box-shadow: 0 0 10px rgba(0, 203, 154, 0.25);
}
.scso-pill-outline:hover { background: rgba(0, 203, 154, 0.15); }
.scso-pill-green { background: var(--scso-accent); }
.scso-pill-dark  { background: #29324f; }
.scso-pill svg { width: 14px; height: 12px; }

/* --- Header --- */
.scso-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding: 0 30px;
    background: rgba(8, 12, 17, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.scso-header-inner {
    max-width: 1224px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0;
    gap: 24px;
}
.scso-logo { display: flex; align-items: center; }
.scso-logo .scso-logo-img { display: block; height: 35px; width: auto; }
.scso-logo .scso-logo-img--icon { display: none; }        /* swapped in on mobile */
.scso-header-cta { padding: 10px 24px; font-size: 16px; line-height: 20px; gap: 12px; }

/* --- Hero --- */
.scso-hero {
    position: relative;
    overflow: hidden;
    background: var(--scso-bg-2);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Top padding tracks the live header height (published by header-height.js)
       so the hero never hides behind a wrapped/multiline header. */
    padding: calc(var(--scso-header-h, 65px) + 80px) 30px 80px;
}
.scso-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right center;   /* keep the circle (right side) always in view */
    opacity: 0.9;
}
.scso-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(8, 12, 17, 0.35) 100%);
}
.scso-hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1;
}
.scso-hero-glow {
    position: absolute;
    left: 50%;
    top: 65%;
    transform: translateX(-50%);
    width: 900px;
    height: 180px;
    background: #21395e;
    filter: blur(120px);
    opacity: 0.75;
    pointer-events: none;
}
.scso-hero-content {
    position: relative;
    z-index: 10;
    max-width: 980px;
    /* Shift the whole block slightly below the vertical centre so it sits
       under the ring in the bg. Kept conservative (8vh) so with the fixed
       header's padding-top compensation the hero still fits in 100vh. */
    margin: 8vh auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.scso-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 5.6vw, 70px);
    line-height: 1.0857;  /* 76/70 from Figma */
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
    color: #fff;
    text-align: center;
    margin: 0;
}
.scso-hero-subtitle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(105, 143, 182, 0.40);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-family: 'Hind Madurai', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 25px;
    text-align: center;
    max-width: 770px;
}
/* Hero vertical rhythm (Figma): title → 15px → subtitle → 84px → CTA.
   .scso-hero-content prefix raises specificity above the .scso-body p reset. */
.scso-hero-content .scso-hero-subtitle { margin-top: 15px; }
.scso-hero-content .scso-btn            { margin-top: 84px; }

/* --- Evolve (dark section, natural height, base anchored to bottom) --- */
.scso-evolve {
    position: relative;
    background: rgba(8, 12, 17, 1);
    color: #fff;
    padding: 96px 30px 0;   /* bottom = 0: slider image flush with bottom edge */
    overflow: hidden;
}
.scso-evolve .scso-h2 { color: #fff; margin-bottom: 90px; }
.scso-evolve .scso-container {
    position: relative;
    z-index: 1;
}

/* Dark base panel — pinned to the bottom of the section as an absolute
   layer so slider images can overlap it (slider z-index 2, base z-index 0).
   Width matches the project container (1224px max). */
.scso-evolve-base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1224px;
    height: 350px;
    background: #131723;
    border-radius: 20px 20px 0 0;
    z-index: 0;
}

/* Cloud-like glow anchored to the top-right corner of the section. */
.scso-evolve-glow {
    position: absolute;
    top: -39%;
    right: -42%;
    width: 100%;
    height: 520px;
    background: radial-gradient(ellipse at center, rgba(80, 98, 155, 1) 0%, rgba(0, 0, 0, 0) 65%);
    opacity: 0.85;
    pointer-events: none;
    filter: blur(20px);
    z-index: 0;
}

/* Glow layer — rendered as a div with this class when content.php sets
   type: 'glow'. It's a normal .scso-evolve-layer (so it swoops in with the
   same translate animation as the image layers), plus a radial gradient. */
.scso-evolve-layer-glow {
    background: radial-gradient(ellipse at center, rgba(80, 98, 155, 1) 0%, rgba(80, 98, 155, 0.8) 35%, rgba(0, 0, 0, 0) 75%);
    filter: blur(30px);
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
}

/* ── Evolve slider layout: panel centred on screen, tabs absolute to its left ── */
.scso-evolve-slider {
    position: relative;
    max-width: 900px;
    margin: 0 auto;            /* spacer handles top offset */
    z-index: 2;                /* above the base panel */
}
@media (max-width: 1200px) {
    .scso-evolve-slider { max-width: 820px; }
}

/* ── Tabs (vertical column of pill buttons, absolute to the left of panel) ── */
.scso-evolve-tabs {
    position: absolute;
    top: 0;
    right: calc(100% + 40px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 3;
}
@media (max-width: 1100px) {
    .scso-evolve-tabs {
        position: static;
        margin: 0 auto 24px;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}
.scso-evolve-tab {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    padding: 10px 22px;
    font-family: 'Hind Madurai', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    min-width: 130px;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.scso-evolve-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.35);
}
.scso-evolve-tab.is-active {
    background: var(--scso-accent);
    border-color: var(--scso-accent);
    color: #fff;
    box-shadow: 0 0 18px rgba(0, 203, 154, 0.4);
}

/* ── Panel (stacked slides with image + tooltip overlay) ── */
.scso-evolve-panel {
    position: relative;
    display: grid;
    grid-template-areas: "stack";
    overflow: visible;                         /* layer windows can bleed left/right */
    clip-path: inset(0 -100vw 0 -100vw);       /* but clip vertically — slides swoop in from below without poking through */
    aspect-ratio: 1224 / 500;
}
.scso-evolve-slide {
    grid-area: stack;
    position: relative;
    transform: translateY(100%);               /* inactive: parked below panel */
    transition: transform 700ms cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.scso-evolve-slide.is-active {
    transform: translateY(0);
    pointer-events: auto;
    z-index: 2;
}
/* ENCY (layered) slide — same translateY swoop as a single-image slide,
   so both slides retreat at the same visual speed. Layer-level translations
   add parallax on entrance, and are synced to slide duration on retreat. */
/* Single-image slides (SprutCAM) — image fills the panel. */
.scso-evolve-slide:not(.scso-evolve-slide--layered) > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 8px 8px 0 0;    /* rounded top only, flat bottom meets base */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 0;
    box-shadow: 19px 4px 20px 0 rgba(0, 0, 0, 0.20);
}

/* Layered slide (ENCY) — each .scso-evolve-layer is positioned absolutely
   via inline top/left/width/z-index/transition-duration/delay from PHP.
   When the slide is inactive, layers park 120% below the panel and swoop up
   at their individual speeds. */
.scso-evolve-slide--layered {
    position: relative;   /* containing block for absolute layers */
}
.scso-evolve-layer {
    position: absolute;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 19px 4px 20px 0 rgba(0, 0, 0, 0.20);
    /* 200% guarantees every layer lands fully below the panel even when it's
       short (e.g. CAM Agent is ~106px and starts near the bottom of the panel). */
    transform: translateY(200%);
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    /* transition-duration & transition-delay come from inline style */
}
.scso-evolve-slide--layered.is-active .scso-evolve-layer {
    transform: translateY(0);
}
/* On retreat, layers transition at the same duration as the slide itself
   (700ms), so the compound motion doesn't overshoot the slide's speed.
   !important overrides each layer's inline transition-duration/delay set
   for the parallax entrance. */
.scso-evolve-slide--layered:not(.is-active) .scso-evolve-layer {
    transition-duration: 700ms !important;
    transition-delay: 0ms !important;
}

/* ── Floating tooltips (pill-shaped) positioned in % of the image ── */
.scso-evolve-tooltips {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;                   /* above all layers */
    opacity: 0;
    transition: opacity 350ms ease;
    transition-delay: 0ms;
}
.scso-evolve-slide.is-active .scso-evolve-tooltips {
    opacity: 1;
    transition-delay: 250ms;       /* appear after layers start swooping in */
}
/* 1-to-1 port of encycam horizontal-slider .tooltip — encycam uses top-left
   anchor (no translate). font-size bumped down per spec (14 instead of 16),
   line-height kept at 24px so the pill height matches the arrow clip-paths. */
.scso-evolve-tooltip {
    position: absolute;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 100px;
    background: #3D8BEC;
    color: #fff;
    font-family: 'Hind Madurai', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
}

/* ── Tooltip arrows (clip-path paths from encycam horizontal-slider) ── */
.scso-evolve-tooltip--arrow-top-left::before,
.scso-evolve-tooltip--arrow-top-right::before,
.scso-evolve-tooltip--arrow-bottom-left::after,
.scso-evolve-tooltip--arrow-bottom-right::after {
    content: "";
    position: absolute;
    width: 24px;
    background: #3D8BEC;
}
.scso-evolve-tooltip--arrow-top-left::before {
    bottom: calc(100% - 9px);
    left: -3px;
    height: 25px;
    clip-path: path("M4.70839 19.642L4.69546 5.11478C4.69477 4.33498 5.54722 3.85448 6.21399 4.25883L18.6357 11.7916C19.2896 12.1882 19.2684 13.1337 18.5722 13.4504C16.1397 14.5566 13.8653 15.0647 11.9219 16.1601C9.97856 17.2556 8.36624 18.9383 6.16034 20.4466C5.52899 20.8783 4.70907 20.4068 4.70839 19.642Z");
}
.scso-evolve-tooltip--arrow-top-right::before {
    bottom: calc(100% - 9px);
    right: -3px;
    height: 25px;
    clip-path: path("M19.3893 19.642L19.4022 5.11478C19.4029 4.33498 18.5504 3.85448 17.8837 4.25883L5.46201 11.7916C4.80803 12.1882 4.82922 13.1337 5.52543 13.4504C7.95795 14.5566 10.2324 15.0647 12.1757 16.1601C14.1191 17.2556 15.7314 18.9383 17.9373 20.4466C18.5687 20.8783 19.3886 20.4068 19.3893 19.642Z");
}
.scso-evolve-tooltip--arrow-bottom-left::after {
    top: calc(100% - 9px);
    left: -3px;
    height: 26px;
    clip-path: path("M4.70839 5.71006L4.69546 20.2373C4.69477 21.0171 5.54722 21.4976 6.21399 21.0932L18.6357 13.5605C19.2896 13.1639 19.2684 12.2183 18.5722 11.9017C16.1397 10.7954 13.8653 10.2873 11.9219 9.19191C9.97856 8.09649 8.36624 6.41376 6.16034 4.90546C5.52899 4.47377 4.70907 4.94523 4.70839 5.71006Z");
}
.scso-evolve-tooltip--arrow-bottom-right::after {
    top: calc(100% - 9px);
    right: -3px;
    height: 26px;
    clip-path: path("M19.3893 5.71006L19.4022 20.2373C19.4029 21.0171 18.5504 21.4976 17.8837 21.0932L5.46201 13.5605C4.80803 13.1639 4.82922 12.2183 5.52543 11.9017C7.95795 10.7954 10.2324 10.2873 12.1757 9.19191C14.1191 8.09649 15.7314 6.41376 17.9373 4.90546C18.5687 4.47377 19.3886 4.94523 19.3893 5.71006Z");
}
@media (max-width: 540px) {
    .scso-evolve-tooltip {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ── Pagination dots under the panel ── */
.scso-evolve-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 36px;
    position: relative;
    z-index: 1;
}
.scso-evolve-dots button {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: background .2s ease, width .3s ease;
}
.scso-evolve-dots button:hover { background: rgba(255, 255, 255, 0.45); }
.scso-evolve-dots button.is-active {
    background: var(--scso-accent);
    width: 28px;
}

/* --- Compare (4 cards on white) --- */
.scso-compare {
    background: #fff;
    color: #252935;
    padding: 70px 30px 120px;
}
.scso-compare-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 1100px) { .scso-compare-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .scso-compare-grid { grid-template-columns: 1fr; } }
.scso-compare-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 26px;
    border-radius: 16px;
    border: 4px solid;
    background: #EEEFF1;
    border-color: #D5D5D5;
    color: #252935;
}
.scso-compare-card p {
    margin: 0;
    color: #252935;
    font-family: 'Hind Madurai', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}
.scso-compare-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #252935;
    margin-bottom: 4px;
}
.scso-compare-card-icon svg,
.scso-compare-card-icon img { width: 100%; height: 100%; display: block; }
/* .scso-body prefix bumps specificity above the `.scso-body img` reset
   so width/max-width here actually win. */
.scso-body .scso-compare-card-img {
    align-self: flex-start;          /* left edge = text left */
    margin-top: 20px;                /* gap from the paragraph above */
    margin-bottom: -32px;            /* extend past card's bottom edge (clipped by overflow) */
    width: 120%;                     /* wider than card's content area → bleeds right */
    max-width: none;
    height: auto;
    border: 0;
    border-radius: 5px 0 0 0;        /* only the top-left corner is rounded */
}
.scso-compare-card--ency { overflow: hidden; }  /* clip the part that juts past the right edge */

/* Tones — border colours by position */
.scso-compare-card--neutral { background: #EEEFF1; border-color: #D5D5D5; }
.scso-compare-card--warn    { background: #EEEFF1; border-color: #F97E7E; }
.scso-compare-card--accent  { background: #EEEFF1; border-color: #00CB9A; }
.scso-compare-card--ency {
    background: linear-gradient(165deg, #1b2a55 0%, #0a0f1f 100%);
    border-color: #1269D9;
    color: #fff;
    box-shadow: 0 0 30px rgba(18, 105, 217, 0.25);
}
.scso-compare-card--ency p { color: #fff; }
.scso-compare-card--ency .scso-compare-card-icon { color: #fff; }

/* ENCY text mark — used as the icon for the ENCY card */
.scso-ency-mark {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 0.9;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: #fff;
}
.scso-ency-mark span { display: block; }
.scso-ency-mark span:first-child {
    background: var(--scso-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Pricing --- */
.scso-pricing {
    background: #0A0F15;
    padding: 120px 30px;
    text-align: center;
}
.scso-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 80px;
    margin-bottom: 80px;
}
@media (max-width: 767px) { .scso-pricing-grid { grid-template-columns: 1fr; } }
.scso-price-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 0;
    background: rgba(255, 255, 255, 0.02);
    padding: 50px 32px 60px;
    display: flex;
    align-items: center;
    text-align: left;
}
.scso-price-card-text { position: relative; z-index: 1; max-width: 100%; }
.scso-body .scso-price-card-img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
}
.scso-price-label {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    text-wrap: nowrap;
    margin-bottom: 12px !important;
}
.scso-price-amount {
    color: #00CB9A;
    font-family: 'Hind Madurai', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
}
.scso-price-currency {
    font-weight: 600;
    margin-left: 4px;
}
/* note + CTA live in a wrapper at section level (outside .scso-container-narrow)
   so they centre against the viewport, not the 960px card container. */
.scso-pricing-footer {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.scso-pricing-note,
.scso-difference-note {
    margin: 0;
    color: #fff;
    font-family: 'Hind Madurai', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 25px;
    text-align: center;
}
.scso-pricing .scso-btn { margin-top: 70px; }

/* --- Difference --- */
.scso-difference {
    padding: 120px 30px;
    background: #080C11;
}
.scso-difference .scso-container { max-width: 1000px; }   /* section-specific narrower container */
.scso-difference .scso-h2 { margin-bottom: 60px; }
.scso-difference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px;                 /* between columns */
    align-items: stretch;      /* equal-height columns */
}
/* Column is a flex-column so the list can grow to match the taller column. */
.scso-difference-col { display: flex; flex-direction: column; }
.scso-difference-col .scso-difference-list { flex: 1; }
@media (max-width: 960px) { .scso-difference-grid { grid-template-columns: 1fr; } }

/* .scso-body prefix raises specificity above the h3 margin reset. */
.scso-body .scso-difference-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-family: 'Hind Madurai', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 25px;
    margin: 0 0 24px 0;
    padding-left: 0;
}
.scso-difference-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.scso-difference-badge svg { width: 30px; height: 30px; }
.scso-difference-badge--risk { background: #F59E0B; }
.scso-difference-badge--adv  { background: #00CB9A; }

/* Single card per column with a list of items inside */
.scso-difference-list {
    list-style: none;
    margin: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;                 /* between rows */
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
}
.scso-difference-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.scso-difference-mark {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.scso-difference-mark svg { width: 100%; height: 100%; }
.scso-difference-mark--risk { color: #F59E0B; }
.scso-difference-mark--adv  { color: #00CB9A; }
.scso-card-title {
    color: #fff;
    font-family: 'Hind Madurai', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin: 0;
}
.scso-card-text {
    color: rgba(255, 255, 255, 0.60);
    font-family: 'Hind Madurai', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 4px 0 0 0;
}

/* Note + CTA wrapper — sits outside .scso-container so it centres against
   the full viewport, like .scso-pricing-footer does. */
.scso-difference-footer {
    max-width: 700px;
    margin: 120px auto 0;       /* 120 from the grid above */
    text-align: center;
}
/* .scso-difference-note styles merged with .scso-pricing-note above */
.scso-difference-cta {
    text-align: center;
    margin-top: 32px;           /* 32 from note to CTA */
}
.scso-difference-cta .scso-btn { font-size: 16px; padding: 12px 28px; }

/* --- How it works --- */
.scso-how {
    background: #fff;
    color: #13151b;
    padding: 120px 30px;
    text-align: center;
}
.scso-how-subtitle-wrap {
    max-width: 564px;
    margin: 24px auto 0;
    text-align: center;
}
.scso-how-subtitle {
    margin: 0;
    color: #252935;
    font-family: 'Hind Madurai', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}
.scso-steps-wrap {
    position: relative;
    margin-top: 80px;
    margin-bottom: 70px;
}
/* Gradient connector running horizontally through the vertical centre of the cards. */
.scso-steps-connector {
    position: absolute;
    top: 50%;
    left: 70px;
    right: 70px;
    height: 4px;
    transform: translateY(-50%);
    background: linear-gradient(to right, #49E5BD, #3D8BEC);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 1100px) and (min-width: 541px) { .scso-steps-connector { display: none; } }
/* On 1-col layout (≤540px) the connector runs vertically through the centre of the stacked cards. */
@media (max-width: 540px) {
    .scso-steps-connector {
        top: 40px;
        bottom: 40px;
        left: 50%;
        right: auto;
        width: 4px;
        height: auto;
        transform: translateX(-50%);
        background: linear-gradient(to bottom, #49E5BD, #3D8BEC);
    }
}
.scso-steps-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    text-align: left;
    position: relative;
    z-index: 1;
}
@media (max-width: 1100px) { .scso-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .scso-steps-grid { grid-template-columns: 1fr; } }
.scso-step-card {
    position: relative;
    border-radius: 12px;
    border: 0;
    background: #EEEFF1;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.scso-step-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.scso-step-title {
    flex: 1;
    margin: 0;
    padding-right: 4px;
    color: #13151b;
    font-family: 'Hind Madurai', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}
.scso-step-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #49E5BD, #3D8BEC);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', 'Hind Madurai', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}
.scso-step-text {
    margin: 0;
    color: rgba(37, 41, 53, 0.6);
    font-family: 'Hind Madurai', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}
.scso-how-fine-print {
    margin: 0;
    color: rgba(37, 41, 53, 0.6);
    font-family: 'Hind Madurai', sans-serif;
    font-size: 16px;
    text-align: left;
}

/* --- Form section --- */
/* Form section — frame with gradient SVG background, rounded-bottom, shadow. */
.scso-form-section {
    background: #080c11;
    padding: 0;
}
.scso-form-frame {
    position: relative;
    max-width: 1224px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.35);
    background: #080c11;
}
.scso-form-gradient-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.scso-form-inner {
    position: relative;
    z-index: 1;
    padding: 160px 96px 64px;
}
@media (max-width: 960px) { .scso-form-inner { padding: 128px 48px 64px; } }
@media (max-width: 640px) { .scso-form-inner { padding: 96px 24px 48px; } }

.scso-form-header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.scso-body .scso-form-title {
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    text-align: center;
}
@media (max-width: 640px) { .scso-body .scso-form-title { font-size: 32px; } }
.scso-form-subtitle {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-family: 'Hind Madurai', sans-serif;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
}
.scso-form-wrap {
    margin: 56px auto 0;
    max-width: 618px;
    padding: 40px;
    border-radius: 16px;
    background: rgba(113, 176, 255, 0.10);
}

/* CF7 style overrides — inlined from encycam.com voxel-child/CF7-custom-style.min.css
   Scoped under .scso-form-wrap; labels forced white for the dark form panel. */
.scso-form-wrap .awb-menu__description,
.scso-form-wrap .city-field,
.scso-form-wrap .country_code,
.scso-form-wrap .device-field,
.scso-form-wrap .site-name-field,
.scso-form-wrap .wpcf7-form-control-wrap input[type=checkbox],
.scso-form-wrap .wpcf7-response-output.wpcf7-display-none,
.scso-form-wrap input.custom-checkbox { display: none; }

.scso-form-wrap .custom-style-cf7 p { margin-bottom: 0; }
.scso-form-wrap .custom-style-cf7 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.scso-form-wrap .custom-style-cf7 > div { width: 100%; margin: 0; }
.scso-form-wrap .cf7-cf-turnstile { margin-top: 20px!important; }

.scso-form-wrap #sc-form-message,
.scso-form-wrap .country-select,
.scso-form-wrap .intl-tel-input,
.scso-form-wrap input.wpcf7-form-control {
    color: #333;
    margin-top: 8px;
}

@media (min-width: 770px) {
    .scso-form-wrap .custom-width-50 { width: calc(50% - 10px) !important; }
}

.scso-form-wrap input.wpcf7-form-control {
    padding: 0 0 0 12px;
    width: 100%;
    min-height: 44px;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

.scso-form-wrap .wpcf7 label,
.scso-form-wrap .wpcf7-form textarea {
    font-family: "Hind Madurai";
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    word-spacing: 0;
}
.scso-form-wrap .wpcf7 label { color: #fff; }
.scso-form-wrap .wpcf7-form textarea { color: #252935; }
.scso-form-wrap .wpcf7-textarea { color: #fff !important; }

.scso-form-wrap #sc-form-message { padding: 12px; }
.scso-form-wrap .country-list { border-radius: 6px; margin-top: 8px !important; }
.scso-form-wrap .wpcf7-not-valid-tip,
.scso-form-wrap .wpcf7-radio { margin-top: 8px; }
.scso-form-wrap .wpcf7 label { font-size: 14px; line-height: 22px; }
.scso-form-wrap input[type=checkbox] { margin: 0; }

.scso-form-wrap .wpcf7-form input[type=submit]:not(.fusion-button-span-yes) {
    width: 100%;
    background: linear-gradient(153.652deg, #00CB9A 0.77%, #1269D9 105.49%);
    border: none;
    border-radius: 28px;
    color: #fff;
    padding: 12px;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0;
    box-shadow: 0 0 10px 0 rgba(0, 203, 154, 0.25);
    transition: transform .15s ease, box-shadow .2s ease;
}
.scso-form-wrap .wpcf7-form input[type=submit]:not(.fusion-button-span-yes):hover {
    transform: scale(1.01);
    box-shadow: 0 0 20px rgba(0, 203, 154, 0.45);
}

.scso-form-wrap .wpcf7-list-item { margin-left: 0 !important; margin-bottom: 5px; }
.scso-form-wrap .wpcf7-radio { display: flex; flex-direction: column; }
.scso-form-wrap .custom-checkboxes,
.scso-form-wrap .form-with-custom-checkboxes-radios {
    display: flex;
    flex-direction: column;        /* stack radios vertically, not row/200px columns */
    max-width: none;
}
.scso-form-wrap .form-with-custom-checkboxes-radios .wpcf7-list-item { width: 100%; }

.scso-form-wrap .wpcf7-form .wpcf7-radio label { position: relative; cursor: pointer; }
.scso-form-wrap .wpcf7-form .wpcf7-radio input[type=radio] { position: relative; visibility: hidden; }
.scso-form-wrap .wpcf7-form .wpcf7-radio input[type=radio] + span:before {
    display: block;
    position: absolute;
    content: "";
    border-radius: 100%;
    height: 12px;
    width: 12px;
    top: 3px;
    border: 1px solid #00cb9a;
}
.scso-form-wrap .wpcf7-form .wpcf7-radio input[type=radio] + span:after {
    display: block;
    position: absolute;
    content: "";
    border-radius: 100%;
    height: 6px;
    width: 6px;
    top: 6px;
    left: 3px;
    visibility: hidden;
}
.scso-form-wrap .wpcf7-form .wpcf7-radio input[type=radio]:checked + span:after {
    background: #00cb9a;
    visibility: visible;
}

.scso-form-wrap .wpcf7-select-parent .select-arrow { height: 34px !important; }

.scso-form-wrap .wpcf7-form textarea {
    width: 100%;
    height: 90px;
    padding: 8px 15px;
    box-sizing: border-box;
    margin-right: 0;
    background-color: transparent;
    border-radius: 6px;
    border: 1px solid #ced4da;
    font-size: 16px;
    line-height: 20px;
}
.scso-form-wrap .wpcf7-text:focus,
.scso-form-wrap .wpcf7-textarea:focus { outline: 0; }
.scso-form-wrap .wpcf7-form textarea:focus,
.scso-form-wrap input.wpcf7-form-control:focus { border: 1px solid #00cb9a; }

.scso-form-wrap .wpcf7 form.aborted .wpcf7-response-output,
.scso-form-wrap .wpcf7 form.failed .wpcf7-response-output {
    border-radius: 5px;
    color: #db4b68;
    background-color: rgba(219, 75, 104, .1);
    border: 1px solid #db4b68;
    padding: 20px;
    margin-bottom: 40px;
}
.scso-form-wrap .wpcf7 .wpcf7-form.sent .wpcf7-response-output {
    border-radius: 5px;
    color: #12b878;
    background-color: rgba(18, 184, 120, .1);
    border: 1px solid #12b878;
    padding: 20px;
    margin-bottom: 40px;
}
.scso-form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.scso-form-wrap .wpcf7 form.payment-required .wpcf7-response-output,
.scso-form-wrap .wpcf7 form.unaccepted .wpcf7-response-output {
    border-radius: 5px;
    color: #ffb900;
    background-color: rgba(255, 185, 0, .1);
    border: 1px solid #ffb900;
    padding: 20px;
    margin-bottom: 40px;
}
.scso-form-wrap .wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors { display: none !important; }
.scso-form-wrap .wpcf7-list-item-label { margin-left: 4px; color: #fff; }

.scso-form-wrap input[type=date]:focus-visible,
.scso-form-wrap input[type=date]:visited,
.scso-form-wrap input[type=email]:focus-visible,
.scso-form-wrap input[type=email]:visited,
.scso-form-wrap input[type=number]:focus-visible,
.scso-form-wrap input[type=number]:visited,
.scso-form-wrap input[type=password]:focus-visible,
.scso-form-wrap input[type=password]:visited,
.scso-form-wrap input[type=search]:focus-visible,
.scso-form-wrap input[type=search]:visited,
.scso-form-wrap input[type=tel]:focus-visible,
.scso-form-wrap input[type=tel]:visited,
.scso-form-wrap input[type=text]:focus-visible,
.scso-form-wrap input[type=text]:visited,
.scso-form-wrap select:focus-visible,
.scso-form-wrap select:visited,
.scso-form-wrap textarea:focus-visible,
.scso-form-wrap textarea:visited {
    border: 1px solid #00cb9a !important;
}

.scso-form-wrap .wpcf7-form-control-wrap input[type=checkbox] + .wpcf7-list-item-label,
.scso-form-wrap input.custom-checkbox + .wpcf7-list-item-label {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    user-select: none;
    margin-left: 0;
}
.scso-form-wrap .wpcf7-form-control-wrap input[type=checkbox] + .wpcf7-list-item-label::before,
.scso-form-wrap input.custom-checkbox + .wpcf7-list-item-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 12px;
    height: 12px;
    border: 1.5px solid #00cb9a;
    border-radius: 3px;
    background-color: #00cb9a;
}
.scso-form-wrap .wpcf7-form-control-wrap input[type=checkbox]:checked + .wpcf7-list-item-label::after,
.scso-form-wrap input.custom-checkbox:checked + .wpcf7-list-item-label::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    transform: translateY(-50%) rotate(-45deg);
    width: 9px;
    height: 5px;
    border: solid #fff;
    border-width: 0 0 2px 2px;
}
.scso-form-wrap .wpcf7-form-control-wrap input[type=checkbox] + .wpcf7-list-item-label:hover::before,
.scso-form-wrap input.custom-checkbox + .wpcf7-list-item-label:hover::before {
    border-color: #00cb9a !important;
}
.scso-form-wrap .wpcf7-form-control-wrap input[type=checkbox]:focus + .wpcf7-list-item-label::before,
.scso-form-wrap input.custom-checkbox:focus + .wpcf7-list-item-label::before {
    border-color: #00cb9a;
}
.scso-form-wrap .wpcf7-form-control-wrap input[type=checkbox]:not(:checked) + .wpcf7-list-item-label::before,
.scso-form-wrap input.custom-checkbox:not(:checked) + .wpcf7-list-item-label::before {
    background-color: #fff;
    border-color: #ced4da;
}

.scso-form-wrap .wpcf7-form input[type=submit]:disabled,
.scso-form-wrap .wpcf7-form input[type=submit]:disabled:hover {
    background: #ced4da;
    border-color: #ced4da;
    color: #aeb3b8;
}
.scso-form-wrap .wpcf7-form input[type=submit]:disabled { cursor: not-allowed; }

.scso-form-wrap .custom-checkboxes span { width: 100%; }

/* --- FAQ (JS accordion — only one open at a time) --- */
.scso-faq {
    padding: 120px 30px 230px;
    background: #080c11;
}

/* Suppress WPML's language switcher if it still renders despite the PHP unhook.
   Scoped to .scso-body so other pages on the site are unaffected. */
.scso-body .wpml-ls-statics-footer,
.scso-body .wpml-ls-legacy-list-horizontal { display: none !important; }

/* Hide Avada/Fusion privacy-bar cookie notice on the landing — we don't need
   the theme's cookie bar since this is a standalone page bypassing Avada. */
.fusion-privacy-bar.fusion-privacy-bar-bottom { display: none !important; }
.scso-faq .scso-h2 {
    margin-bottom: 56px;
    letter-spacing: -0.025em;
}
.scso-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 767px) { .scso-faq-grid { grid-template-columns: 1fr; } }
.scso-faq-item {
    height: 100%;                 /* row-mates share height so collapsed card matches its open neighbour */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.02);
    padding: 20px;
    cursor: pointer;
    transition: background .2s ease;
    outline: none;
}
.scso-faq-item:hover        { background: rgba(255, 255, 255, 0.04); }
.scso-faq-item.is-open      { background: rgba(255, 255, 255, 0.04); }
.scso-faq-item:focus-visible{ box-shadow: 0 0 0 2px rgba(61, 139, 236, 0.5); }
.scso-faq-question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.scso-faq-question > span:first-child {
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Hind Madurai', sans-serif;
    font-size: 16px;
    line-height: 20px;
}
.scso-faq-chev {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform .3s ease;
    flex-shrink: 0;
    display: inline-flex;
}
.scso-faq-item.is-open .scso-faq-chev { transform: rotate(180deg); }
/* Answer — smooth max-height expand/collapse, starts collapsed. */
.scso-faq-answer-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.scso-body .scso-faq-answer {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.60);
    font-family: 'Hind Madurai', sans-serif;
    font-size: 14px;
    line-height: 21px;
}

/* Footer removed (scso-footer) */

/* =============================================================
   Mobile polish (≤ 540px — targets 375×667 and similar)
   Rules:
     • Section L/R gutters: 30px
     • Card / plate internal padding: 30px
     • Shrink desktop vertical paddings to breathable values
   ============================================================= */
@media (max-width: 540px) {

    /* ── Header (single row — swap full logo for icon-only SVG) ── */
    .scso-header-inner { gap: 12px; }
    .scso-logo .scso-logo-img--full { display: none; }
    .scso-logo .scso-logo-img--icon { display: block; }
    .scso-header-cta {
        padding: 8px 18px;
        font-size: 13px;
        line-height: 16px;
        gap: 8px;
        white-space: nowrap;
    }
    .scso-header-cta svg { width: 12px; height: 10px; }

    /* ── Hero ── */
    /* padding-top inherits from the global rule (var(--scso-header-h) + 80px)
       which tracks the live header height. Override bottom/sides only. */
    .scso-hero { padding-right: 30px; padding-left: 30px; padding-bottom: 40px; padding-top: calc(var(--scso-header-h, 130px) + 20px); }
    .scso-hero-content { margin-top: 0; }           /* flex centring takes over */
    /* Compact title on mobile so the hero fits inside 100vh without growing. */
    .scso-hero-title { font-size: 32px; line-height: 1.1; }
    .scso-hero-subtitle {
        padding: 14px 16px;
        font-size: 15px;
        line-height: 21px;
        max-width: 100%;
    }
    .scso-hero-content .scso-hero-subtitle { margin-top: 12px; }
    .scso-hero-content .scso-btn { margin-top: 28px; }
    .scso-btn { padding: 12px 24px; font-size: 16px; line-height: 20px; gap: 12px; }
    .scso-hero-scroll { margin-top: 24px; }
    .scso-hero-glow { width: 100%; height: 120px; }

    /* ── Evolve ── */
    .scso-evolve { padding: 72px 30px 0; }
    .scso-evolve .scso-h2 { margin-bottom: 48px; }
    /* Tabs: add breathing room between the tab row and the panel / base plate. */
    .scso-evolve-tabs { margin: 0 auto 32px; }
    .scso-evolve-tab { min-width: 0; padding: 8px 16px; font-size: 14px; }
    /* Tooltips hidden on mobile — they just clutter the image at 375px. Slide
       animation is kept as on desktop (original clip-path + transforms). */
    .scso-evolve-tooltips { display: none; }

    /* ── Compare ── */
    .scso-compare { padding: 60px 30px 72px; }
    .scso-compare-card { padding: 30px; }
    .scso-body .scso-compare-card-img { width: 100%; margin-bottom: -20px; border-radius: 5px; }

    /* ── Pricing ── */
    .scso-pricing { padding: 72px 30px; }
    .scso-pricing-grid { margin-top: 48px; margin-bottom: 48px; gap: 20px; }
    .scso-price-card { padding: 30px; min-height: 200px; }
    .scso-price-card-text { max-width: 100%; position: relative; z-index: 1; }
    .scso-body .scso-price-card-img {
        height: 60%;
        top: auto;
        bottom: 0;
        right: -10%;
        opacity: 0.35;            /* keep image as background accent, text is priority */
    }
    .scso-price-amount { font-size: 36px; line-height: 1.1; }
    .scso-price-label { font-size: 18px; margin-bottom: 12px !important; }
    .scso-pricing .scso-btn { margin-top: 40px; }

    /* ── Difference ── */
    .scso-difference { padding: 72px 30px; }
    .scso-body .scso-difference-heading { margin-bottom: 18px; font-size: 22px; line-height: 1.25; }
    .scso-difference-grid { gap: 36px; }
    .scso-difference-list { padding: 30px; gap: 16px; }
    .scso-difference-footer { margin-top: 72px; }
    .scso-difference-cta { margin-top: 24px; }
    .scso-difference-heading-badge { width: 36px; height: 36px; }
    .scso-difference-heading-badge svg { width: 22px; height: 22px; }

    /* ── How ── */
    .scso-how { padding: 72px 30px; }
    .scso-steps-wrap { margin-top: 48px; margin-bottom: 40px; }
    .scso-step-card { padding: 30px; }

    /* ── FAQ ── */
    .scso-faq { padding: 72px 30px 120px; }
    .scso-faq .scso-h2 { margin-bottom: 36px; }
    .scso-faq-item { padding: 30px; }

    /* ── Form ── */
    .scso-form-inner { padding: 96px 30px 48px; }
    .scso-body .scso-form-title { font-size: 28px; }
    .scso-body .scso-form-subtitle { font-size: 16px; line-height: 24px; }
    .scso-form-wrap { padding: 30px; margin-top: 40px; }

    /* ── Headings ── */
    .scso-body .scso-h2 { font-size: 28px; line-height: 1.2; }

    /* ── Containers — keep internal padding 0 so section gutters (30px) win ── */
    .scso-container,
    .scso-container-narrow,
    .scso-container-form { padding: 0; }
}