/* ============================================================
   SHOWCASE variant — dark identity islands + mode-aware bands
   vivid-frequency · css/variants/showcase.css   (S1.5 · Dispatch 2 · R5/R6 token conformance, per vf.p4.light_inversion_pattern)

   ISLAND SCOPE (locked):
     DARK ISLANDS  (literal --sa-void, never flip):
        1 hero · 4 callout · 10 CTA strip · device-mockup chrome
     MODE-AWARE BANDS (flip via --vf-* tokens):
        2 grid · 3 feature cards · 5 process · 6 testimonial
        7 integrations · 8 FAQ · 9 pricing
     --accent / --accent-ink + variant-local palette (--t1..t7 + brand locals) : mode-independent (R5/R6).
   Token map: parchment bands→--vf-surface · alt bands→--vf-surface-rhythm
   · cards→--vf-surface-alt · hairline→--vf-border · text→--vf-text/
   --vf-heading/--vf-text-muted/--vf-text-subtle.
   NO !important anywhere; button colours hold via scope/specificity.
   ============================================================ */

/* Root + accent maps (accent system unchanged) */
.sa-shw{font-family:var(--sa-font);--accent:#FF008B;--accent-ink:#A1005A;--shakti-pink:#FF0060;--shakti-magenta:#FF008B;--spirit-blue:#0896F2;--anahata-green:#A7FF00;--electric-violet:#9000FF;--t1:#FF1500;--t2:#FF5500;--t3:#FFD000;--t4:#A7FF00;--t5:#0896F2;--t6:#9000FF;--t7:#FF008B;color:var(--vf-text);font-size:16px;line-height:1.65;overflow-x:hidden}
.sa-shw.sa-accent-shakti-pink{--accent:#FF0060;--accent-ink:#A10039}
.sa-shw.sa-accent-shakti-magenta{--accent:#FF008B;--accent-ink:#A1005A}
.sa-shw.sa-accent-spirit-blue{--accent:#0896F2;--accent-ink:#0567A6}
.sa-shw.sa-accent-anahata-green{--accent:#A7FF00;--accent-ink:#3B6D11}
.sa-shw.sa-accent-electric-violet{--accent:#9000FF;--accent-ink:#5A00A1}
.sa-shw *,.sa-shw *::before,.sa-shw *::after{box-sizing:border-box;margin:0;padding:0}
.sa-shw a{color:inherit;text-decoration:none}
.sa-shw section{position:relative}

/* Shared: .sa-cta-row base + the two missing buttons (no !important) */
.sa-shw .sa-cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.sa-shw .sa-btn-light,.sa-shw a.sa-btn-light,
.sa-shw .sa-btn-void,.sa-shw a.sa-btn-void{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 1.75rem;border-radius:var(--vf-radius-pill);font-family:var(--sa-font);font-weight:var(--sa-weight-heading);font-size:15px;line-height:1;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s,background .2s}
.sa-shw .sa-btn-light,.sa-shw a.sa-btn-light{background:var(--sa-parchment);color:var(--sa-void);box-shadow:0 8px 28px color-mix(in srgb,#000 25%,transparent)}
.sa-shw .sa-btn-light:hover,.sa-shw a.sa-btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 40px color-mix(in srgb,#000 35%,transparent);color:var(--sa-void)}
.sa-shw .sa-btn-void,.sa-shw a.sa-btn-void{background:color-mix(in srgb,var(--sa-parchment) 4%,transparent);border-color:color-mix(in srgb,var(--sa-parchment) 28%,transparent);color:var(--sa-parchment)}
.sa-shw .sa-btn-void:hover,.sa-shw a.sa-btn-void:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(-2px);color:var(--sa-parchment)}

/* ===== 1 HERO — DARK ISLAND (locked, --sa-void) ===== */
.sa-shw .sa-shw-hero{padding:8rem 1.5rem 5rem;background:var(--sa-void);color:var(--sa-parchment);overflow:hidden;isolation:isolate}
.sa-shw-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 15% 20%,color-mix(in srgb,var(--accent) 28%,transparent) 0%,transparent 55%),radial-gradient(ellipse at 85% 80%,color-mix(in srgb,var(--electric-violet) 22%,transparent) 0%,transparent 55%),linear-gradient(160deg,#0a0a18 0%,#0D0D1A 45%,#07091a 100%);z-index:-1}
.sa-shw-hero-dots{position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,#fff 5%,transparent) 1px,transparent 1px);background-size:40px 40px;z-index:-1;pointer-events:none}
.sa-shw-orb{position:absolute;width:400px;height:400px;border-radius:50%;filter:blur(80px);opacity:.3;z-index:-1}
.sa-shw-orb-1{top:-100px;right:-100px;background:var(--accent)}
.sa-shw-orb-2{bottom:-120px;left:-80px;background:var(--electric-violet)}
.sa-shw-hero-inner{position:relative;max-width:1200px;margin:0 auto;text-align:center;z-index:1}
.sa-shw-hero-inner .sa-chakrapulse{justify-content:center;margin-bottom:1.5rem}
.sa-shw-badge{display:inline-block;padding:6px 16px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 80%,#fff);margin-bottom:1rem}
.sa-shw-badge:empty{display:none}
.sa-shw-tagline{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--sa-parchment) 55%,transparent);margin-bottom:1.25rem}
.sa-shw-tagline:empty{display:none}
.sa-shw-title{font-size:clamp(2.6rem,5.5vw,4.5rem);font-weight:800;line-height:1.05;letter-spacing:-.035em;margin:0 0 1.1rem;color:var(--sa-parchment)}
.sa-shw-title .sa-grad{background:linear-gradient(135deg,#C8004E,#FF0060,#FF7AB8,#FF008B,#C8004E);background-size:235% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;will-change:background-position;animation:sa-shw-shakti 7s ease-in-out infinite}
@keyframes sa-shw-shakti{0%{background-position:0% center}50%{background-position:100% center}100%{background-position:0% center}}
.sa-shw-sub{font-size:clamp(1rem,1.6vw,1.2rem);color:color-mix(in srgb,var(--sa-parchment) 72%,transparent);line-height:1.6;max-width:720px;margin:0 auto 2rem}
.sa-shw-sub:empty{display:none}
.sa-shw-hero-inner .sa-cta-row{justify-content:center}
.sa-shw-stats{display:flex;gap:3rem;justify-content:center;margin:2.5rem auto 3rem;flex-wrap:wrap}
.sa-shw-stats .sa-stat{text-align:center}
.sa-shw-stats .sa-stat b{display:block;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;color:var(--accent);line-height:1}
.sa-shw-stats .sa-stat span{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--sa-parchment) 50%,transparent);margin-top:.3rem}

/* Device mockup — DARK ISLAND chrome (locked, literal) */
.sa-shw-device{max-width:960px;margin:0 auto;background:#1a1a2e;border:1px solid color-mix(in srgb,var(--sa-parchment) 12%,transparent);border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -20px color-mix(in srgb,#000 60%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent) inset}
.sa-shw-device-bar{display:flex;align-items:center;gap:8px;padding:.75rem 1rem;background:#0f0f1a;border-bottom:1px solid color-mix(in srgb,var(--sa-parchment) 6%,transparent)}
.sa-shw-device-bar .d1,.sa-shw-device-bar .d2,.sa-shw-device-bar .d3{width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--sa-parchment) 15%,transparent)}
.sa-shw-device-bar .d1{background:#ff5f56}
.sa-shw-device-bar .d2{background:#ffbd2e}
.sa-shw-device-bar .d3{background:#27c93f}
.sa-shw-url-pill{margin-left:auto;padding:4px 14px;background:color-mix(in srgb,var(--sa-parchment) 6%,transparent);border-radius:999px;font-size:12px;color:color-mix(in srgb,var(--sa-parchment) 55%,transparent);font-family:Menlo,Monaco,monospace}
.sa-shw-device-screen img{display:block;width:100%;height:auto}

/* ===== 2 GRID — MODE-AWARE BAND · layout 2b-i ===== */
/* device-framed landscape dominant on top, then portrait | overview row.
   .sa-shw-right is display:contents so its children (device, overview)
   join the grid alongside the portrait (a sibling of .sa-shw-right). */
.sa-shw .sa-shw-grid{padding:3.5rem 1.5rem;background:var(--vf-surface)}
.sa-shw-grid-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"device device" "portrait overview";gap:2.5rem 3rem;align-items:start}
.sa-shw-grid-inner .sa-shw-right{display:contents}
.sa-shw-grid-inner .sa-shw-portrait{grid-area:portrait}
.sa-shw-grid-inner .sa-shw-ov{grid-area:overview}
.sa-shw-grid-inner .sa-shw-land.sa-shw-device--grid{grid-area:device;width:100%;max-width:820px;margin:0 auto}
.sa-shw-grid-inner:not(:has(.sa-shw-portrait)) .sa-shw-ov{grid-column:1 / -1;max-width:760px;margin:0 auto;text-align:center}
.sa-shw-portrait img,.sa-shw-land img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 20px 50px -15px color-mix(in srgb,var(--sa-void) 20%,transparent)}
/* device-frame follow-ups (CB 3271 Dispatch-1 markup) */
.sa-shw-device--grid .sa-shw-device-screen img{border-radius:0;box-shadow:none}
.sa-shw-ov-ew{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);padding:5px 14px;background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:999px;margin-bottom:.9rem}
.sa-shw-ov-title{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;line-height:1.12;letter-spacing:-.025em;color:var(--vf-heading);margin-bottom:1rem}
.sa-shw-ov-title em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--shakti-magenta));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sa-shw-ov-body{font-size:15.5px;line-height:1.7;color:var(--vf-text)}
.sa-shw-ov-body p{margin-bottom:1em}
.sa-shw-ov-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,transparent);padding-bottom:2px;margin-top:1rem}
@media(max-width:860px){
.sa-shw-grid-inner{grid-template-columns:1fr;grid-template-areas:"device" "portrait" "overview";gap:2rem}
.sa-shw-grid-inner .sa-shw-land.sa-shw-device--grid{max-width:100%}
}

/* ===== 3 FEATURE CARDS — MODE-AWARE BAND (alt) ===== */
.sa-shw .sa-shw-feats{padding:4rem 1.5rem;background:var(--vf-surface-rhythm)}
.sa-shw-feats-head{max-width:800px;margin:0 auto 2.5rem;text-align:center}
.sa-shw-feats-ew{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);padding:5px 14px;background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:999px;margin-bottom:.9rem}
.sa-shw-feats-title{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;line-height:1.12;letter-spacing:-.025em;color:var(--vf-heading)}
.sa-shw-fcards{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.sa-shw-fcards .sa-fcard{background:var(--vf-surface-alt);border:1px solid var(--vf-border);border-radius:14px;padding:1.5rem 1.4rem;transition:all .25s;position:relative}
.sa-shw-fcards .sa-fcard:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);transform:translateY(-4px);box-shadow:0 20px 40px -15px color-mix(in srgb,var(--accent) 20%,transparent)}
.sa-shw-fcards .sa-fcard-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-bottom:1rem;box-shadow:0 0 16px color-mix(in srgb,var(--accent) 60%,transparent)}
.sa-shw-fcards .sa-fcard:nth-child(7n+1) .sa-fcard-dot{background:var(--t1);box-shadow:0 0 16px color-mix(in srgb,var(--t1) 50%,transparent)}
.sa-shw-fcards .sa-fcard:nth-child(7n+2) .sa-fcard-dot{background:var(--t2);box-shadow:0 0 16px color-mix(in srgb,var(--t2) 50%,transparent)}
.sa-shw-fcards .sa-fcard:nth-child(7n+3) .sa-fcard-dot{background:var(--t3);box-shadow:0 0 16px color-mix(in srgb,var(--t3) 50%,transparent)}
.sa-shw-fcards .sa-fcard:nth-child(7n+4) .sa-fcard-dot{background:var(--t4);box-shadow:0 0 16px color-mix(in srgb,var(--t4) 50%,transparent)}
.sa-shw-fcards .sa-fcard:nth-child(7n+5) .sa-fcard-dot{background:var(--t5);box-shadow:0 0 16px color-mix(in srgb,var(--t5) 50%,transparent)}
.sa-shw-fcards .sa-fcard:nth-child(7n+6) .sa-fcard-dot{background:var(--t6);box-shadow:0 0 16px color-mix(in srgb,var(--t6) 50%,transparent)}
.sa-shw-fcards .sa-fcard:nth-child(7n+7) .sa-fcard-dot{background:var(--t7);box-shadow:0 0 16px color-mix(in srgb,var(--t7) 50%,transparent)}
.sa-shw-fcards .sa-fcard h3{font-size:16px;font-weight:800;color:var(--vf-heading);margin-bottom:.4rem;letter-spacing:-.01em}
.sa-shw-fcards .sa-fcard p{font-size:14px;line-height:1.55;color:var(--vf-text-muted)}

/* ===== 4 CALLOUT — DARK ISLAND (locked, --sa-void) ===== */
.sa-shw .sa-shw-callout{padding:4rem 1.5rem;background:var(--sa-void);color:var(--sa-parchment);overflow:hidden}
.sa-shw-callout-inner{max-width:960px;margin:0 auto;padding:2.5rem;background:color-mix(in srgb,var(--accent) 6%,transparent);border-left:4px solid var(--accent);border-radius:0 16px 16px 0}
.sa-shw-callout-img{max-width:960px;margin:0 auto 2rem}
.sa-shw-callout-img img{display:block;width:100%;border-radius:16px;box-shadow:0 30px 60px -20px color-mix(in srgb,#000 50%,transparent)}
.sa-shw-co-bar{width:60px;height:3px;background:var(--accent);margin-bottom:1rem;border-radius:2px}
.sa-shw-co-title{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;line-height:1.15;margin-bottom:.75rem;color:var(--sa-parchment)}
.sa-shw-co-body{font-size:15.5px;line-height:1.65;color:color-mix(in srgb,var(--sa-parchment) 72%,transparent);margin-bottom:1.5rem}

/* ===== 5 PROCESS — MODE-AWARE BAND (base) ===== */
.sa-shw .sa-shw-process{padding:5rem 1.5rem;background:var(--vf-surface)}
.sa-shw-proc-head{max-width:800px;margin:0 auto 3rem;text-align:center}
.sa-shw-proc-ew{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);padding:5px 14px;background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:999px;margin-bottom:.9rem}
.sa-shw-proc-title{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;line-height:1.12;color:var(--vf-heading);margin-bottom:.5rem}
.sa-shw-proc-intro{font-size:15.5px;color:var(--vf-text-muted);max-width:620px;margin:0 auto}
.sa-shw-steps{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.sa-shw-steps .sa-step{background:var(--vf-surface-alt);border:1px solid var(--vf-border);border-radius:14px;padding:1.5rem}
.sa-shw-steps .sa-step-n{display:inline-block;font-size:2rem;font-weight:800;color:var(--accent);margin-bottom:.5rem;letter-spacing:-.04em}
.sa-shw-steps .sa-step strong{display:block;font-size:16px;font-weight:800;color:var(--vf-heading);margin-bottom:.4rem}
.sa-shw-steps .sa-step p{font-size:14px;line-height:1.55;color:var(--vf-text-muted)}

/* ===== 6 TESTIMONIAL — MODE-AWARE BAND (alt) ===== */
.sa-shw .sa-shw-testi{padding:4rem 1.5rem;background:var(--vf-surface-rhythm)}
.sa-shw-testi-wrap{max-width:820px;margin:0 auto}
.sa-shw .sa-testi-card{background:var(--vf-surface-alt);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:20px;padding:2.75rem 2.25rem;box-shadow:0 24px 50px -18px color-mix(in srgb,var(--sa-void) 10%,transparent)}
.sa-shw .sa-testi-card .sa-testi-quote{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.55;color:var(--vf-text);font-weight:500;font-style:italic;margin-bottom:1.5rem}
.sa-shw .sa-testi-card .sa-testi-meta{display:flex;align-items:center;gap:1rem;padding-left:1rem;border-left:3px solid var(--accent)}
.sa-shw .sa-testi-card .sa-testi-meta b{font-size:15px;font-weight:800;color:var(--vf-heading);display:block}
.sa-shw .sa-testi-card .sa-testi-meta span{font-size:13px;color:var(--vf-text-subtle);display:block;margin-top:2px}

/* ===== 7 INTEGRATIONS — MODE-AWARE BAND (base) ===== */
.sa-shw .sa-shw-intg{padding:4rem 1.5rem;background:var(--vf-surface)}
.sa-shw-intg-head{max-width:800px;margin:0 auto 2rem;text-align:center}
.sa-shw-intg-ew{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);padding:5px 14px;background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:999px;margin-bottom:.9rem}
.sa-shw-intg-title{font-size:clamp(1.6rem,2.6vw,2rem);font-weight:800;color:var(--vf-heading)}
.sa-shw-intg-grid{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sa-shw-intg-grid .sa-intg-item{padding:10px 18px;background:var(--vf-surface-alt);border:1px solid var(--vf-border);border-radius:999px;font-size:13px;font-weight:700;color:var(--vf-text);transition:all .2s;cursor:default}
.sa-shw-intg-grid .sa-intg-item:hover{border-color:var(--accent);color:var(--accent)}

/* ===== 8 FAQ — MODE-AWARE BAND (alt) ===== */
.sa-shw .sa-shw-faq{padding:4rem 1.5rem;background:var(--vf-surface-rhythm)}
.sa-shw-faq-head{max-width:800px;margin:0 auto 2rem;text-align:center}
.sa-shw-faq-ew{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);padding:5px 14px;background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:999px;margin-bottom:.9rem}
.sa-shw-faq-title{font-size:clamp(1.6rem,2.6vw,2rem);font-weight:800;color:var(--vf-heading)}
.sa-shw-faq-wrap{max-width:820px;margin:0 auto}
.sa-shw-faq-wrap .sa-faq-item{background:var(--vf-surface-alt);border:1px solid var(--vf-border);border-radius:14px;margin-bottom:.75rem;overflow:hidden}
.sa-shw-faq-wrap .sa-faq-item[open]{border-color:var(--accent)}
.sa-shw-faq-wrap .sa-faq-item summary{list-style:none;padding:1.1rem 3.2rem 1.1rem 1.4rem;cursor:pointer;position:relative;font-weight:700;font-size:15px;color:var(--vf-text)}
.sa-shw-faq-wrap .sa-faq-item summary::-webkit-details-marker{display:none}
.sa-shw-faq-wrap .sa-faq-item summary::after{content:'+';position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;transition:all .25s}
.sa-shw-faq-wrap .sa-faq-item[open] summary::after{content:'\2212';background:var(--accent);color:#fff}
.sa-shw-faq-wrap .sa-faq-item .a{padding:0 1.4rem 1.2rem;font-size:14.5px;line-height:1.65;color:var(--vf-text-muted)}

/* ===== 9 PRICING — MODE-AWARE BAND (base) ===== */
.sa-shw .sa-shw-pricing{padding:4rem 1.5rem;background:var(--vf-surface)}
.sa-shw-pricing-head{max-width:800px;margin:0 auto 2rem;text-align:center}
.sa-shw-pricing-ew{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);padding:5px 14px;background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:999px;margin-bottom:.9rem}
.sa-shw-pricing-title{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;color:var(--vf-heading)}
.sa-shw-price-card{max-width:720px;margin:0 auto;background:var(--vf-surface-alt);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -20px color-mix(in srgb,var(--accent) 15%,transparent)}
.sa-shw-price-card::before{content:'';display:block;height:4px;background:linear-gradient(90deg,var(--accent),var(--shakti-magenta))}
.sa-shw-price-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:1rem;padding:1.75rem 2rem 1.25rem;border-bottom:1px solid var(--vf-border)}
.sa-shw-price-name{font-size:1.3rem;font-weight:800;color:var(--vf-heading)}
.sa-shw-price-tag strong{font-size:2.2rem;font-weight:800;color:var(--accent)}
.sa-shw-price-tag em{font-style:normal;font-size:.85em;color:var(--vf-text-subtle);margin-left:2px}
.sa-shw-price-inc{padding:1.25rem 2rem;font-size:14px;color:var(--vf-text-muted);line-height:1.5;background:var(--vf-surface-rhythm)}
.sa-shw-price-btns{padding:1.25rem 2rem 1.75rem;display:flex;gap:12px;flex-wrap:wrap}
.sa-shw-price-btns .sa-btn-primary{background:var(--accent);box-shadow:0 8px 28px color-mix(in srgb,var(--accent) 30%,transparent)}
.sa-shw .sa-shw-price-btns .sa-btn-ghost{color:var(--vf-text);border-color:var(--vf-border);background:transparent}
.sa-shw .sa-shw-price-btns .sa-btn-ghost:hover{border-color:var(--vf-text);background:var(--vf-surface-tint)}

/* ===== 10 CTA STRIP — DARK ISLAND (locked, --sa-void) ===== */
.sa-shw .sa-shw-cta{padding:5rem 1.5rem;background:var(--sa-void);color:var(--sa-parchment);overflow:hidden;position:relative}
.sa-shw-cta-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,color-mix(in srgb,var(--accent) 20%,transparent) 0%,transparent 60%),radial-gradient(ellipse at 70% 50%,color-mix(in srgb,var(--electric-violet) 18%,transparent) 0%,transparent 60%);z-index:0}
.sa-shw-cta-dots{position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,#fff 5%,transparent) 1px,transparent 1px);background-size:40px 40px;z-index:0;pointer-events:none}
.sa-shw-cta-inner{max-width:800px;margin:0 auto;text-align:center;position:relative;z-index:1}
.sa-shw-cta-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.025em;margin-bottom:1rem;color:var(--sa-parchment)}
.sa-shw-cta-sub{font-size:16px;color:color-mix(in srgb,var(--sa-parchment) 72%,transparent);line-height:1.6;margin-bottom:2rem}
.sa-shw-cta-inner .sa-cta-row{justify-content:center}

/* ===== Mobile ===== */
@media(max-width:760px){.sa-shw-hero{padding:5rem 1.25rem 3.5rem}.sa-shw-stats{gap:1.5rem}.sa-shw-stats .sa-stat b{font-size:1.4rem}.sa-shw-device{border-radius:12px}}

/* ===== Dark-island ghost-button lock (render-verify fix, Dispatch 2) =====
   In light mode the shared `body.vf--light a.sa-btn-ghost` rule (style.css)
   flips ghost text to --sa-void; on the locked-dark hero island that renders
   void-on-void (invisible). Lock the hero ghost to its dark-island look in
   BOTH modes. Specificity (0,3,1) beats body.vf--light a.sa-btn-ghost (0,2,2);
   no !important. */
.sa-shw .sa-shw-hero a.sa-btn-ghost{background:color-mix(in srgb,var(--spirit-blue) 10%,transparent);border-color:color-mix(in srgb,var(--spirit-blue) 35%,transparent);color:var(--sa-parchment)}
.sa-shw .sa-shw-hero a.sa-btn-ghost:hover{background:var(--sa-shakti-gradient);border-color:transparent;color:var(--sa-parchment)}

/* ===== LIGHT-MODE INVERSION (P4 — Vikas: no fixed islands, everything flips) =====
   Per vf.p4.light_inversion_pattern. Void stays identical (rules above); these
   .vf--light overrides give showcase's four dark sections + dark buttons a light
   form. The device mockup takes a natural light browser-chrome. */
/* hero */
.vf--light .sa-shw .sa-shw-hero{background:var(--vf-surface);color:var(--vf-heading)}
.vf--light .sa-shw .sa-shw-hero-bg{background:radial-gradient(ellipse at 15% 20%,color-mix(in srgb,var(--accent) 14%,transparent) 0%,transparent 55%),radial-gradient(ellipse at 85% 80%,color-mix(in srgb,var(--electric-violet) 10%,transparent) 0%,transparent 55%),linear-gradient(160deg,#FBF9FF 0%,#FAFAF7 45%,#F4F0FB 100%)}
.vf--light .sa-shw .sa-shw-hero-dots{background-image:radial-gradient(circle,color-mix(in srgb,var(--electric-violet) 6%,transparent) 1px,transparent 1px)}
.vf--light .sa-shw .sa-shw-tagline{color:var(--vf-text-subtle)}
.vf--light .sa-shw .sa-shw-title{color:var(--vf-heading)}
.vf--light .sa-shw .sa-shw-title .sa-grad{background:linear-gradient(135deg,#6B0030,#C8004E,#FF008B,#C8004E,#6B0030);background-size:235% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;will-change:background-position;animation:sa-shw-shakti 7s ease-in-out infinite}
.vf--light .sa-shw .sa-shw-sub{color:var(--vf-text-muted)}
.vf--light .sa-shw .sa-shw-stats .sa-stat span{color:var(--vf-text-subtle)}
/* device mockup — light browser chrome */
.vf--light .sa-shw .sa-shw-device{background:#fff;border-color:var(--vf-border);box-shadow:0 40px 80px -20px color-mix(in srgb,var(--sa-void) 18%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent) inset}
.vf--light .sa-shw .sa-shw-device-bar{background:#f3f1ee;border-bottom-color:var(--vf-border)}
.vf--light .sa-shw .sa-shw-url-pill{background:color-mix(in srgb,var(--sa-void) 5%,transparent);color:var(--vf-text-subtle)}
/* callout (emphasis band) */
.vf--light .sa-shw .sa-shw-callout{background:var(--vf-surface-rhythm);color:var(--vf-heading)}
.vf--light .sa-shw .sa-shw-co-title{color:var(--vf-heading)}
.vf--light .sa-shw .sa-shw-co-body{color:var(--vf-text-muted)}
/* CTA strip */
.vf--light .sa-shw .sa-shw-cta{background:var(--vf-surface);color:var(--vf-heading)}
.vf--light .sa-shw .sa-shw-cta-bg{background:radial-gradient(ellipse at 30% 50%,color-mix(in srgb,var(--accent) 12%,transparent) 0%,transparent 60%),radial-gradient(ellipse at 70% 50%,color-mix(in srgb,var(--electric-violet) 10%,transparent) 0%,transparent 60%)}
.vf--light .sa-shw .sa-shw-cta-dots{background-image:radial-gradient(circle,color-mix(in srgb,var(--electric-violet) 6%,transparent) 1px,transparent 1px)}
.vf--light .sa-shw .sa-shw-cta-title{color:var(--vf-heading)}
.vf--light .sa-shw .sa-shw-cta-sub{color:var(--vf-text-muted)}
/* dark-styled buttons (hero + cta) flip to light */
.vf--light .sa-shw .sa-btn-light,.vf--light .sa-shw a.sa-btn-light{background:var(--sa-void);color:var(--sa-parchment)}
.vf--light .sa-shw .sa-btn-void,.vf--light .sa-shw a.sa-btn-void{background:color-mix(in srgb,var(--sa-void) 4%,transparent);border-color:color-mix(in srgb,var(--sa-void) 28%,transparent);color:var(--vf-heading)}
/* hero ghost (View Plans): pair the 204-205 dark-island lock with a light form
   so it flips with the now-light hero. Mirrors story.css 251-252. Specificity
   (0,4,1) beats the lock (0,3,1); no !important. */
.vf--light .sa-shw .sa-shw-hero a.sa-btn-ghost{background:color-mix(in srgb,var(--sa-deep-violet-dark) 4%,transparent);border-color:color-mix(in srgb,var(--sa-deep-violet-dark) 30%,transparent);color:var(--sa-deep-violet-dark)}
.vf--light .sa-shw .sa-shw-hero a.sa-btn-ghost:hover{background:var(--sa-shakti-gradient);border-color:transparent;color:var(--sa-parchment)}

/* ===== IMAGE BANDS + grid/pricing rework (service-build 2026-06-22, v11.7.25) =====
   Showcase harmonised with classic: features-led landscape bands, portrait beside
   the overview, two-card pricing with a conditional membership-inclusion line.
   Bands render at natural aspect (no crop, no letterbox) in the showcase style. */
.sa-shw .sa-shw-band{padding:3rem 1.5rem;background:var(--vf-surface)}
.sa-shw .sa-shw-band-inner{max-width:1100px;margin:0 auto}
.sa-shw .sa-shw-band-inner img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 30px 70px -20px color-mix(in srgb,var(--sa-void) 25%,transparent)}
/* overview + portrait: device row removed, portrait now sits to the right of the narrative */
.sa-shw .sa-shw-grid-inner{grid-template-columns:1.1fr 1fr;grid-template-areas:"overview portrait"}
@media(max-width:760px){.sa-shw .sa-shw-grid-inner{grid-template-areas:"overview" "portrait"}}
/* two equal price cards */
.sa-shw .sa-shw-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.5rem;max-width:760px;margin:0 auto;align-items:start}
.sa-shw .sa-shw-price-grid .sa-shw-price-card{max-width:none;margin:0}
.sa-shw .sa-shw-price-note{color:var(--vf-text-muted,#5b6472);font-size:14px;line-height:1.55;padding:0 1.6rem;margin:.4rem 0 1.1rem}
.sa-shw .sa-shw-price-grid + .sa-shw-price-inc{max-width:760px;margin:1.5rem auto 0;text-align:center}
@media(max-width:640px){.sa-shw .sa-shw-price-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.sa-shw-title .sa-grad{animation:none;background-position:0% center}}