/* Snapdec 2026 — shared subpage scaffold (used by all product detail pages) */

.sp-hero { padding: 140px 0 64px; background: #0A0A0C; color: var(--bone); position: relative; overflow: hidden; }
.sp-hero::before { content:''; position:absolute; inset:0; background-size: cover; background-position: center; opacity: 1; }
.sp-hero::after { content:''; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(10,10,12,.15) 0%, rgba(10,10,12,.3) 60%, rgba(10,10,12,.55) 100%),
  linear-gradient(90deg, rgba(10,10,12,.45) 0%, rgba(10,10,12,0) 50%, rgba(10,10,12,.2) 100%); }
.sp-hero > .container { position: relative; z-index: 2; }

/* Video hero variant */
.sp-hero.has-video { padding: 180px 0 96px; min-height: 760px; display: flex; align-items: end; }
.sp-hero.has-video::before { display: none; }
.sp-hero.has-video::after { background:
  linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.2) 30%, rgba(10,10,12,.4) 65%, rgba(10,10,12,.85) 100%),
  linear-gradient(90deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 55%, rgba(10,10,12,.15) 100%); }
.sp-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sp-hero.has-video > .container { width: 100%; }

/* Custom hero (full-bleed React node, e.g. SVG illustration) */
.sp-hero.has-custom { padding: 180px 0 96px; min-height: 760px; display: flex; align-items: end; }
.sp-hero.has-custom::before { display: none; }
.sp-hero.has-custom::after { background:
  linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.15) 25%, rgba(10,10,12,.35) 60%, rgba(10,10,12,.88) 100%),
  linear-gradient(90deg, rgba(10,10,12,.6) 0%, rgba(10,10,12,0) 55%, rgba(10,10,12,.2) 100%); }
.sp-hero.has-custom > .container { width: 100%; }
.sp-hero-custom { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* Workflow eagle-view illustration */
.wf-hero-art { position: absolute; inset: 0; }
.wf-hero-svg  { width: 100%; height: 100%; display: block; }
@keyframes wfRingDash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -800; } }
.wf-ring-pulse { animation: wfRingDash 14s linear infinite; }
@keyframes wfPulseCore { 0% { r: 22; opacity: .8; } 100% { r: 60; opacity: 0; } }
.wf-pulse-core   { animation: wfPulseCore 2.4s ease-out infinite; transform-origin: center; }
.wf-pulse-core-2 { animation-delay: 1.2s; }
@keyframes wfBlink { 0%,100% { opacity: 0; } 50% { opacity: .8; } }
.wf-blink { animation: wfBlink 1.6s ease-in-out infinite; }
@keyframes wfCardPulse { 0%,100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }
.wf-card-pulse { animation: wfCardPulse 2s ease-in-out infinite; }
@media (max-width: 960px) {
  .wf-hero-svg { opacity: .55; }
}

.sp-crumbs { display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.55); margin-bottom: 32px; text-transform: uppercase; }
.sp-crumbs a:hover { color: var(--bone); }

.sp-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: end; }
.sp-hero h1 { font-size: clamp(48px, 6.4vw, 96px); line-height: .95; letter-spacing: -.038em; }
.sp-hero h1 em { color: var(--snap); font-style: normal; }
.sp-hero-tag { font-size: 18px; line-height: 1.45; color: rgba(255,255,255,.72); margin-top: 24px; max-width: 540px; }
.sp-hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.sp-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; background: rgba(14,14,16,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; }
.sp-hero-stat-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.55); text-transform: uppercase; }
.sp-hero-stat-v { font-size: clamp(32px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.02em; line-height: 1; margin-top: 6px; }
.sp-hero-stat-v small { font-size: .5em; opacity: .55; margin-left: 4px; font-weight: 500; }
.sp-hero-stat-d { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 6px; line-height: 1.4; }
@media (max-width: 960px) { .sp-hero-grid { grid-template-columns: 1fr; } }

/* Quick facts strip */
.sp-facts { background: var(--bone); padding: 0; border-bottom: 1px solid var(--line); }
.sp-facts-inner { display: grid; grid-template-columns: auto repeat(3, 1fr); }
.sp-fact-label { padding: 32px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line); display: flex; align-items: center; max-width: 260px; }
.sp-fact { padding: 32px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.sp-fact:last-child { border-right: 0; }
.sp-fact-v { font-size: clamp(36px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.025em; line-height: 1; }
.sp-fact-v small { font-size: .5em; font-weight: 500; opacity: .5; margin-left: 4px; }
.sp-fact-l { font-size: 13px; color: var(--muted); line-height: 1.4; }
@media (max-width: 960px) { .sp-facts-inner { grid-template-columns: 1fr; } .sp-fact-label, .sp-fact { border-right: 0; border-bottom: 1px solid var(--line); max-width: none; } }

/* Section rhythm */
.sp-sec { padding: 96px 0; }
.sp-sec.is-bone { background: var(--bone); }
.sp-sec.is-bone2 { background: var(--bone-2); }
.sp-sec.is-ink { background: var(--ink); color: var(--bone); }

/* 4-up features */
.sp-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.sp-feat { background: var(--bone); padding: 32px; display: flex; flex-direction: column; gap: 12px; min-height: 240px; position: relative; }
.sp-feat.is-hl { background: var(--ink); color: var(--bone); }
.sp-feat.is-hl .sp-feat-num { color: rgba(255,255,255,.4); }
.sp-feat.is-hl .sp-feat-body { color: rgba(255,255,255,.72); }
.sp-feat-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--bone); display: grid; place-items: center; }
.sp-feat.is-hl .sp-feat-mark { background: var(--snap); }
.sp-feat-num { position: absolute; top: 32px; right: 32px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.sp-feat-title { font-size: 22px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.sp-feat-body { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 720px) { .sp-features { grid-template-columns: 1fr; } }

/* Capability bento (3-up) */
.sp-bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.sp-bento-card { background: var(--bone); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: 280px; }
.sp-bento-card.is-hero { background: var(--ink); color: var(--bone); border-color: var(--ink); grid-row: span 2; }
.sp-bento-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.sp-bento-card.is-hero .sp-bento-num { color: rgba(255,255,255,.5); }
.sp-bento-title { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.sp-bento-card.is-hero .sp-bento-title { font-size: 28px; }
.sp-bento-body { font-size: 14px; line-height: 1.55; color: var(--muted); }
.sp-bento-card.is-hero .sp-bento-body { color: rgba(255,255,255,.78); }
@media (max-width: 960px) { .sp-bento { grid-template-columns: 1fr; } .sp-bento-card.is-hero { grid-row: auto; } }

/* Use-case list */
.sp-uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sp-use { background: var(--bone); padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; transition: background .2s; }
.sp-use:hover { background: var(--bone-2); }
.sp-use-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--snap); }
.sp-use-name { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.sp-use-body { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 960px) { .sp-uses { grid-template-columns: 1fr; } }

/* Photo strip */
.sp-photo-strip { height: 420px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; }
@media (max-width: 720px) { .sp-photo-strip { height: 380px; } }
.sp-photo-strip::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(14,14,16,.15) 0%, rgba(14,14,16,.55) 100%); }
.sp-photo-strip .container { position: relative; z-index: 1; height: 100%; display: flex; align-items: end; padding-top: 56px; padding-bottom: 32px; color: var(--bone); }
.sp-photo-strip h3 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.022em; line-height: 1.05; max-width: 760px; }
.sp-photo-strip-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.6); text-transform: uppercase; margin-bottom: 14px; }

/* FAQ */
.sp-faq { display: flex; flex-direction: column; max-width: 880px; }
.sp-faq-item { border-bottom: 1px solid var(--line); padding: 24px 0; cursor: pointer; }
.sp-faq-q { display: flex; justify-content: space-between; gap: 24px; align-items: center; font-size: 18px; font-weight: 550; letter-spacing: -.01em; }
.sp-faq-q-num { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-right: 8px; letter-spacing: .08em; }
.sp-faq-toggle { font-size: 24px; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
.sp-faq-item.is-open .sp-faq-toggle { transform: rotate(45deg); color: var(--snap); }
.sp-faq-a { font-size: 15px; line-height: 1.6; color: var(--muted); margin-top: 0; max-height: 0; overflow: hidden; transition: max-height .35s ease, margin-top .35s ease; }
.sp-faq-item.is-open .sp-faq-a { max-height: 400px; margin-top: 16px; }

/* CTA */
.sp-cta-card { background: linear-gradient(135deg, var(--snap-deep) 0%, var(--snap) 50%, var(--ember) 100%); color: #fff; border-radius: 24px; padding: 64px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.sp-cta-card h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.05; }
.sp-cta-card-lead { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.88); max-width: 520px; margin-top: 16px; }
@media (max-width: 720px) { .sp-cta-card { grid-template-columns: 1fr; padding: 32px; } }

/* Cross-link products row */
.sp-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sp-related-card { background: var(--bone); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, transform .2s; }
.sp-related-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.sp-related-name { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.sp-related-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.sp-related-cta { font-family: var(--font-mono); font-size: 11px; color: var(--snap); letter-spacing: .08em; margin-top: auto; text-transform: uppercase; }
@media (max-width: 720px) { .sp-related { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════════
   TWEAK THEMES — mood + headline voice. Activate by adding
   html.mood-{editorial|midnight|solar} and html.voice-{sans|serif|mono}.
   ════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

/* Mood: Midnight (dark editorial throughout) */
html.mood-midnight body { background: #0A0A0C; color: var(--bone); }
html.mood-midnight .sp-sec.is-bone,
html.mood-midnight .sp-sec.is-bone2 { background: #0E0E10; color: var(--bone); }
html.mood-midnight .sp-facts { background: #0E0E10; border-bottom-color: #1F1F23; }
html.mood-midnight .sp-fact-label,
html.mood-midnight .sp-fact { border-right-color: #1F1F23; color: rgba(255,255,255,.78); }
html.mood-midnight .sp-fact-l { color: rgba(255,255,255,.55); }
html.mood-midnight .sp-features { background: #1F1F23; border-color: #1F1F23; }
html.mood-midnight .sp-feat { background: #14141a; color: var(--bone); }
html.mood-midnight .sp-feat:not(.is-hl) .sp-feat-mark { background: var(--bone); color: var(--ink); }
html.mood-midnight .sp-feat-body { color: rgba(255,255,255,.7); }
html.mood-midnight .sp-feat-num { color: rgba(255,255,255,.4); }
html.mood-midnight .sp-bento-card { background: #14141a; border-color: #1F1F23; color: var(--bone); }
html.mood-midnight .sp-bento-body { color: rgba(255,255,255,.7); }
html.mood-midnight .sp-uses { background: #1F1F23; border-color: #1F1F23; }
html.mood-midnight .sp-use { background: #14141a; color: var(--bone); }
html.mood-midnight .sp-use:hover { background: #1A1A1F; }
html.mood-midnight .sp-use-body { color: rgba(255,255,255,.7); }
html.mood-midnight .sp-faq-item { border-bottom-color: #1F1F23; }
html.mood-midnight .sp-faq-q { color: var(--bone); }
html.mood-midnight .sp-faq-a { color: rgba(255,255,255,.7); }
html.mood-midnight .sp-related-card { background: #14141a; border-color: #1F1F23; color: var(--bone); }
html.mood-midnight .sp-related-card:hover { border-color: var(--bone); }
html.mood-midnight .sp-related-desc { color: rgba(255,255,255,.6); }
html.mood-midnight .section-head h2,
html.mood-midnight .sp-feat-title,
html.mood-midnight .sp-bento-title,
html.mood-midnight .sp-use-name { color: var(--bone); }
html.mood-midnight .lead { color: rgba(255,255,255,.7); }

/* ─────────────────────────────────────────────────────────────────────
   MOOD: CRIMSON — deep red on near-black, used for SnapAI Vision
   ───────────────────────────────────────────────────────────────────── */
html.mood-crimson { --crimson: #DC143C; --crimson-deep: #8B0000; --crimson-grad: linear-gradient(135deg, #8B0000 0%, #DC143C 100%); --snap: #DC143C; --snap-deep: #8B0000; }
html.mood-crimson body { background: #0B0809; color: rgba(255,255,255,.92); }

/* Section backgrounds */
html.mood-crimson .sp-sec.is-bone { background: #0B0809; color: rgba(255,255,255,.92); }
html.mood-crimson .sp-sec.is-bone2 { background: #12090A; color: rgba(255,255,255,.92); }
html.mood-crimson .sp-facts { background: #0B0809; border-bottom-color: #2A0F12; }
html.mood-crimson .sp-fact-label,
html.mood-crimson .sp-fact { border-right-color: #2A0F12; color: rgba(255,255,255,.78); }
html.mood-crimson .sp-fact-l { color: rgba(255,255,255,.55); }

/* Features 4-up */
html.mood-crimson .sp-features { background: #2A0F12; border-color: #2A0F12; }
html.mood-crimson .sp-feat { background: #150A0C; color: rgba(255,255,255,.92); }
html.mood-crimson .sp-feat.is-hl { background: var(--crimson-grad); color: #fff; }
html.mood-crimson .sp-feat-mark { background: var(--crimson-grad); color: #fff; }
html.mood-crimson .sp-feat.is-hl .sp-feat-mark { background: #150A0C; color: #fff; }
html.mood-crimson .sp-feat-body { color: rgba(255,255,255,.7); }
html.mood-crimson .sp-feat.is-hl .sp-feat-body { color: rgba(255,255,255,.92); }
html.mood-crimson .sp-feat-num { color: rgba(255,255,255,.4); }
html.mood-crimson .sp-feat.is-hl .sp-feat-num { color: rgba(255,255,255,.65); }

/* Bento */
html.mood-crimson .sp-bento-card { background: #150A0C; border-color: #2A0F12; color: rgba(255,255,255,.92); }
html.mood-crimson .sp-bento-card.is-hero { background: var(--crimson-grad); border-color: transparent; color: #fff; }
html.mood-crimson .sp-bento-num { color: rgba(255,255,255,.5); }
html.mood-crimson .sp-bento-body { color: rgba(255,255,255,.7); }
html.mood-crimson .sp-bento-card.is-hero .sp-bento-body { color: rgba(255,255,255,.92); }

/* Uses */
html.mood-crimson .sp-uses { background: #2A0F12; border-color: #2A0F12; }
html.mood-crimson .sp-use { background: #150A0C; color: rgba(255,255,255,.92); }
html.mood-crimson .sp-use:hover { background: #1F0E11; }
html.mood-crimson .sp-use-body { color: rgba(255,255,255,.7); }

/* Photo strip — crimson dusk overlay */
html.mood-crimson .sp-photo-strip::after { background: linear-gradient(180deg, rgba(220,20,60,.15) 0%, rgba(11,8,9,.7) 100%); }

/* FAQ */
html.mood-crimson .sp-faq-item { border-bottom-color: #2A0F12; }
html.mood-crimson .sp-faq-toggle { color: rgba(255,255,255,.55); }
html.mood-crimson .sp-faq-item.is-open .sp-faq-toggle { color: var(--crimson); }
html.mood-crimson .sp-faq-a { color: rgba(255,255,255,.7); }

/* Related products */
html.mood-crimson .sp-related-card { background: #150A0C; border-color: #2A0F12; color: rgba(255,255,255,.92); }
html.mood-crimson .sp-related-desc { color: rgba(255,255,255,.6); }

/* CTA — full crimson gradient */
html.mood-crimson .sp-cta-card { background: var(--crimson-grad); }

/* Hero accent (em / highlighted span in title) */
html.mood-crimson .sp-hero h1 em { color: var(--crimson); }

/* Section headings & leads */
html.mood-crimson .section-head h2,
html.mood-crimson .sp-feat-title,
html.mood-crimson .sp-bento-title,
html.mood-crimson .sp-use-name { color: #fff; }
html.mood-crimson .lead { color: rgba(255,255,255,.7); }

/* Mood: Solar (warm, gold/ember accent instead of snap red) */
html.mood-solar { --snap: #D4A24C; --snap-deep: #B6852E; }
html.mood-solar body { background: #F6F1E6; }
html.mood-solar .sp-sec.is-bone { background: #F6F1E6; }
html.mood-solar .sp-sec.is-bone2 { background: #EDE5D2; }
html.mood-solar .sp-facts { background: #F6F1E6; border-bottom-color: #D9D0BB; }
html.mood-solar .sp-fact-label, html.mood-solar .sp-fact { border-right-color: #D9D0BB; }
html.mood-solar .sp-features { background: #D9D0BB; border-color: #D9D0BB; }
html.mood-solar .sp-feat { background: #F6F1E6; }
html.mood-solar .sp-feat.is-hl { background: #2A2418; }
html.mood-solar .sp-feat.is-hl .sp-feat-mark { background: #D4A24C; color: #2A2418; }
html.mood-solar .sp-bento-card { background: #F6F1E6; border-color: #D9D0BB; }
html.mood-solar .sp-bento-card.is-hero { background: #2A2418; border-color: #2A2418; }
html.mood-solar .sp-uses { background: #D9D0BB; border-color: #D9D0BB; }
html.mood-solar .sp-use { background: #F6F1E6; }
html.mood-solar .sp-use:hover { background: #EDE5D2; }
html.mood-solar .sp-related-card { background: #F6F1E6; border-color: #D9D0BB; }
html.mood-solar .sp-cta-card { background: linear-gradient(135deg, #B6852E 0%, #D4A24C 50%, #FF6B35 100%); }
html.mood-solar .sp-hero h1 em { color: #D4A24C; }
html.mood-solar .sp-faq-item.is-open .sp-faq-toggle { color: #D4A24C; }

/* Headline voice */
html.voice-serif .sp-hero h1,
html.voice-serif .section-head h2,
html.voice-serif .sp-photo-strip h3,
html.voice-serif .sp-cta-card h2 {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  letter-spacing: -.015em; font-weight: 400; font-feature-settings: "ss01";
}
html.voice-serif .sp-hero h1 em,
html.voice-serif .section-head h2 em { font-style: italic; }
html.voice-mono .sp-hero h1,
html.voice-mono .section-head h2,
html.voice-mono .sp-photo-strip h3,
html.voice-mono .sp-cta-card h2 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -.03em; font-weight: 500; text-transform: lowercase;
}
html.voice-mono .sp-hero h1 { font-size: clamp(40px, 5.2vw, 78px); line-height: 1.0; }
html.voice-mono .section-head h2 { font-size: clamp(28px, 3.4vw, 44px); }
html.voice-mono .sp-hero h1 em { font-style: normal; }

/* Vision-only: CCTV overlay over hero video */
html.overlay-detect .sp-hero-video { filter: contrast(1.05) saturate(1.05); }
html.overlay-detect .sp-hero::after {
  background:
    linear-gradient(180deg, rgba(10,10,12,.45) 0%, rgba(10,10,12,.2) 35%, rgba(10,10,12,.4) 65%, rgba(10,10,12,.88) 100%);
}
html.overlay-detect .sp-hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
html.overlay-detect .sp-hero-overlay::before,
html.overlay-detect .sp-hero-overlay::after {
  content: ''; position: absolute; border: 1.5px solid var(--snap);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25), 0 0 24px rgba(216,75,49,.35);
}
html.overlay-detect .sp-hero-overlay::before { top: 28%; left: 8%; width: 18%; height: 24%; }
html.overlay-detect .sp-hero-overlay::after  { top: 18%; right: 38%; width: 14%; height: 28%; }
html.overlay-detect .sp-hero-overlay > .lbl {
  position: absolute; top: calc(28% - 22px); left: 8%; padding: 3px 8px;
  background: var(--snap); color: #fff; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px;
  white-space: nowrap;
}
html.overlay-detect .sp-hero-overlay > .lbl2 {
  position: absolute; top: calc(18% - 22px); right: 38%; padding: 3px 8px;
  background: rgba(255,255,255,.92); color: var(--ink); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px;
  white-space: nowrap;
}

html.overlay-scan .sp-hero-video { filter: grayscale(.4) brightness(.85) contrast(1.15); }
html.overlay-scan .sp-hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 2px, transparent 2px 4px);
}
html.overlay-scan .sp-hero-overlay::after {
  content: ''; position: absolute; left: 0; right: 0; height: 220px;
  background: linear-gradient(180deg, transparent 0%, rgba(216,75,49,.18) 50%, transparent 100%);
  animation: scanSweep 4.5s linear infinite;
}
@keyframes scanSweep { 0% { top: -20%; } 100% { top: 100%; } }
html.overlay-scan .sp-hero-overlay > .lbl,
html.overlay-scan .sp-hero-overlay > .lbl2 {
  position: absolute; padding: 4px 10px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.45); color: rgba(255,255,255,.85);
  background: rgba(10,10,12,.55); border-radius: 2px;
  white-space: nowrap;
}
html.overlay-scan .sp-hero-overlay > .lbl  { top: 5%; left: 5%; }
html.overlay-scan .sp-hero-overlay > .lbl2 { bottom: 5%; right: 5%; }


/* ═══════════════════════════════════════════════════════════════════
   Extra SnapAI moods — vision + workflow share these via subpage-styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── Mood: Cyberpunk — neon magenta/violet on deep black ──────────── */
html.mood-cyber { --snap: #FF2EC8; --snap-deep: #B8009A; }
html.mood-cyber body { background: #0A0014; color: #F7E9FF; }
html.mood-cyber .sp-sec.is-bone,
html.mood-cyber .sp-sec.is-bone2 { background: #0A0014; color: #F7E9FF; }
html.mood-cyber .sp-sec.is-bone2 { background: #14002A; }
html.mood-cyber .sp-facts { background: #0A0014; border-bottom-color: rgba(255,46,200,.25); }
html.mood-cyber .sp-fact-label,
html.mood-cyber .sp-fact { border-right-color: rgba(255,46,200,.25); color: rgba(247,233,255,.78); }
html.mood-cyber .sp-fact-l { color: rgba(255,46,200,.7); letter-spacing: .18em; }
html.mood-cyber .sp-features { background: rgba(255,46,200,.05); border-color: rgba(255,46,200,.25); }
html.mood-cyber .sp-feat { background: #14002A; color: #F7E9FF; border: 1px solid rgba(255,46,200,.15); }
html.mood-cyber .sp-feat.is-hl { background: linear-gradient(135deg, #FF2EC8, #7C3AED); color: #0A0014; }
html.mood-cyber .sp-feat.is-hl .sp-feat-mark { background: #0A0014; color: #FF2EC8; }
html.mood-cyber .sp-feat:not(.is-hl) .sp-feat-mark { background: #FF2EC8; color: #0A0014; box-shadow: 0 0 14px rgba(255,46,200,.55); }
html.mood-cyber .sp-feat-body { color: rgba(247,233,255,.7); }
html.mood-cyber .sp-feat-num { color: rgba(255,46,200,.5); font-family: 'JetBrains Mono', monospace; }
html.mood-cyber .sp-bento-card { background: #14002A; border: 1px solid rgba(255,46,200,.2); color: #F7E9FF; }
html.mood-cyber .sp-bento-card.is-hero { background: linear-gradient(135deg, #FF2EC8 0%, #7C3AED 100%); color: #0A0014; border-color: transparent; }
html.mood-cyber .sp-bento-body { color: rgba(247,233,255,.7); }
html.mood-cyber .sp-uses { background: rgba(255,46,200,.05); border-color: rgba(255,46,200,.25); }
html.mood-cyber .sp-use { background: #14002A; color: #F7E9FF; }
html.mood-cyber .sp-use:hover { background: #1F0240; }
html.mood-cyber .sp-use-body { color: rgba(247,233,255,.7); }
html.mood-cyber .sp-faq-item { border-bottom-color: rgba(255,46,200,.2); }
html.mood-cyber .sp-faq-q { color: #F7E9FF; }
html.mood-cyber .sp-faq-a { color: rgba(247,233,255,.7); }
html.mood-cyber .sp-related-card { background: #14002A; border-color: rgba(255,46,200,.2); color: #F7E9FF; }
html.mood-cyber .sp-related-card:hover { border-color: #FF2EC8; }
html.mood-cyber .sp-related-desc { color: rgba(247,233,255,.6); }
html.mood-cyber .sp-cta-card { background: linear-gradient(135deg, #B8009A 0%, #FF2EC8 50%, #7C3AED 100%); color: #0A0014; }
html.mood-cyber .sp-hero h1 em { color: #FF2EC8; text-shadow: 0 0 20px rgba(255,46,200,.5); }
html.mood-cyber .section-head h2,
html.mood-cyber .sp-feat-title,
html.mood-cyber .sp-bento-title,
html.mood-cyber .sp-use-name { color: #F7E9FF; }
html.mood-cyber .lead { color: rgba(247,233,255,.7); }

/* ── Mood: Surveillance — phosphor green CCTV monitor ─────────────── */
html.mood-surv { --snap: #5FD674; --snap-deep: #2A8F3E; }
html.mood-surv body { background: #02110a; color: #5FD674; font-family: 'JetBrains Mono', ui-monospace, monospace; }
html.mood-surv .sp-sec.is-bone,
html.mood-surv .sp-sec.is-bone2 { background: #02110a; color: #5FD674; position: relative; }
html.mood-surv .sp-sec.is-bone2 { background: #051a10; }
html.mood-surv .sp-sec::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(95,214,116,.04) 2px 3px);
  mix-blend-mode: overlay;
}
html.mood-surv .sp-facts { background: #02110a; border-bottom-color: rgba(95,214,116,.25); }
html.mood-surv .sp-fact-label,
html.mood-surv .sp-fact { border-right-color: rgba(95,214,116,.25); color: #5FD674; }
html.mood-surv .sp-fact-l { color: rgba(95,214,116,.6); }
html.mood-surv .sp-features { background: rgba(95,214,116,.05); border: 1px solid rgba(95,214,116,.25); }
html.mood-surv .sp-feat { background: #051a10; color: #5FD674; border: 1px solid rgba(95,214,116,.18); border-radius: 0; }
html.mood-surv .sp-feat.is-hl { background: #5FD674; color: #02110a; }
html.mood-surv .sp-feat.is-hl .sp-feat-mark { background: #02110a; color: #5FD674; }
html.mood-surv .sp-feat:not(.is-hl) .sp-feat-mark { background: #5FD674; color: #02110a; }
html.mood-surv .sp-feat-body { color: rgba(95,214,116,.75); }
html.mood-surv .sp-feat-num { color: rgba(95,214,116,.45); }
html.mood-surv .sp-bento-card { background: #051a10; border: 1px solid rgba(95,214,116,.2); color: #5FD674; border-radius: 0; }
html.mood-surv .sp-bento-card.is-hero { background: #5FD674; color: #02110a; }
html.mood-surv .sp-bento-body { color: rgba(95,214,116,.7); }
html.mood-surv .sp-uses { background: rgba(95,214,116,.05); border: 1px solid rgba(95,214,116,.25); }
html.mood-surv .sp-use { background: #051a10; color: #5FD674; border-radius: 0; }
html.mood-surv .sp-use:hover { background: #082616; }
html.mood-surv .sp-use-body { color: rgba(95,214,116,.7); }
html.mood-surv .sp-faq-item { border-bottom-color: rgba(95,214,116,.2); }
html.mood-surv .sp-faq-q { color: #5FD674; }
html.mood-surv .sp-faq-q::before { content: '> '; }
html.mood-surv .sp-faq-a { color: rgba(95,214,116,.7); }
html.mood-surv .sp-related-card { background: #051a10; border-color: rgba(95,214,116,.2); color: #5FD674; border-radius: 0; }
html.mood-surv .sp-related-card:hover { border-color: #5FD674; }
html.mood-surv .sp-related-desc { color: rgba(95,214,116,.6); }
html.mood-surv .sp-cta-card { background: #02110a; border: 1px solid #5FD674; color: #5FD674; }
html.mood-surv .sp-hero h1 em { color: #5FD674; text-shadow: 0 0 12px rgba(95,214,116,.5); }
html.mood-surv .section-head h2,
html.mood-surv .sp-feat-title,
html.mood-surv .sp-bento-title,
html.mood-surv .sp-use-name { color: #5FD674; }
html.mood-surv .lead { color: rgba(95,214,116,.75); }

/* ── Mood: Lab — clinical white + cyan ────────────────────────────── */
html.mood-lab { --snap: #00B8D4; --snap-deep: #006B7A; }
html.mood-lab body { background: #F7FBFC; color: #0A2B33; }
html.mood-lab .sp-sec.is-bone { background: #F7FBFC; }
html.mood-lab .sp-sec.is-bone2 { background: #E8F4F7; }
html.mood-lab .sp-facts { background: #F7FBFC; border-bottom-color: #C2DEE5; }
html.mood-lab .sp-fact-label,
html.mood-lab .sp-fact { border-right-color: #C2DEE5; color: #0A2B33; }
html.mood-lab .sp-fact-l { color: #00B8D4; letter-spacing: .14em; }
html.mood-lab .sp-features { background: #E8F4F7; border-color: #C2DEE5; }
html.mood-lab .sp-feat { background: #F7FBFC; border: 1px solid #C2DEE5; }
html.mood-lab .sp-feat.is-hl { background: #00B8D4; color: #F7FBFC; border-color: #00B8D4; }
html.mood-lab .sp-feat.is-hl .sp-feat-mark { background: #F7FBFC; color: #00B8D4; }
html.mood-lab .sp-feat:not(.is-hl) .sp-feat-mark { background: #0A2B33; color: #F7FBFC; }
html.mood-lab .sp-bento-card { background: #F7FBFC; border: 1px solid #C2DEE5; }
html.mood-lab .sp-bento-card.is-hero { background: #0A2B33; color: #F7FBFC; border-color: #0A2B33; }
html.mood-lab .sp-uses { background: #E8F4F7; border-color: #C2DEE5; }
html.mood-lab .sp-use { background: #F7FBFC; }
html.mood-lab .sp-use:hover { background: #E8F4F7; }
html.mood-lab .sp-related-card { background: #F7FBFC; border-color: #C2DEE5; }
html.mood-lab .sp-cta-card { background: linear-gradient(135deg, #006B7A 0%, #00B8D4 60%, #7FE5F3 100%); color: #0A2B33; }
html.mood-lab .sp-hero h1 em { color: #00B8D4; }
html.mood-lab .sp-faq-item.is-open .sp-faq-toggle { color: #00B8D4; }

/* ── Mood: Noir — pure B&W high-contrast editorial ────────────────── */
html.mood-noir { --snap: #0E0E10; --snap-deep: #000; }
html.mood-noir body { background: #FAFAF7; color: #0E0E10; }
html.mood-noir .sp-sec.is-bone { background: #FAFAF7; }
html.mood-noir .sp-sec.is-bone2 { background: #fff; }
html.mood-noir .sp-facts { background: #FAFAF7; border-bottom-color: #0E0E10; }
html.mood-noir .sp-fact-label,
html.mood-noir .sp-fact { border-right-color: #0E0E10; }
html.mood-noir .sp-features { background: #fff; border: 2px solid #0E0E10; border-radius: 0; }
html.mood-noir .sp-feat { background: #fff; border-radius: 0; border: 1px solid #0E0E10; }
html.mood-noir .sp-feat.is-hl { background: #0E0E10; color: #fff; }
html.mood-noir .sp-feat.is-hl .sp-feat-mark { background: #fff; color: #0E0E10; }
html.mood-noir .sp-feat:not(.is-hl) .sp-feat-mark { background: #0E0E10; color: #fff; }
html.mood-noir .sp-bento-card { background: #fff; border: 1px solid #0E0E10; border-radius: 0; }
html.mood-noir .sp-bento-card.is-hero { background: #0E0E10; color: #fff; }
html.mood-noir .sp-uses { background: #fff; border: 1px solid #0E0E10; }
html.mood-noir .sp-use { background: #fff; border-radius: 0; border-bottom: 1px solid #0E0E10; }
html.mood-noir .sp-related-card { background: #fff; border: 1px solid #0E0E10; border-radius: 0; }
html.mood-noir .sp-cta-card { background: #0E0E10; color: #fff; border-radius: 0; }
html.mood-noir .sp-hero h1 em { color: #0E0E10; -webkit-text-stroke: 1px #0E0E10; font-style: italic; }
html.mood-noir .sp-faq-item.is-open .sp-faq-toggle { color: #0E0E10; }

/* ── Mood: Aurora — purple+teal cosmic gradient ───────────────────── */
html.mood-aurora { --snap: #7C3AED; --snap-deep: #4C1D95; }
html.mood-aurora body { background: #0F0820; color: #E9DFF7; }
html.mood-aurora .sp-sec.is-bone,
html.mood-aurora .sp-sec.is-bone2 { background: #0F0820; color: #E9DFF7; position: relative; }
html.mood-aurora .sp-sec.is-bone2 { background: #1A0F35; }
html.mood-aurora .sp-sec.is-bone::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 20% 20%, rgba(124,58,237,.18) 0%, transparent 60%),
              radial-gradient(ellipse 50% 40% at 80% 80%, rgba(20,184,166,.14) 0%, transparent 60%);
}
html.mood-aurora .sp-sec > .container { position: relative; z-index: 1; }
html.mood-aurora .sp-facts { background: #0F0820; border-bottom-color: rgba(124,58,237,.25); }
html.mood-aurora .sp-fact-label,
html.mood-aurora .sp-fact { border-right-color: rgba(124,58,237,.25); color: rgba(233,223,247,.78); }
html.mood-aurora .sp-fact-l { background: linear-gradient(90deg, #7C3AED, #14B8A6); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.mood-aurora .sp-features { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.25); }
html.mood-aurora .sp-feat { background: #1A0F35; color: #E9DFF7; border: 1px solid rgba(124,58,237,.2); }
html.mood-aurora .sp-feat.is-hl { background: linear-gradient(135deg, #7C3AED 0%, #14B8A6 100%); color: #0F0820; }
html.mood-aurora .sp-feat.is-hl .sp-feat-mark { background: #0F0820; color: #7C3AED; }
html.mood-aurora .sp-feat:not(.is-hl) .sp-feat-mark { background: linear-gradient(135deg, #7C3AED, #14B8A6); color: #0F0820; }
html.mood-aurora .sp-feat-body { color: rgba(233,223,247,.7); }
html.mood-aurora .sp-bento-card { background: #1A0F35; border: 1px solid rgba(124,58,237,.2); color: #E9DFF7; }
html.mood-aurora .sp-bento-card.is-hero { background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #14B8A6 100%); color: #0F0820; border-color: transparent; }
html.mood-aurora .sp-bento-body { color: rgba(233,223,247,.7); }
html.mood-aurora .sp-uses { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.25); }
html.mood-aurora .sp-use { background: #1A0F35; color: #E9DFF7; }
html.mood-aurora .sp-use:hover { background: #24164A; }
html.mood-aurora .sp-use-body { color: rgba(233,223,247,.7); }
html.mood-aurora .sp-faq-item { border-bottom-color: rgba(124,58,237,.2); }
html.mood-aurora .sp-faq-q { color: #E9DFF7; }
html.mood-aurora .sp-faq-a { color: rgba(233,223,247,.7); }
html.mood-aurora .sp-related-card { background: #1A0F35; border-color: rgba(124,58,237,.2); color: #E9DFF7; }
html.mood-aurora .sp-related-desc { color: rgba(233,223,247,.6); }
html.mood-aurora .sp-cta-card { background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #14B8A6 100%); color: #0F0820; }
html.mood-aurora .sp-hero h1 em { background: linear-gradient(90deg, #7C3AED, #14B8A6); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.mood-aurora .section-head h2,
html.mood-aurora .sp-feat-title,
html.mood-aurora .sp-bento-title,
html.mood-aurora .sp-use-name { color: #E9DFF7; }
html.mood-aurora .lead { color: rgba(233,223,247,.7); }

/* ── Mood: Crimson — bold red/black tech ──────────────────────────── */
html.mood-crimson { --snap: #E63946; --snap-deep: #8B0E1A; }
html.mood-crimson body { background: #0E0405; color: #FAFAF7; }
html.mood-crimson .sp-sec.is-bone,
html.mood-crimson .sp-sec.is-bone2 { background: #0E0405; color: #FAFAF7; }
html.mood-crimson .sp-sec.is-bone2 { background: #1A0708; }
html.mood-crimson .sp-facts { background: #0E0405; border-bottom-color: #2A1012; }
html.mood-crimson .sp-fact-label,
html.mood-crimson .sp-fact { border-right-color: #2A1012; color: rgba(250,250,247,.78); }
html.mood-crimson .sp-fact-l { color: #E63946; }
html.mood-crimson .sp-features { background: #1A0708; border-color: #2A1012; }
html.mood-crimson .sp-feat { background: #14060A; color: #FAFAF7; border: 1px solid #2A1012; }
html.mood-crimson .sp-feat.is-hl { background: #E63946; color: #0E0405; }
html.mood-crimson .sp-feat.is-hl .sp-feat-mark { background: #0E0405; color: #E63946; }
html.mood-crimson .sp-feat:not(.is-hl) .sp-feat-mark { background: #E63946; color: #0E0405; }
html.mood-crimson .sp-feat-body { color: rgba(250,250,247,.7); }
html.mood-crimson .sp-bento-card { background: #14060A; border: 1px solid #2A1012; color: #FAFAF7; }
html.mood-crimson .sp-bento-card.is-hero { background: linear-gradient(135deg, #8B0E1A 0%, #E63946 100%); color: #FAFAF7; border-color: transparent; }
html.mood-crimson .sp-bento-body { color: rgba(250,250,247,.7); }
html.mood-crimson .sp-uses { background: #1A0708; border-color: #2A1012; }
html.mood-crimson .sp-use { background: #14060A; color: #FAFAF7; }
html.mood-crimson .sp-use:hover { background: #1F0A0E; }
html.mood-crimson .sp-use-body { color: rgba(250,250,247,.7); }
html.mood-crimson .sp-faq-item { border-bottom-color: #2A1012; }
html.mood-crimson .sp-faq-q { color: #FAFAF7; }
html.mood-crimson .sp-faq-a { color: rgba(250,250,247,.7); }
html.mood-crimson .sp-related-card { background: #14060A; border-color: #2A1012; color: #FAFAF7; }
html.mood-crimson .sp-related-card:hover { border-color: #E63946; }
html.mood-crimson .sp-related-desc { color: rgba(250,250,247,.6); }
html.mood-crimson .sp-cta-card { background: linear-gradient(135deg, #8B0E1A 0%, #E63946 100%); color: #FAFAF7; }
html.mood-crimson .sp-hero h1 em { color: #E63946; }
html.mood-crimson .section-head h2,
html.mood-crimson .sp-feat-title,
html.mood-crimson .sp-bento-title,
html.mood-crimson .sp-use-name { color: #FAFAF7; }
html.mood-crimson .lead { color: rgba(250,250,247,.7); }

/* ── Mood: Mint — fresh teal editorial ────────────────────────────── */
html.mood-mint { --snap: #14B8A6; --snap-deep: #0F766E; }
html.mood-mint body { background: #F2FAF8; color: #0F2E2A; }
html.mood-mint .sp-sec.is-bone { background: #F2FAF8; }
html.mood-mint .sp-sec.is-bone2 { background: #DDF3EE; }
html.mood-mint .sp-facts { background: #F2FAF8; border-bottom-color: #B5DFD5; }
html.mood-mint .sp-fact-label,
html.mood-mint .sp-fact { border-right-color: #B5DFD5; }
html.mood-mint .sp-fact-l { color: #14B8A6; }
html.mood-mint .sp-features { background: #DDF3EE; border-color: #B5DFD5; }
html.mood-mint .sp-feat { background: #F2FAF8; }
html.mood-mint .sp-feat.is-hl { background: #0F2E2A; color: #F2FAF8; }
html.mood-mint .sp-feat.is-hl .sp-feat-mark { background: #14B8A6; color: #0F2E2A; }
html.mood-mint .sp-feat:not(.is-hl) .sp-feat-mark { background: #0F2E2A; color: #F2FAF8; }
html.mood-mint .sp-bento-card { background: #F2FAF8; border-color: #B5DFD5; }
html.mood-mint .sp-bento-card.is-hero { background: #0F2E2A; color: #F2FAF8; border-color: #0F2E2A; }
html.mood-mint .sp-uses { background: #DDF3EE; border-color: #B5DFD5; }
html.mood-mint .sp-use { background: #F2FAF8; }
html.mood-mint .sp-use:hover { background: #DDF3EE; }
html.mood-mint .sp-related-card { background: #F2FAF8; border-color: #B5DFD5; }
html.mood-mint .sp-cta-card { background: linear-gradient(135deg, #0F766E 0%, #14B8A6 60%, #5EEAD4 100%); color: #0F2E2A; }
html.mood-mint .sp-hero h1 em { color: #14B8A6; }
html.mood-mint .sp-faq-item.is-open .sp-faq-toggle { color: #14B8A6; }