/* ==========================================================================
   SAF-T PRODUCTS / NC8 MAPPING - one-off flagship article treatment
   Scoped under .sp- to avoid colliding with blog.css. Full-bleed sections
   break out of .blog-article-content's 720px column deliberately - this
   piece is meant to read as a bigger moment than a normal post.
   ========================================================================== */

.sp-root {
    --sp-navy: #0f3d5c;
    --sp-blue: #2d7aaf;
    --sp-blue-deep: #1a5a8e;
    --sp-xl-green: #1d6f42;
    --sp-xl-red-bg: #ffc7ce;
    --sp-xl-red-text: #9c0006;
    --sp-green: #10b981;
    --sp-deep: #0c1f33;
    /* Real confidence-badge colors, lifted directly from
       map-codes/mapping-table/mapping-table.css - this recreation should
       look like the actual product, not an invented palette. */
    --sp-conf-exact-bg: #d1f0eb; --sp-conf-exact-text: #0a5c4e;
    --sp-conf-high-bg: #dbeafe;  --sp-conf-high-text: #1e3a8a;
    --sp-conf-med-bg: #fef3c7;   --sp-conf-med-text: #92400e;
    font-family: 'Inter', sans-serif;
    /* No overflow-x:hidden here - html/body already set overflow-x:clip
       site-wide (base.css), which is what actually contains the 100vw
       bleed below. Adding it here clipped this wrapper's own full-bleed
       children before they could render at full width. */
}

.sp-root .sp-display {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* Break out of the 720px article column to full viewport width, via
   margin:calc(50% - 50vw) rather than margin-left:50% + translateX(-50%).
   The transform version was tried first and does work for plain content -
   but a `transform` on any ancestor creates a new containing block for
   `position:sticky`/`fixed` descendants, which silently broke the pin
   sequence's sticky stage nested inside it (computed layout looked
   correct, but the painted/scrolled result didn't match - classic
   symptom). margin-based centering has no such side effect and is exactly
   as robust at this nesting depth, since every ancestor up to body here
   is symmetrically centered (Bootstrap's .container has equal L/R
   padding, .blog-article-content is margin:0 auto). */
.sp-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
}

/* ──────────────────────────────────────────
   HERO
   ────────────────────────────────────────── */
.sp-hero {
    background: linear-gradient(155deg, var(--sp-deep) 0%, var(--sp-navy) 55%, var(--sp-blue-deep) 100%);
    color: #eaf2f8;
    padding: 3.75rem 1.5rem 3rem;
    margin-top: -0.5rem;
}

.sp-hero-inner {
    max-width: 760px;
    margin: 0 auto;
}

.sp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fc6ec;
    border: 1px solid rgba(143, 198, 236, 0.35);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1.5rem;
}

.sp-hero h1 {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-size: clamp(1.75rem, 4.2vw, 2.75rem) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    color: #fff !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 1.25rem !important;
}

.sp-hero p {
    color: #c7dcea !important;
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
    max-width: 620px;
}

.sp-hero-stat {
    margin-top: 2.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.sp-hero-stat strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 700;
    color: var(--sp-green);
    line-height: 1;
}

.sp-hero-stat span {
    color: #9fb9ca;
    font-size: 0.9375rem;
    max-width: 320px;
    line-height: 1.5;
}

/* ──────────────────────────────────────────
   SPLIT VIEW - the two-screens signature moment
   ────────────────────────────────────────── */
.sp-split-wrap {
    background: #e9edf1;
    padding: 3rem 1.5rem 3.5rem;
}

@media (min-width: 900px) {
    .sp-split-wrap { padding-left: 3rem; padding-right: 3rem; }
}

@media (min-width: 1400px) {
    .sp-split-wrap { padding-left: 5rem; padding-right: 5rem; }
}

.sp-split-caption {
    max-width: 760px;
    margin: 0 auto 1.75rem;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    color: #5b6b78;
}

.sp-split {
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* An actual spreadsheet window - the literal two tabs open side by side,
   not a metaphor for them. Accountants recognize this UI instantly. */
.sp-xl-window {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 45px -18px rgba(15, 30, 45, 0.35);
    border: 1px solid #d4d4d4;
}

.sp-xl-titlebar {
    background: var(--sp-xl-green);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.6rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sp-xl-titlebar i { font-size: 0.875rem; }

.sp-xl-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
}

.sp-xl-table th,
.sp-xl-table td {
    border: 1px solid #e3e3e3;
    padding: 0.5rem 0.65rem;
    text-align: left;
}

.sp-xl-colhead th {
    background: #f3f3f3;
    color: #757575;
    font-weight: 500;
    font-size: 0.6875rem;
    text-align: center;
    width: 2rem;
}

.sp-xl-rownum {
    background: #f3f3f3;
    color: #757575;
    text-align: center;
    font-size: 0.6875rem;
    width: 1.75rem;
}

.sp-xl-headerrow td {
    background: #eaf1f8;
    font-weight: 700;
    color: var(--sp-navy);
}

.sp-xl-code { font-weight: 600; color: #1f2d3a; white-space: nowrap; }

.sp-xl-missing {
    background: var(--sp-xl-red-bg) !important;
    color: var(--sp-xl-red-text);
    font-weight: 700;
    text-align: center;
}

/* ──────────────────────────────────────────
   STAT BAND
   ────────────────────────────────────────── */
.sp-statband {
    background: var(--sp-deep);
    padding: 3rem 1.5rem;
}

.sp-statband-inner {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.sp-stat-tile {
    text-align: center;
    padding: 0 0.5rem;
}

.sp-stat-tile strong {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.sp-stat-tile strong.sp-stat--warn { color: #ff8a73; }
.sp-stat-tile strong.sp-stat--good { color: var(--sp-green); }

.sp-stat-tile span {
    color: #90a9bc;
    font-size: 0.8125rem;
    line-height: 1.5;
    display: block;
}

.sp-statband-note {
    max-width: 980px;
    margin: 1.5rem auto 0;
    color: #fff !important;
    font-size: 0.75rem;
    text-align: center;
}

/* ──────────────────────────────────────────
   DARK ZONE - flat, solid background behind the pin sequence and both
   feature sections, so there's no seam between them. No fade - a flat
   color was the fix once the text itself became bold/large enough to not
   need a gradient to feel like a moment.
   ────────────────────────────────────────── */
.sp-dark-zone {
    background: var(--sp-deep);
}

/* ──────────────────────────────────────────
   SCROLL CUE - sits right after the checklist, prompts the scroll that
   leads into the pin sequence below.
   ────────────────────────────────────────── */
.sp-scrollcue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 2.5rem 0 1.5rem;
    color: #fff;
}

.sp-scrollcue span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff !important;
}

.sp-scrollcue svg {
    width: 24px;
    height: 24px;
    color: #fff;
    animation: sp-bob 1.8s ease-in-out infinite;
}

@keyframes sp-bob {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* ──────────────────────────────────────────
   PIN SEQUENCE - "Но... / има ли по-добър начин...? / Има." stays locked
   center-screen while the page scrolls through a tall spacer; the three
   beats cross-fade based on scroll position instead of sliding past.
   ────────────────────────────────────────── */
.sp-pin-spacer {
    height: 300vh;
    position: relative;
}

.sp-pin-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.sp-pin-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.sp-pin-slide.sp-active { opacity: 1; }

.sp-pin-no {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(5rem, 22vw, 13rem) !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 0.85 !important;
    letter-spacing: -0.02em;
    margin: 0 !important;
}

.sp-pin-question {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-style: italic;
    font-size: clamp(1.5rem, 4.5vw, 2.5rem) !important;
    font-weight: 500 !important;
    color: #9fb9ca !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.sp-pin-yes {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    /* Smaller ceiling than the standalone "Но..."/question beats - this
       one shares the screen with the logo, payoff line and segue below it,
       so it needs headroom for siblings rather than claiming the whole
       viewport on its own. */
    font-size: clamp(3.5rem, 11vw, 7rem) !important;
    font-weight: 700 !important;
    color: var(--sp-green) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem !important;
}

.sp-pin-logo {
    height: 32px;
    width: auto;
    margin-bottom: 0.85rem;
    opacity: 0.95;
}

.sp-pin-payoff {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.3 !important;
    max-width: 620px;
    margin: 0 !important;
}

.sp-pin-payoff strong {
    color: var(--sp-green) !important;
}

.sp-pin-segue {
    font-family: 'Inter', sans-serif;
    font-size: 1rem !important;
    color: #9fb9ca !important;
    margin: 1.25rem 0 0 !important;
}

.sp-pin-progress {
    position: absolute;
    left: 50%;
    bottom: 2.5rem;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
}

.sp-pin-progress i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4a6276;
    transition: background 0.3s ease, transform 0.3s ease;
}

.sp-pin-progress i.sp-on {
    background: var(--sp-green);
    transform: scale(1.4);
}

/* ──────────────────────────────────────────
   ALTERNATING FEATURE SECTIONS - left/right, bold
   ────────────────────────────────────────── */
.sp-feature {
    padding: 3rem 1.5rem;
}

.sp-feature-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3.5rem;
    align-items: center;
}

.sp-feature--reverse .sp-feature-inner {
    grid-template-columns: 1.15fr 1fr;
}

.sp-feature--reverse .sp-feature-text { order: 2; }
.sp-feature--reverse .sp-feature-visual { order: 1; }

.sp-feature-eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sp-green);
    margin-bottom: 1rem;
}

.sp-feature-text h3 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 1rem;
}

.sp-feature-text p {
    color: #aec4d6 !important;
    font-size: 1rem;
    line-height: 1.75;
}

.sp-feature-points {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.sp-feature-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: #dce7ee;
    font-size: 0.9375rem;
    line-height: 1.6;
    padding: 0.5rem 0;
}

.sp-feature-points li i {
    color: var(--sp-green);
    margin-top: 0.2rem;
    font-size: 0.8125rem;
}

/* ──────────────────────────────────────────
   RECREATED MAPPING TABLE (real product UI, not a screenshot)
   ────────────────────────────────────────── */
.sp-mt-window {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.45);
}

.sp-mt-titlebar {
    background: #f7f9fb;
    border-bottom: 1px solid #e5eaf0;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp-mt-titlebar-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--sp-navy);
}

.sp-mt-ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--sp-blue);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.sp-mt-ai-pill img { height: 11px; width: auto; }

.sp-mt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.sp-mt-table th {
    text-align: left;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8b97a3;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #e5eaf0;
    font-weight: 600;
}

.sp-mt-row {
    opacity: 0;
    transform: translateX(-12px);
    animation: sp-mt-row-in 0.5s ease forwards;
    animation-play-state: paused;
}

.sp-in .sp-mt-row { animation-play-state: running; }

.sp-mt-row:nth-child(1) { animation-delay: 0.1s; }
.sp-mt-row:nth-child(2) { animation-delay: 0.3s; }
.sp-mt-row:nth-child(3) { animation-delay: 0.5s; }
.sp-mt-row:nth-child(4) { animation-delay: 0.7s; }
.sp-mt-row:nth-child(5) { animation-delay: 0.9s; }

@keyframes sp-mt-row-in {
    to { opacity: 1; transform: translateX(0); }
}

.sp-mt-row td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #f0f3f6;
    vertical-align: middle;
}

.sp-mt-desc { color: #1f2d3a; }
.sp-mt-desc small { display: block; color: #8b97a3; font-size: 0.75rem; margin-top: 0.1rem; }

.sp-mt-code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--sp-navy);
}

.sp-mt-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.sp-mt-badge--exact { background: var(--sp-conf-exact-bg); color: var(--sp-conf-exact-text); }
.sp-mt-badge--high { background: var(--sp-conf-high-bg); color: var(--sp-conf-high-text); }
.sp-mt-badge--medium { background: var(--sp-conf-med-bg); color: var(--sp-conf-med-text); }

.sp-mt-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sp-conf-exact-bg);
    color: var(--sp-conf-exact-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.sp-mt-bulkbar {
    background: #f7f9fb;
    border-top: 1px solid #e5eaf0;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.sp-mt-bulkbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--sp-blue);
    color: #fff;
    border: none;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.55rem 1rem;
    border-radius: 7px;
}

.sp-mt-exportlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #5b6b78;
    font-size: 0.8125rem;
}

.sp-mt-exportlink i { color: var(--sp-xl-green); }

/* ──────────────────────────────────────────
   TIME COMPRESSION BARS (500h -> real 8min)
   ────────────────────────────────────────── */
.sp-timebars {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 2rem 1.75rem;
}

.sp-timebar-row {
    margin-bottom: 1.5rem;
}

.sp-timebar-row:last-child { margin-bottom: 0; }

.sp-timebar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: #aec4d6;
    margin-bottom: 0.5rem;
}

.sp-timebar-label strong {
    font-family: 'JetBrains Mono', monospace;
    color: #fff !important;
    font-size: 0.9375rem;
}

.sp-timebar-track {
    height: 14px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.sp-timebar-fill {
    height: 100%;
    border-radius: 999px;
    width: 0;
    transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.sp-in .sp-timebar-fill--manual { width: 100%; background: linear-gradient(90deg, #a23c2e, #d4604a); }
.sp-in .sp-timebar-fill--magi { width: 2.5%; background: var(--sp-green); }

/* ──────────────────────────────────────────
   FINAL CTA
   ────────────────────────────────────────── */
.sp-finalcta {
    padding: 1rem 1.5rem 5rem;
    text-align: center;
}

.sp-solve-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.sp-solve-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    transition: transform 0.15s ease, background 0.15s ease;
}

.sp-solve-btn--ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.sp-solve-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.sp-solve-btn--primary {
    background: var(--sp-green);
    color: #04231a;
}

.sp-solve-btn--primary:hover {
    background: #34d3a4;
    transform: translateY(-1px);
}

/* Generic scroll-reveal fade/slide, driven by the IntersectionObserver in
   the template toggling .sp-in on [data-sp-observe] elements. */
[data-sp-observe] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-sp-observe].sp-in {
    opacity: 1;
    transform: translateY(0);
}

/* Note: .sp-bleed's transform:translateX(-50%) and this translateY() would
   collide on the same element (one overwrites the other, they don't merge)
   if ever applied together - that bit everyone once. The reveal/intro/
   feature sections below are no longer individually .sp-bleed (only the
   single .sp-dark-zone wrapper around all of them is), so this doesn't
   currently apply - but don't put .sp-bleed back on a [data-sp-observe]
   element without re-adding a combined override. */

@media (prefers-reduced-motion: reduce) {
    [data-sp-observe] { opacity: 1; transform: none; transition: none; }
    .sp-mt-row { opacity: 1; transform: none; animation: none; }
    .sp-timebar-fill--manual, .sp-timebar-fill--magi { transition: none; }
    .sp-in .sp-timebar-fill--manual { width: 100%; }
    .sp-in .sp-timebar-fill--magi { width: 2.5%; }
}

/* ──────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────── */
@media (max-width: 760px) {
    .sp-split { grid-template-columns: 1fr; }
    .sp-statband-inner { grid-template-columns: 1fr; gap: 2rem; }
    .sp-feature-inner,
    .sp-feature--reverse .sp-feature-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .sp-feature--reverse .sp-feature-text,
    .sp-feature--reverse .sp-feature-visual {
        order: unset;
    }
    .sp-solve-actions { flex-direction: column; }
    .sp-solve-btn { width: 100%; justify-content: center; }
    .sp-mt-table { font-size: 0.75rem; }
    .sp-mt-table th:nth-child(1), .sp-mt-table td:nth-child(1) { display: none; }
    .sp-pin-spacer { height: 240vh; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-pin-slide { transition: none; }
    .sp-scrollcue svg { animation: none; }
}