/* ============================================================
LAST DANCE IT — page shell (Phase-2 scaffold)
EMPTY scoped scaffold. Applies the SHARED shell ONLY:
canonical tokens, light page ground, page width, inter-section
spacing. NO section-specific design, no content, no components.
Wrapper scope: #lp-last-dance-it (dir=rtl) — WordPress-safe
(everything namespaced; no global bare-tag selectors).
Tokens below = the canonical brand/tokens.css :root block,
inlined verbatim and scoped here per SHELL.md §1.
============================================================ */
/* — Canonical Zuzy tokens — the FULL design-system contract, scoped.
Inlined from design-system/styles.css's @import chain (tokens/colors ·
typography · spacing · shape) so every --zuzy-* a DS .zz-* class or a
folded section references resolves in-page. Values verbatim; warm STONE
neutrals (never slate); one easeInOut curve. (DS fonts.css → the
in index.html, which now loads IBM Plex Sans Hebrew + Mono.) — */
#lp-last-dance-it {
/* Brand */
--zuzy-purple: #8b5cf6; --zuzy-purple-600: #7c3aed;
--zuzy-teal: #14b8a6; --zuzy-teal-600: #0d9488;
--zuzy-ink: #342e4c; --zuzy-ink-2: #211d33;
/* Warm "stone" neutral ramp — CANONICAL (steps 300/500/700/800 absent) */
--zuzy-stone-50: #fdfcff;
--zuzy-stone-100: #f7f5fc;
--zuzy-stone-200: #ddd8eb;
--zuzy-stone-400: #c4bdd7;
--zuzy-stone-600: #9b94ae;
--zuzy-stone-900: #1a181e;
/* Neutrals (light mode) — point at the stone ramp */
--zuzy-fg: var(--zuzy-stone-900);
--zuzy-muted: var(--zuzy-stone-600);
--zuzy-stone-700: #67617d;
--zuzy-muted-text: var(--zuzy-stone-700); /* secondary/body text on light — AA (brand tokens.css 2026-07-03) */
--zuzy-bg: var(--zuzy-stone-50);
--zuzy-surface: var(--zuzy-stone-100);
--zuzy-line: rgba(26, 24, 30, .08);
/* Dark mode — tinted surfaces (never near-black) */
--zuzy-surface-dark-1: #131216;
--zuzy-surface-dark-2: #19181d;
--zuzy-surface-dark-3: #28272d;
--zuzy-bg-dark: var(--zuzy-surface-dark-1);
--zuzy-card-dark: var(--zuzy-surface-dark-2);
--zuzy-text-dark: #fdfcff;
--zuzy-line-dark: rgba(253, 252, 255, .10);
/* Status palette — UI badges/toasts ONLY */
--zuzy-status-success: #10b981;
--zuzy-status-warning: #f59e0b;
--zuzy-status-error: #ef4444;
--zuzy-status-info: #3b82f6;
/* Data-viz palette (chart semantics only — page charts use the
LOCKED #7C3AED→#49F5F4 ramp, not these; kept for token parity) */
--zuzy-viz-red: #ff6384;
--zuzy-viz-blue: #36a2eb;
--zuzy-viz-yellow: #ffcd56;
--zuzy-viz-teal: #4bc0c0;
--zuzy-viz-purple: #9966ff;
--zuzy-viz-orange: #ff9f40;
--zuzy-viz-grey: #c9cbcf;
/* Logo spot colors — artwork keeps its OWN colors (never recolor to UI purple) */
--zuzy-logo-indigo: #342e4c;
--zuzy-logo-purple: #664bd6;
/* Typography — families */
--zuzy-font: "IBM Plex Sans Hebrew", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--zuzy-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
/* Typography — weights (DS; consumed by many .zz-* + folded sections) */
--zuzy-weight-light: 300;
--zuzy-weight-regular: 400;
--zuzy-weight-medium: 500;
--zuzy-weight-semibold: 600;
--zuzy-weight-bold: 700;
/* Typography — type scale (font-size / line-height) */
--zuzy-text-h1: 30px; --zuzy-leading-h1: 36px;
--zuzy-text-h2: 24px; --zuzy-leading-h2: 32px;
--zuzy-text-h3: 20px; --zuzy-leading-h3: 28px;
--zuzy-text-body: 16px; --zuzy-leading-body: 24px;
--zuzy-text-sm: 14px; --zuzy-leading-sm: 20px;
--zuzy-text-caption: 12px; --zuzy-leading-caption: 16px;
/* Typography — tracking + long-form leading */
--zuzy-tracking-heading: -0.02em;
--zuzy-tracking-normal: 0;
--zuzy-leading-prose: 1.7;
/* Spacing scale */
--zuzy-space-xs: 4px; --zuzy-space-sm: 8px; --zuzy-space-md: 16px;
--zuzy-space-lg: 24px; --zuzy-space-xl: 32px; --zuzy-space-2xl: 48px;
/* Shape */
--zuzy-radius-card: 12px;
--zuzy-radius-input: 8px;
--zuzy-radius-btn: 10px;
--zuzy-radius-pill: 999px;
--zuzy-radius-email-cta: 20px;
/* Elevation — purple-tinted */
--zuzy-shadow: 0 1px 2px rgba(52, 46, 76, .06), 0 10px 30px rgba(139, 92, 246, .10);
--zuzy-shadow-lg: 0 8px 24px rgba(139, 92, 246, .16), 0 30px 60px rgba(52, 46, 76, .16);
--zuzy-ring: 0 0 0 3px rgba(139, 92, 246, .20);
/* Glow — the "glowing data point" aesthetic */
--zuzy-glow-purple: drop-shadow(0 0 2px rgba(139, 92, 246, .15));
--zuzy-glow-purple-strong: drop-shadow(0 0 6px rgba(139, 92, 246, .5));
--zuzy-glow-teal: drop-shadow(0 0 2px rgba(20, 184, 166, .15));
--zuzy-glow-teal-strong: drop-shadow(0 0 6px rgba(20, 184, 166, .5));
/* Gradient + motion — the ONE Zuzy curve (easeInOut) + its durations.
(Sections reference --zuzy-dur-enter/.stagger/.dur-hover bare; defining
them here makes those refs valid — DONE.md §4 flag.) */
--zuzy-grad: linear-gradient(135deg, var(--zuzy-purple), var(--zuzy-teal));
--zuzy-ease: cubic-bezier(.42, 0, .58, 1);
--zuzy-dur-hover: .18s;
--zuzy-dur-enter: .5s;
--zuzy-stagger: .1s;
/* Page-local vars (un-prefixed, allowed per SHELL §1) */
--maxw: 1200px;
--composition: 1760px; /* Width Law v2.1: uniform content-composition cap (Gil: bounded, not stretched) */
--wa: #1E874B; /* WhatsApp green (§13/footer) */
--on-dark: #fdfcff; /* on-dark neutral tints (§7/footer) */
--on-dark-muted: rgba(253, 252, 255, .72);
--on-dark-dim: rgba(253, 252, 255, .55);
--foot-hairline: rgba(253, 252, 255, .08);
}
/* ============================================================
SHARED SHELL
============================================================ */
/* Standalone reset — this file ships as a full HTML document (Vercel deploy /
preview), so zero the UA body margin that would otherwise leave an 8px white
gutter around the full-bleed dark bands, marquees & footer. When the page is
inlined into a WordPress page at packaging the theme owns body margin and the
#lp-last-dance-it scoping is the WP-safe form — this one reset is dropped there. */
html, body { margin: 0; }
/* Box model — wrapper-scoped (no global bare-tag selectors) */
#lp-last-dance-it,
#lp-last-dance-it *,
#lp-last-dance-it *::before,
#lp-last-dance-it *::after { box-sizing: border-box; }
/* Page ground — LIGHT per SHELL.md (gate decision) */
#lp-last-dance-it {
margin: 0;
min-height: 100vh;
background: var(--zuzy-bg);
color: var(--zuzy-fg);
font-family: var(--zuzy-font);
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Page width — shared content measure (SHELL §3) */
/* Width Law v2 (SHELL §3, Gil 2026-07-02) — full-bleed shell: content anchors at the
fluid edge gutter (§6 reference). Elements keep their size; space absorbs the extra. */
#lp-last-dance-it .lp__wide {
width: 100%;
max-width: var(--composition); /* content never stretches with the section (Law v2.1) */
margin-inline: auto;
padding-inline: clamp(24px, 5vw, 172px);
}
/* Inter-section vertical rhythm — ONE source of truth (G-RHYTHM Phase 1; G-WHITE R2).
MODEL: --lp-rhythm is the GAP between two adjacent sections (one boundary). Each
section pads HALF of it per block side (--lp-band), so two adjacent halves meet as
exactly one --lp-rhythm gap. This collapses the R1 boundary-DOUBLING (every flow↔flow
boundary was 2×--lp-rhythm ≈ 308px @1280 / 192px @390 — the "excess white" P1 flagged
at §2/§5/§7/§8/§9/§12) into one calm, uniform gap page-wide, WITHOUT per-section hacks.
Quiet strips (certs §2) use --lp-rhythm-quiet per side; the two filled 100vh sections
(§1 hero, §6 why-us) opt out via .lp__section--filled (padding-block:0), so a
filled↔flow boundary is one half-band (the flow neighbour only) — deliberately tighter,
as immersive full-bleed blocks butt closer to their neighbours (the R1 ratio, preserved).
--lp-rhythm keeps the SHELL §3 / it-services-v2 magnitude; only its APPLICATION changed
(per-side = half), centralized so it can never drift section-by-section. */
#lp-last-dance-it {
--lp-rhythm: clamp(4.25rem, 8vw, 7.5rem); /* the GAP between two sections (tightened page-wide, Gil 2026-07-03: was 6–11rem) */
--lp-band: calc(var(--lp-rhythm) / 2); /* per-side padding; two halves = one --lp-rhythm gap */
--lp-rhythm-quiet: clamp(2.4rem, 5vw, 3.4rem); /* quiet strip (§2), per side */
}
#lp-last-dance-it .lp__section {
padding-block: var(--lp-band);
scroll-margin-top: 84px; /* fixed-header offset (SHELL §3/§9) */
}
/* ============================================================
Announcement ticker (finished asset) — hover/motion rules,
verbatim from sections/ZUZY Announcement Bar.dc.html, scoped.
(--zuzy-dur-hover not in tokens → its .18s fallback applies.)
============================================================ */
#lp-last-dance-it .zbar { transition: background-color var(--zuzy-dur-hover, .18s) var(--zuzy-ease, ease); }
#lp-last-dance-it .zbar:hover { background: #FFB300; }
#lp-last-dance-it .zbar:hover .zbar-chev { transform: translateX(-3px); }
#lp-last-dance-it .zbar-chev { transition: transform var(--zuzy-dur-hover, .18s) var(--zuzy-ease, ease); }
@media (prefers-reduced-motion: reduce) {
#lp-last-dance-it .zbar, #lp-last-dance-it .zbar-chev { transition: none; }
#lp-last-dance-it .zbar:hover .zbar-chev { transform: none; }
}
/* ============================================================
Embedded finished asset (Claude Design standalone bundle).
Isolated iframe = byte-for-byte fidelity + zero style bleed
(the most WP-safe integration). §1 Hero only — §6 Why-us was
de-iframed to run natively off the PAGE scroll (a pinned
scroll-jack cannot work inside an iframe); see §6 block below.
============================================================ */
#lp-last-dance-it .lp__section--filled { padding-block: 0; }
/* ============================================================
§1 · HERO — NATIVE (Step A transplant, 2026-07-02). De-iframed:
markup re-authored from the bundle's decoded template into the page
(sections/hero.standalone.html = reference only, no longer loaded).
Visual styling rides the markup's inline styles as designed; here live
the class rules, zh-prefixed keyframes (WP-safe), responsive rules and
reduced-motion. Certs are normal in-flow imgs in the design's own slots
(the old absolute overlay + iframe height machinery are deleted).
============================================================ */
#lp-last-dance-it #sec-1 { position: relative; background: var(--zuzy-surface-dark-1); }
#lp-last-dance-it .zhero-root,
#lp-last-dance-it .zhero-root * { box-sizing: border-box; }
#lp-last-dance-it .zhero-root h1, #lp-last-dance-it .zhero-root p, #lp-last-dance-it .zhero-root span { margin: 0; }
#lp-last-dance-it .zhero-grain { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='.85'/%3E%3C/svg%3E"); background-size: 150px 150px; }
#lp-last-dance-it .zhero-nav a { transition: color var(--zuzy-dur-hover, .18s) var(--zuzy-ease); }
#lp-last-dance-it .zhero-nav a:hover { color: #fff !important; }
@media (max-width: 860px) {
#lp-last-dance-it .zhero-in { flex-direction: column !important; gap: 36px !important; padding-top: 24px !important; }
#lp-last-dance-it .zhero-nav { display: none !important; }
#lp-last-dance-it .zhero-reserved { align-self: center !important; min-height: 0 !important; padding-inline-start: 0 !important; }
#lp-last-dance-it .zhero-reserved svg { max-height: 440px !important; }
#lp-last-dance-it .zhero-h1 { font-size: 40px !important; }
}
/* narrow phones: the 4 cert slots may wrap instead of overflowing (invisible ≥480px) */
@media (max-width: 480px) {
#lp-last-dance-it .zhero-certrow { flex-wrap: wrap !important; }
}
@keyframes zh-hrise { from { transform: translateY(16px); } to { transform: none; } }
@keyframes zh-hdrift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, -24px); } }
@keyframes zh-hcue { 0%, 100% { transform: translate(-50%, 0); opacity: .45; } 50% { transform: translate(-50%, 6px); opacity: .85; } }
@keyframes zh-fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes zh-drawIn { from { stroke-dashoffset: 1; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes zh-flowA { from { stroke-dashoffset: -64; } to { stroke-dashoffset: 0; } }
@keyframes zh-flowB { from { stroke-dashoffset: -74; } to { stroke-dashoffset: 0; } }
@keyframes zh-flowC { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 59; } }
@keyframes zh-donutFill { from { stroke-dasharray: 0 125; } to { stroke-dasharray: 90 125; } }
@keyframes zh-blinkTeal { 0%, 100% { opacity: .1; } 50% { opacity: 1; } }
@keyframes zh-blinkBlue { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes zh-spin { to { transform: rotate(360deg); } }
@keyframes zh-spinRev { to { transform: rotate(-360deg); } }
@keyframes zh-shieldDash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 32; } }
@keyframes zh-shieldGlow { 0% { opacity: 0; } 50% { opacity: .25; } 100% { opacity: 0; } }
@keyframes zh-anomalyOn { 0% { opacity: 0; } 40% { opacity: 0; } 42% { opacity: 1; } 50% { opacity: 1; } 55% { opacity: 0; } 100% { opacity: 0; } }
@keyframes zh-anomalyGlow { 0% { opacity: 0; } 40% { opacity: 0; } 42% { opacity: .25; } 50% { opacity: .25; } 55% { opacity: 0; } 100% { opacity: 0; } }
@keyframes zh-flashOn { 0% { opacity: 0; } 50% { opacity: 0; } 55% { opacity: .85; } 60% { opacity: 0; } 100% { opacity: 0; } }
@keyframes zh-healPulse { 0% { opacity: 0; stroke-dashoffset: 1; } 46% { opacity: 0; stroke-dashoffset: 1; } 47% { opacity: 1; } 50% { opacity: 1; stroke-dashoffset: 0; } 52% { opacity: .6; stroke-dashoffset: -.15; } 53% { opacity: 0; stroke-dashoffset: -.15; } 100% { opacity: 0; stroke-dashoffset: -.15; } }
@keyframes zh-humanPulse { 0% { opacity: 0; transform: scale(.8); } 44% { opacity: 0; transform: scale(.8); } 47% { opacity: 1; transform: scale(1.3); } 55% { opacity: 0; transform: scale(.8); } 100% { opacity: 0; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) {
#lp-last-dance-it #sec-1 [data-rise], #lp-last-dance-it #sec-1 [data-float], #lp-last-dance-it #sec-1 [data-cue] { animation: none !important; }
#lp-last-dance-it .zhero-anim * { animation: none !important; }
}
/* ============================================================
§6 "Why-us" — native pinned snake-timeline (DE-IFRAMED).
Re-authored from the finished Claude Design bundle
(sections/why-us.standalone.html + .dc.html — kept as the
source of truth) as scoped, WP-safe vanilla so the pin runs
off the PAGE scroll. Visuals / animation / progress preserved
exactly; copy bound to content.md §6 (the real 8 reasons).
Two states, switched by JS (see the inline driver in index.html):
• default (no-JS / reduced-motion / mobile) → static stacked
grid, all 8 reasons shown — the bundle's own mobile branch.
• .is-why-pinned (added on desktop ≥760 + motion-OK) → the
pinned 100vh snake-timeline. JS owns positions; CSS owns the
node active-state transitions (the single brand ease curve).
============================================================ */
/* — Shared base (both states): typography + colours, verbatim from the bundle — */
#lp-last-dance-it .lp__why {
font-family: var(--zuzy-font);
color: #0f172a;
background: linear-gradient(180deg, #faf9ff, #f4f2fb);
}
#lp-last-dance-it .lp__why-kicker {
color: #8b5cf6; font-weight: 600; font-size: 14px;
letter-spacing: .06em; margin-bottom: 12px;
}
#lp-last-dance-it .lp__why-h2 {
margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 700;
line-height: 1.14; letter-spacing: -.02em; color: #342e4c;
}
#lp-last-dance-it .lp__why-node-title {
font-weight: 700; font-size: 18px; color: #342e4c;
margin-bottom: 7px; line-height: 1.25;
}
#lp-last-dance-it .lp__why-node-desc {
font-weight: 400; font-size: 14.5px; color: #64748b; line-height: 1.7;
}
#lp-last-dance-it .lp__why-circle { /* base geometry, both states */
width: 60px; height: 60px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
}
/* rail children (only ever visible in the pinned state) */
#lp-last-dance-it .lp__why-rail-bg {
position: absolute; inset: 0; background: rgba(52,46,76,.14); border-radius: 2px;
}
#lp-last-dance-it .lp__why-rail-fill {
position: absolute; left: 0; top: 0; width: 2px;
background: #8b5cf6; border-radius: 2px; /* height set by JS */
transition: height .18s linear;
}
#lp-last-dance-it .lp__why-rail-dot {
position: absolute; left: 50%; width: 11px; height: 11px; border-radius: 50%;
background: #8b5cf6; transform: translate(-50%, -50%); /* top set by JS */
box-shadow: 0 0 0 4px rgba(139,92,246,.18);
transition: top .18s linear;
}
#lp-last-dance-it .lp__why-rail-num {
position: absolute; right: 9px; font-size: 13px; font-weight: 500;
font-family: "IBM Plex Mono", monospace;
}
#lp-last-dance-it .lp__why-rail-num--top { top: -27px; color: #342e4c; }
#lp-last-dance-it .lp__why-rail-num--bot { bottom: -27px; color: #94a3b8; }
#lp-last-dance-it .lp__why-path-fill { transition: stroke-dashoffset .2s linear; }
/* — Default / fallback state: static stacked grid (no-JS, reduced-motion, mobile) — */
#lp-last-dance-it .lp__why:not(.is-why-pinned) .lp__why-track { position: relative; }
#lp-last-dance-it .lp__why:not(.is-why-pinned) .lp__why-stage { position: static; overflow: visible; }
#lp-last-dance-it .lp__why:not(.is-why-pinned) .lp__why-lift {
display: grid; grid-template-columns: 1fr 1fr; gap: 30px 18px;
padding: 30px 20px 42px; max-width: 620px; margin: 0 auto;
}
#lp-last-dance-it .lp__why:not(.is-why-pinned) .lp__why-header {
grid-column: 1 / -1; text-align: right; margin-bottom: 4px;
}
#lp-last-dance-it .lp__why:not(.is-why-pinned) .lp__why-path,
#lp-last-dance-it .lp__why:not(.is-why-pinned) .lp__why-watermark,
#lp-last-dance-it .lp__why:not(.is-why-pinned) .lp__why-rail { display: none; }
#lp-last-dance-it .lp__why:not(.is-why-pinned) .lp__why-node {
display: flex; flex-direction: column; align-items: flex-start;
}
#lp-last-dance-it .lp__why:not(.is-why-pinned) .lp__why-circle {
background: #8b5cf6; color: #fff; box-shadow: 0 12px 26px rgba(139,92,246,.32);
}
#lp-last-dance-it .lp__why:not(.is-why-pinned) .lp__why-text {
margin-top: 13px; text-align: right;
}
@media (max-width: 520px) {
#lp-last-dance-it .lp__why:not(.is-why-pinned) .lp__why-lift { grid-template-columns: 1fr; }
}
/* — Pinned state: the 100vh snake-timeline (JS adds .is-why-pinned + drives positions) — */
#lp-last-dance-it .lp__why.is-why-pinned .lp__why-track {
position: relative; height: calc(100vh + 272vh); /* 100vh + N(8) × perStep(34)vh */
}
#lp-last-dance-it .lp__why.is-why-pinned .lp__why-stage {
position: sticky; top: 0; height: 100vh; overflow: hidden;
background: linear-gradient(180deg, #faf9ff, #f4f2fb);
}
#lp-last-dance-it .lp__why.is-why-pinned .lp__why-lift {
position: absolute; inset: 0; z-index: 1; /* transform set by JS */
}
#lp-last-dance-it .lp__why.is-why-pinned .lp__why-header {
position: absolute; z-index: 3; text-align: right; /* top/right/width set by JS */
}
#lp-last-dance-it .lp__why.is-why-pinned .lp__why-path {
position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible;
}
#lp-last-dance-it .lp__why.is-why-pinned .lp__why-watermark {
position: absolute; left: -80px; top: 50%; transform: translateY(-50%);
z-index: 0; pointer-events: none; color: #8b5cf6;
}
#lp-last-dance-it .lp__why.is-why-pinned .lp__why-rail {
position: absolute; right: 20px; width: 2px; z-index: 5; /* top/height set by JS */
}
#lp-last-dance-it .lp__why.is-why-pinned .lp__why-node {
position: absolute; z-index: 2; /* left/top/width set by JS */
display: flex; flex-direction: column; align-items: flex-start;
}
#lp-last-dance-it .lp__why.is-why-pinned .lp__why-circle { /* inactive → active */
background: rgba(139,92,246,.10); color: rgba(139,92,246,.5);
box-shadow: 0 0 0 rgba(0,0,0,0); transform: scale(.9);
transition: background .45s var(--zuzy-ease), color .45s var(--zuzy-ease),
box-shadow .45s var(--zuzy-ease), transform .45s var(--zuzy-ease);
}
#lp-last-dance-it .lp__why.is-why-pinned .lp__why-circle.is-active {
background: #8b5cf6; color: #fff;
box-shadow: 0 12px 26px rgba(139,92,246,.32); transform: scale(1);
}
#lp-last-dance-it .lp__why.is-why-pinned .lp__why-text {
margin-top: 16px; text-align: right; opacity: 0; transform: translateY(12px);
transition: opacity .55s var(--zuzy-ease), transform .55s var(--zuzy-ease);
}
#lp-last-dance-it .lp__why.is-why-pinned .lp__why-text.is-active {
opacity: 1; transform: translateY(0);
}
/* reduced-motion: kill every §6 transition (JS also stays out of the pinned state) */
@media (prefers-reduced-motion: reduce) {
#lp-last-dance-it .lp__why-circle,
#lp-last-dance-it .lp__why-text,
#lp-last-dance-it .lp__why-path-fill,
#lp-last-dance-it .lp__why-rail-fill,
#lp-last-dance-it .lp__why-rail-dot { transition: none; }
}
/* ============================================================
DESIGN-SYSTEM COMPONENTS (zz-*) — inlined ONCE from
design-system/components/components.css, every selector scoped
under #lp-last-dance-it (WP-safe; load-once for the whole page).
Folded sections below override these where they add lp__ specifics.
============================================================ */
/* ============================================================
ZUZY — component classes
Visual styling for the React component primitives in components/.
Class-prefixed `zz-`, driven entirely by the --zuzy-* token contract.
Shipped to consumers via @import from styles.css.
RTL-safe: layout uses flex/gap + symmetric padding.
============================================================ */
/* ---------- Button ---------- */
#lp-last-dance-it .zz-btn {
font-family: var(--zuzy-font);
font-weight: var(--zuzy-weight-semibold);
font-size: 14px;
line-height: 1;
border-radius: var(--zuzy-radius-btn);
padding: 0 18px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--zuzy-space-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background var(--zuzy-dur-hover) var(--zuzy-ease),
color var(--zuzy-dur-hover) var(--zuzy-ease),
border-color var(--zuzy-dur-hover) var(--zuzy-ease),
box-shadow var(--zuzy-dur-hover) var(--zuzy-ease),
transform var(--zuzy-dur-hover) var(--zuzy-ease),
filter var(--zuzy-dur-hover) var(--zuzy-ease);
}
#lp-last-dance-it .zz-btn--primary:hover { background: var(--zuzy-purple-600); transform: translateY(-1px); box-shadow: var(--zuzy-shadow-lg); }
#lp-last-dance-it .zz-btn--primary:active { transform: scale(.98); box-shadow: var(--zuzy-shadow); }
#lp-last-dance-it .zz-btn--sm { height: 32px; font-size: 13px; padding: 0 12px; border-radius: 8px; }
#lp-last-dance-it .zz-btn:disabled{
background: var(--zuzy-stone-100); color: var(--zuzy-stone-400);
box-shadow: none; border-color: transparent; cursor: not-allowed; transform: none; filter: none;
}
/* ---------- Card ---------- */
#lp-last-dance-it .zz-card {
background: #fff; border: 1px solid var(--zuzy-line); border-radius: var(--zuzy-radius-card);
box-shadow: var(--zuzy-shadow); padding: var(--zuzy-space-lg);
transition: transform var(--zuzy-dur-hover) var(--zuzy-ease), box-shadow var(--zuzy-dur-hover) var(--zuzy-ease), border-color var(--zuzy-dur-hover) var(--zuzy-ease);
}
/* ---------- Kicker ---------- */
#lp-last-dance-it .zz-kicker {
display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em;
color: var(--zuzy-purple-600); background: rgba(139, 92, 246, .08); padding: 4px 12px; border-radius: var(--zuzy-radius-pill);
}
#lp-last-dance-it .zz-kicker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--zuzy-teal); }
/* ---------- Gradient text ---------- */
#lp-last-dance-it .zz-grad-text { background: var(--zuzy-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ============================================================
Showcase — Marquee (infinite auto-scroll) & Feature Tabs
Landing-page patterns. JS drives the transform / autoplay;
all visuals here are token-driven and RTL-safe.
============================================================ */
/* ---------- Marquee ---------- */
#lp-last-dance-it .zz-marquee { position: relative; width: 100%; overflow: hidden; }
/* reduced-motion / no-JS: become a quiet native-scroll strip */
/* marquee tile */
/* marquee chip */
/* ---------- Feature Tabs ---------- */
@keyframes zz-ftabs-fill { from { width: 0; } to { width: 100%; } }
@keyframes zz-ftabs-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* ============================================================
SHELL §7 motion lock — buttons hover = colour/opacity only.
Neutralises the DS .zz-btn translate/scale on hover/active so
NO button lifts on this page (the page's single motion rule).
============================================================ */
#lp-last-dance-it .zz-btn:hover,
#lp-last-dance-it .zz-btn:active{ transform: none; }
/* ============================================================
Shared primitives (canonical, build-once). Folded sections may
restate identical values; this guarantees they always resolve.
============================================================ */
/* ============================================================
GLOBAL reveal-on-scroll — the page's ONE system (SHELL §7).
Replaces the per-section IntersectionObserver shims: any element
with [data-reveal] fades + rises once on scroll-in, staggered by
--i. Gated behind html.js (no-JS → everything visible). The driver
(index.html) adds .is-in / .is-revealed; reveals above-the-fold on
load; honours prefers-reduced-motion AND html.reduced-motion.
============================================================ */
html.js #lp-last-dance-it [data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity var(--zuzy-dur-enter) var(--zuzy-ease),
transform var(--zuzy-dur-enter) var(--zuzy-ease);
transition-delay: calc(var(--i, 0) * var(--zuzy-stagger));
will-change: opacity, transform;
}
html.js #lp-last-dance-it [data-reveal].is-in,
html.js #lp-last-dance-it [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html.js #lp-last-dance-it [data-reveal] {
opacity: 1 !important; transform: none !important; transition: none !important;
}
}
html.reduced-motion #lp-last-dance-it [data-reveal] {
opacity: 1 !important; transform: none !important; transition: none !important;
}
/* ============================================================
FOLDED SECTION CSS — §2 · Certs strip
(from areas/sec-2/section.css, verbatim; asset paths de-../../'d)
============================================================ */
/* ============================================================
LAST DANCE IT — §2 · Certs strip (quiet compliance band)
Track B · built from the design-system zz-marquee (logo wall).
Scoped under #lp-last-dance-it — WordPress-safe (no global
bare-tag selectors; everything namespaced under the wrapper id).
Obeys SHELL.md:
§3 quiet-strip vertical rhythm clamp(2.4rem,5vw,3.4rem)
§6 monochrome logo marquee (edge-fade mask, pause-on-hover)
§7 motion = transform/opacity only, reduced-motion gated
Source component: zuzy-lp/components/zz-marquee/zz-marquee.html
(re-scoped here; the component's colour-on-hover is REPLACED by
SHELL §6's monochrome rule — grayscale stays, opacity lifts
.5 -> .8, the marks never restore colour. Quiet strip.)
============================================================ */
/* — Section band — quiet --zuzy-surface strip (overrides .lp__section rhythm) — */
#lp-last-dance-it .lp__section.lp__sec2{
padding-block: var(--lp-rhythm-quiet); /* SHELL §3 — certs quiet rhythm */
background: var(--zuzy-surface); /* band vs --zuzy-bg page ground */
border-block: 1px solid var(--zuzy-line); /* hairline seams top + bottom */
}
/* — Header — deliberately lean: short band-scale H2 only, no intro (content §2) — */
#lp-last-dance-it .lp__sec2-head{
text-align: start; /* Width Law v2 — anchor at the edge gutter */
max-width: 46ch;
margin-block-end: clamp(1.4rem, 3vw, 2.2rem);
}
#lp-last-dance-it .lp__sec2-title{
margin: 0;
font-weight: 700;
font-size: clamp(1.45rem, 3vw, 2.05rem); /* band scale — below the display H2 */
line-height: 1.12;
letter-spacing: -.02em;
color: var(--zuzy-ink);
text-wrap: balance;
}
/* ============================================================
Marquee — zz-marquee, re-scoped under .lp__certwall + tuned for certs.
EVERYTHING is qualified by .lp__certwall so §2's per-section --zz-*
config can NEVER collide with §10's marquee at assembly (both would
otherwise be `#lp-last-dance-it .zz-marquee` at equal specificity —
last stylesheet wins). Only @keyframes zz-marquee-scroll is shared
(identical across sections, safe to dedupe).
============================================================ */
#lp-last-dance-it .lp__certwall.zz-marquee{
/* config */
--zz-speed: 78s; --zz-gap: .9rem; --zz-fade: 8%;
--zz-card-w: 168px; --zz-card-h: 92px; --zz-logo-h: 52px;
/* theme — inherit the inlined Zuzy tokens, brand fallbacks otherwise */
--zz-card-bg: #fff;
--zz-line: var(--zuzy-line, rgba(26,24,30,.08));
--zz-radius: var(--zuzy-radius-card, 12px);
--zz-shadow: var(--zuzy-shadow, 0 1px 2px rgba(52,46,76,.06), 0 10px 30px rgba(139,92,246,.10));
--zz-ease: var(--zuzy-ease, cubic-bezier(.42,0,.58,1));
position: relative; overflow: hidden; padding-block: .25rem;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--zz-fade), #000 calc(100% - var(--zz-fade)), transparent);
mask-image: linear-gradient(90deg, transparent, #000 var(--zz-fade), #000 calc(100% - var(--zz-fade)), transparent);
}
#lp-last-dance-it .lp__certwall .zz-marquee__row{
display: flex; gap: var(--zz-gap); width: max-content; will-change: transform;
animation: zz-marquee-scroll var(--zz-speed) linear infinite;
}
#lp-last-dance-it .lp__certwall .zz-marquee__row + .zz-marquee__row{ margin-top: var(--zz-gap); }
#lp-last-dance-it .lp__certwall.zz-marquee:hover .zz-marquee__row{ animation-play-state: paused; }
@keyframes zz-marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } /* shared w/ §10 — identical */
/* generic item */
#lp-last-dance-it .lp__certwall .zz-marquee__item{ flex: 0 0 auto; display: grid; place-items: center; }
/* card variant — the white logo-tile look */
#lp-last-dance-it .lp__certwall .zz-marquee__item--card{
width: var(--zz-card-w); height: var(--zz-card-h);
background: var(--zz-card-bg); border: 1px solid var(--zz-line);
border-radius: var(--zz-radius); box-shadow: var(--zz-shadow);
padding: .9rem 1.2rem;
}
/* partner marks — S2-02: SHARP, full colour. The grayscale(1) + opacity:.5 fade is removed (Gil:
the logos read pale/faded). This strip now carries vendor/partner accreditations only (ISO + MoD
moved up to the §1 hero, S2-01), so full-colour brand marks are the right trust signal. */
#lp-last-dance-it .lp__certwall .zz-marquee__item--card img{
max-width: 100%; max-height: var(--zz-logo-h); width: auto; object-fit: contain;
filter: none; opacity: 1;
}
/* (§2 MoD placeholder removed with its cell — ISO + MoD marks moved to the §1 hero strip, S2-01.
The hero placeholder uses .lp__herocert--missing, defined in the §1 block above.) */
/* ============================================================
Reduced motion — no auto-scroll; manual scrollable strip
(component contract). Gated by the media query AND the explicit
html.reduced-motion class per SHELL §7 (show final state).
============================================================ */
@media (prefers-reduced-motion: reduce){
#lp-last-dance-it .lp__certwall.zz-marquee{ overflow-x: auto; }
#lp-last-dance-it .lp__certwall .zz-marquee__row{ animation: none; }
#lp-last-dance-it .lp__certwall .zz-marquee__item--card img{ transition: none; }
}
html.reduced-motion #lp-last-dance-it .lp__certwall.zz-marquee{ overflow-x: auto; }
html.reduced-motion #lp-last-dance-it .lp__certwall .zz-marquee__row{ animation: none; }
html.reduced-motion #lp-last-dance-it .lp__certwall .zz-marquee__item--card img{ transition: none; }
/* ============================================================
FOLDED SECTION CSS — §3 · Problem / solution
(from areas/sec-3/section.css, verbatim; asset paths de-../../'d)
============================================================ */
/* ============================================================
LAST DANCE IT — §3 · בעיה / פתרון (Problem / solution)
Area-local styles ONLY. Everything scoped under
#lp-last-dance-it #sec-3 (WP-safe; no bare-tag selectors).
Tokens + zz-* components come from design-system/styles.css;
the page shell (.lp__section / .lp__wrap rhythm + ground)
comes from the page's styles.css (preview.html stubs it).
Sources of truth obeyed:
· SHELL §3 grid/rhythm · §4 section head · §5 type scale
· §6 components (Card · Kicker) · §7 motion (single easeInOut,
transform/opacity only, color-only hovers, reduced-motion).
============================================================ */
/* ---- layout: 50/50 · RIGHT col (pain) leads in DOM = RTL right; LEFT col (tool) ---- */
#lp-last-dance-it #sec-3 .s3-grid {
display: grid;
grid-template-columns: minmax(0, 34rem) minmax(0, 32rem); /* Width Law v2: fixed measures, no stretch */
justify-content: space-between;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
/* =========================================================
RIGHT column · the pain (head → quote list → closing)
========================================================= */
#lp-last-dance-it #sec-3 .s3-pain { min-width: 0; }
#lp-last-dance-it #sec-3 .s3-kicker { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
/* H2 — SHELL §4/§5: display ramp, ink, balanced, tight tracking */
#lp-last-dance-it #sec-3 .s3-h2 {
margin: 0;
font-size: clamp(2.6rem, 5.2vw, 4.4rem);
line-height: 1.02;
letter-spacing: -0.04em;
font-weight: 800;
color: var(--zuzy-ink);
text-wrap: balance;
max-width: 16ch;
}
/* pain list — field voices as hairline-divided quote rows */
#lp-last-dance-it #sec-3 .s3-quotes {
list-style: none;
margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
padding: 0;
}
#lp-last-dance-it #sec-3 .s3-quote {
position: relative;
padding-block: clamp(0.85rem, 2vw, 1.15rem);
padding-inline-start: clamp(1rem, 2vw, 1.4rem);
border-bottom: 1px solid var(--zuzy-line);
font-size: clamp(1.02rem, 1.25vw, 1.18rem);
line-height: 1.6;
font-weight: 500;
color: var(--zuzy-fg);
}
#lp-last-dance-it #sec-3 .s3-quote:last-child { border-bottom: 0; }
/* leading "voice" bar at the reading start (right in RTL) — color-only on hover */
#lp-last-dance-it #sec-3 .s3-quote::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: clamp(0.95rem, 2.2vw, 1.25rem);
bottom: clamp(0.5rem, 1.4vw, 0.75rem);
width: 2px;
border-radius: 2px;
background: var(--zuzy-stone-200);
transition: background var(--zuzy-dur-hover, 0.18s) var(--zuzy-ease, ease);
}
#lp-last-dance-it #sec-3 .s3-quote:hover::before { background: var(--zuzy-grad); }
/* closing line — the payoff; gradient on the single key word (SHELL §2/§4) */
#lp-last-dance-it #sec-3 .s3-close {
margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
font-size: clamp(1.25rem, 2.2vw, 1.7rem);
line-height: 1.4;
letter-spacing: -0.02em;
font-weight: 700;
color: var(--zuzy-fg);
text-wrap: balance;
}
#lp-last-dance-it #sec-3 .s3-grad { font-weight: 800; } /* .zz-grad-text supplies the gradient fill */
/* =========================================================
LEFT column · the tool (Tool 1 · email-spoof, referenced)
========================================================= */
#lp-last-dance-it #sec-3 .s3-toolcol {
min-width: 0;
position: sticky; /* stays in view while the pain list is read (SHELL §3 rail) */
top: 104px; /* fixed-header anchor */
}
#lp-last-dance-it #sec-3 .s3-tool { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
#lp-last-dance-it #sec-3 zuzy-tool { display: block; }
/* =========================================================
Responsive (SHELL §9: 2-col → 1-col ≤880)
========================================================= */
@media (max-width: 880px) {
#lp-last-dance-it #sec-3 .s3-grid {
grid-template-columns: 1fr;
gap: clamp(2rem, 6vw, 3rem);
}
#lp-last-dance-it #sec-3 .s3-toolcol { position: static; top: auto; }
#lp-last-dance-it #sec-3 .s3-h2 { max-width: none; }
}
/* =========================================================
Reduced motion (SHELL §7) — kill the only authored transition
========================================================= */
@media (prefers-reduced-motion: reduce) {
#lp-last-dance-it #sec-3 .s3-quote::before { transition: none; }
}
html.reduced-motion #lp-last-dance-it #sec-3 .s3-quote::before { transition: none; }
/* ============================================================
FOLDED SECTION CSS — §4 · Intro / value
(from areas/sec-4/section.css, verbatim; asset paths de-../../'d)
============================================================ */
/* ============================================================
LAST DANCE IT — §4 · פתיח / ערך (Intro / value)
Area-local styles ONLY. Everything scoped under
#lp-last-dance-it #sec-4 (WP-safe; no bare-tag selectors).
Tokens + zz-* components come from design-system/styles.css;
the page shell (.lp__section/.lp__wrap rhythm + ground) comes
from the page styles.css (preview.html + this file stub them).
Sources of truth obeyed:
· SHELL §3 grid/rhythm (centered axis) · §4 section head
(kicker → H2 → intro) · §5 type scale · §7 motion (single
easeInOut, transform/opacity only, reduced-motion safe).
Pattern: a centered typographic STATEMENT — the page's thesis.
No tool, no image, no card. One gradient word ("שלומד").
============================================================ */
/* page-local var + shared wrap (identical to the page shell; assembly dedupes) */
/* Merged §4+§5 area (R3) — ONE warm-stone ground AND one ~100vh composition:
Zone A = editorial split (statement head ‖ body rail), Zone B = de-carded
service spine. §3 before sits on --zuzy-bg, §6 after is the filled ground,
so stone here alternates cleanly (SECTION-PATTERN pt.1). Vertical rhythm +
scroll-margin come from .lp__section (one --lp-band per side); min-height
centers the composition on tall viewports and NEVER clips — on short or
narrow screens the content simply flows past 100vh. */
/* design-r6d (Gil): the DARK INVERSION lives on ZONE 1 — the motion-board area.
White copy + our purple on the ink ground; the board's kinetic palette carries
the energy. Zone 2 (.s4-band) paints its own light ground over the section's. */
#lp-last-dance-it .lp__mergesec {
background:
radial-gradient(52% 64% at 14% 0%, rgba(139, 92, 246, .18), transparent 60%),
radial-gradient(40% 52% at 88% 30%, rgba(20, 184, 166, .08), transparent 64%),
linear-gradient(165deg, var(--zuzy-ink), var(--zuzy-ink-2));
color: var(--on-dark);
/* .s4-band (last child) carries the section's bottom edge — the .lp__section
bottom half-band exposed a strip of this ink gradient under the light band
before §6 (the r6 seam bug). §6 is filled (padding 0), so flush is the law. */
padding-block: var(--lp-band) 0;
}
#lp-last-dance-it .s4-frame { width: 100%; }
/* Zone 1 dark adaptation — head copy flips here; the BOARD's full dark-inversion
block lives AFTER the base board rules (deterministic cascade) — see
"BOARD DARK INVERSION" below. */
#lp-last-dance-it #sec-4 .s4-hero .s4-h2 { color: var(--on-dark); }
#lp-last-dance-it #sec-4 .s4-kicker {
color: rgba(253, 252, 255, .88);
background: rgba(253, 252, 255, .06);
border-color: rgba(253, 252, 255, .18);
}
/* Zone 1 — R9 (Gil 2026-07-02): NO 100vh. The heading + (smaller) board flow as the top
of one continuous §4+5 composition; the restored manifesto + CTA follow directly below. */
#lp-last-dance-it .s4-hero {
display: flex;
flex-direction: column;
}
#lp-last-dance-it .s4-head { text-align: center; }
/* Services sub-area — the board, directly under the statement.
#sec-5 stays a scroll anchor (footer service links). */
#lp-last-dance-it .lp__svc {
display: block;
margin-top: clamp(2.2rem, 4vh, 3.2rem);
scroll-margin-top: 84px;
}
/* visually-hidden utility (a11y label for the services anchor) */
#lp-last-dance-it .lp__vh {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* Relocated §7 CTA — the centered action closing the manifesto band. */
#lp-last-dance-it .lp__merge-cta {
margin-top: clamp(2rem, 3.4vw, 2.8rem);
display: flex;
justify-content: center;
}
/* Latin runs inside RTL copy (SHELL §9) — matches sibling .lp__ltr */
#lp-last-dance-it #sec-4 .lp__ltr { unicode-bidi: isolate; direction: ltr; }
/* kicker — DS zz-kicker carries the pill; this only sets the gap to the H2 */
#lp-last-dance-it #sec-4 .s4-kicker { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
/* H2 — display ramp (SHELL §4/§5): ink, balanced, tight tracking, ONE grad
word. R6: centered above the board; ramp trimmed so statement + board
share one viewport. */
#lp-last-dance-it #sec-4 .s4-h2 {
margin: 0;
font-family: var(--zuzy-font);
font-size: clamp(2.3rem, 3.8vw, 3.6rem);
line-height: 1.06;
letter-spacing: -0.04em;
font-weight: 800;
color: var(--zuzy-ink);
text-wrap: balance;
max-width: 36ch; /* wide enough for the 2nd sentence — no orphan line */
margin-inline: auto;
}
#lp-last-dance-it #sec-4 .s4-h2 .zz-grad-text { font-weight: inherit; }
/* Zone 2 — R9 (Gil 2026-07-02): manifesto RESTORED and woven into one flow under the
(smaller) board. No boxed template — a clean centered editorial measure with the hook
+ human close pulled to ink, ending in the strong CTA. Harmonious rhythm/focal points. */
#lp-last-dance-it .s4-cta {
position: relative;
max-width: 54rem; margin-inline: auto;
margin-top: clamp(2.6rem, 5vh, 4rem);
text-align: center;
}
/* design-r6c (Gil's final set, 2026-07-05): Zone 2 = STAND-ALONE CHAPTER.
Full-bleed DARK ink band (contrast breaks the light flow — the banner-blindness
fix), ~92vh presence, display typography ("ההבדל הוא בגישה." at H2 scale),
oversized ghost glyph, portrait on its light panel bottom-anchored, and ONE
shared start edge for every copy element incl. the CTA. */
#lp-last-dance-it .s4-band {
position: relative; isolation: isolate; overflow: hidden;
margin-top: clamp(3rem, 6vh, 5rem);
min-height: clamp(640px, 92vh, 920px);
display: grid; align-items: end;
/* light ground matched to the portrait's baked backdrop — seamless blend (r6d) */
background: linear-gradient(180deg, #F4F3F8 0%, #F2F0F8 58%, #EDE9F7 100%);
}
/* ghost glyph — the one deep anchor (reference's giant letter), whisper-ink on light */
#lp-last-dance-it .s4-ghost {
position: absolute; z-index: 0; pointer-events: none; user-select: none;
inset-inline-start: -4vw; inset-block-start: -12vh;
font: 800 clamp(24rem, 46vw, 52rem)/1 var(--zuzy-font);
letter-spacing: -.06em; color: rgba(52, 46, 76, .045);
}
#lp-last-dance-it .s4-cta--portrait {
position: relative; z-index: 1;
width: 100%; max-width: var(--composition);
margin-top: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 560px);
gap: clamp(2.2rem, 5vw, 5.5rem);
align-items: end;
text-align: start;
}
/* ONE start edge — every copy element anchors to the same axis (R6c-5).
#sec-4 kept in the selector: the old centered-layout base rules carry 2 ids. */
#lp-last-dance-it #sec-4 .s4-cta--portrait .s4-intro,
#lp-last-dance-it #sec-4 .s4-cta--portrait .s4-display,
#lp-last-dance-it #sec-4 .s4-cta--portrait .s4-text,
#lp-last-dance-it #sec-4 .s4-cta--portrait .s4-close { margin-inline: 0; }
#lp-last-dance-it .s4-cta--portrait .lp__merge-cta { justify-content: flex-start; }
#lp-last-dance-it .s4-cta--portrait .s4-cta-copy {
padding-block: clamp(4rem, 9vh, 7rem); /* the chapter breathes */
align-self: center;
}
/* quiet intro above the display line — refined, not shrunken (r6d typography pass) */
#lp-last-dance-it #sec-4 .s4-intro {
margin: 0; max-width: 42ch;
font-size: clamp(1.08rem, 1.3vw, 1.25rem); line-height: 1.65; font-weight: 500;
color: var(--zuzy-muted-text);
}
/* THE display line — the band's typographic moment (SHELL H2 scale) */
#lp-last-dance-it #sec-4 .s4-display {
margin: clamp(1rem, 2vw, 1.4rem) 0 0; max-width: 16ch;
font-size: clamp(2.6rem, 5.2vw, 4.4rem);
line-height: 1.04; letter-spacing: -.04em; font-weight: 800;
color: var(--zuzy-ink);
}
/* body copy — the "cheap paragraphs" fix: larger measure, generous leading,
real paragraph rhythm (Yasmin-reference density) */
#lp-last-dance-it #sec-4 .s4-cta--portrait .s4-text {
max-width: 50ch; margin-top: clamp(1.4rem, 2.4vw, 1.9rem);
font-size: clamp(1.08rem, 1.25vw, 1.22rem); line-height: 1.85;
color: var(--zuzy-muted-text);
}
#lp-last-dance-it #sec-4 .s4-cta--portrait .s4-close {
max-width: 42ch; margin-top: clamp(2rem, 3.6vw, 2.8rem);
font-size: clamp(1.35rem, 1.9vw, 1.65rem); line-height: 1.4;
color: var(--zuzy-ink);
}
#lp-last-dance-it .s4-cta--portrait .lp__merge-cta { margin-top: clamp(2.2rem, 4vw, 3.2rem); }
/* CTA one size up — the band's full stop (R6c-6) */
#lp-last-dance-it .s4-cta--portrait .s4-ctabtn {
font-size: clamp(1.1rem, 1.4vw, 1.3rem);
padding: 1.15rem clamp(2rem, 3vw, 2.9rem);
}
/* the portrait — seamless on the matched ground (no plate chrome), feet on the floor */
#lp-last-dance-it .s4-cta-photo {
margin: 0; min-width: 0;
align-self: end;
}
#lp-last-dance-it .s4-cta-photo img { display: block; width: 100%; height: auto; }
@media (max-width: 880px) {
#lp-last-dance-it .s4-band { min-height: 0; align-items: stretch; }
#lp-last-dance-it .s4-cta--portrait { grid-template-columns: 1fr; text-align: center; align-items: center; }
#lp-last-dance-it #sec-4 .s4-cta--portrait .s4-intro,
#lp-last-dance-it #sec-4 .s4-cta--portrait .s4-display,
#lp-last-dance-it #sec-4 .s4-cta--portrait .s4-text,
#lp-last-dance-it #sec-4 .s4-cta--portrait .s4-close { margin-inline: auto; }
#lp-last-dance-it .s4-cta--portrait .lp__merge-cta { justify-content: center; }
#lp-last-dance-it .s4-cta--portrait .s4-cta-copy { padding-block: clamp(2.6rem, 7vw, 4rem) 0; }
#lp-last-dance-it .s4-cta-photo { max-width: 420px; margin-inline: auto; }
}
/* BODY — the approach detail (the good content), muted */
#lp-last-dance-it #sec-4 .s4-text {
margin: 1.15em auto 0; max-width: 60ch;
font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.7; font-weight: 400;
color: var(--zuzy-muted-text); text-wrap: pretty;
}
/* CLOSE — the human punch: ink, heavier, framed by the largest gap (focal point) */
#lp-last-dance-it #sec-4 .s4-close {
margin: clamp(1.5rem, 3vw, 2.2rem) auto 0; max-width: 42ch;
font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.45; letter-spacing: -0.01em;
font-weight: 700; color: var(--zuzy-ink); text-wrap: balance;
}
#lp-last-dance-it #sec-4 .s4-close .s4-nowrap { white-space: nowrap; }
/* strong CTA "strip" — corner-cut purple action; echoes the §5 panel cut edges + accent.
clip-path clips box-shadow, so elevation/glow use filter:drop-shadow (follows the cut). */
#lp-last-dance-it .s4-ctabtn {
position: relative; display: inline-flex; align-items: center; gap: .7rem;
padding: 1rem clamp(1.7rem, 2.6vw, 2.4rem);
font-family: var(--zuzy-font); font-size: clamp(1.02rem, 1.2vw, 1.15rem);
font-weight: 700; letter-spacing: -0.01em; color: #fff; text-decoration: none;
background: var(--zuzy-purple);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
filter: drop-shadow(0 10px 22px rgba(139,92,246,.42));
transition: background var(--zuzy-dur-hover, .2s) var(--zuzy-ease), filter var(--zuzy-dur-hover, .2s) var(--zuzy-ease);
}
#lp-last-dance-it .s4-ctabtn:hover { background: var(--zuzy-purple-600); } /* color-only (SHELL §6) */
#lp-last-dance-it .s4-ctabtn:focus-visible { outline: 2px solid var(--zuzy-purple-600); outline-offset: 3px; }
#lp-last-dance-it .s4-ctabtn .s4-ctabtn-arrow { font-size: 1.15em; line-height: 1; transform: translateY(1px); }
/* single entry pulse — ONE calm scale+glow, fired when the CTA scrolls in
(inline IO adds .is-pulsing once; keyframe runs a single iteration). */
#lp-last-dance-it .s4-ctabtn.is-pulsing { animation: lp-s4-pulse .9s var(--zuzy-ease) 1; }
@keyframes lp-s4-pulse {
0% { transform: scale(1); filter: drop-shadow(0 10px 22px rgba(139,92,246,.42)); }
45% { transform: scale(1.045); filter: drop-shadow(0 14px 30px rgba(139,92,246,.85)); }
100% { transform: scale(1); filter: drop-shadow(0 10px 22px rgba(139,92,246,.42)); }
}
@media (prefers-reduced-motion: reduce) { #lp-last-dance-it .s4-ctabtn.is-pulsing { animation: none; } }
html.reduced-motion #lp-last-dance-it .s4-ctabtn.is-pulsing { animation: none; }
/* ---------- Responsive (SHELL §9 breakpoints) ---------- */
@media (max-width: 1100px) {
#lp-last-dance-it .s4-cta { margin-top: clamp(2.4rem, 6vw, 3.6rem); }
}
@media (max-width: 420px) {
#lp-last-dance-it #sec-4 .s4-h2 { max-width: 20ch; }
#lp-last-dance-it #sec-4 .s4-h2 br { display: none; } /* let text-wrap:balance flow on tiny screens */
}
/* ============================================================
FOLDED SECTION CSS — §5 · Services
(from areas/sec-5/section.css, verbatim; asset paths de-../../'d)
============================================================ */
/* =====================================================================
LAST DANCE IT — §5 Services · section CSS (areas/sec-5/)
Scoped under #lp-last-dance-it (WordPress-safe; no bare-tag selectors).
Mirrors the realized it-services-v2 services pattern + the DS Card/Kicker,
per SHELL.md (§4 header, §5 type, §6 components, §7 motion, §9 a11y).
Tokens come from the page's #lp-last-dance-it block (inlined in
preview.html for standalone rendering).
SHARED PRIMITIVES (.lp__kicker, .lp__card) are the page's build-once
library — defined here so the section renders in isolation; the final
assembly chat may de-duplicate them (values match SHELL §4/§6 + DS).
===================================================================== */
/* ---- Shared · Kicker (SHELL §4 / DS .zz-kicker) ---- */
#lp-last-dance-it .lp__kicker{
display:inline-flex; align-items:center; gap:.5rem;
font-weight:600; font-size:.8rem; letter-spacing:.04em;
color:var(--zuzy-purple-600);
background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.16);
padding:.5rem .95rem; border-radius:var(--zuzy-radius-pill);
}
/* ==================== Services (merged §5 sub-area) ==================== */
/* Zone B — SYSTEM BOARD (R4, Gil's viz brief 2026-07-02): dark contained
architecture diagram. 3 SVG nodes wired by animated data paths, 3 corner-
cut HTML panels beneath. Brand-mapped: nodes purple/cyan/teal; packets =
LOCKED data-viz cyan #49F5F4; ground = the §7-popup ink recipe. Hover
activates a node+panel and dims the rest; all loops die under
reduced-motion; ≤1100px the decorative net hides and panels stack. */
/* ---- the board — R5 (Gil): NO dark slab. The diagram sits directly on the
section's stone ground so the §4+§5 hybrid reads as ONE surface; the demo
palette (blue/purple/teal + orange packets + yellow joints) carries the
energy instead of a dark box. ---- */
#lp-last-dance-it .lp__svcb{
position:relative; isolation:isolate;
max-width: 1040px; margin-inline: auto; /* R9 (Gil): shrink the board so it stops eating the section */
}
/* faint ink blueprint grid — technical texture on the light ground */
#lp-last-dance-it .lp__svcb::before{
content:""; position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
background-image:
linear-gradient(rgba(26,24,30,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(26,24,30,.035) 1px, transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(92% 84% at 50% 42%, #000, transparent 90%);
mask-image:radial-gradient(92% 84% at 50% 42%, #000, transparent 90%);
}
/* mono corner tags */
#lp-last-dance-it .lp__svcb-tag{
position:absolute; z-index:2; direction:ltr;
font-family:var(--zuzy-font-mono); font-size:.66rem; font-weight:500;
letter-spacing:.22em; text-transform:uppercase; color:var(--zuzy-stone-600);
pointer-events:none;
}
#lp-last-dance-it .lp__svcb-tag--tl{ top:0; left:0; }
#lp-last-dance-it .lp__svcb-tag--br{ bottom:-1.9rem; right:0; }
/* ---- net canvas (nodes + connections) ---- */
#lp-last-dance-it .lp__svcb-net{
position:relative; z-index:1; display:block; width:100%; height:auto;
margin-bottom:clamp(-1.2rem,-1vw,-.8rem); /* struts run into the panels row */
}
/* connections */
#lp-last-dance-it .lp__svcb-conn path{ fill:none; }
#lp-last-dance-it .lp__svcb-conn-base{ stroke:rgba(26,24,30,.07); stroke-width:4; }
#lp-last-dance-it .lp__svcb-conn-glow{
stroke-width:2; opacity:.55;
transition:opacity var(--zuzy-dur-enter) var(--zuzy-ease);
}
/* packets = the demo's ORANGE — the single kinetic accent (R5) */
#lp-last-dance-it .lp__svcb-conn-packet{
stroke:#ff9f43; stroke-width:2.5; stroke-dasharray:5 34; opacity:.75;
transition:opacity var(--zuzy-dur-enter) var(--zuzy-ease);
}
#lp-last-dance-it.js-anim .lp__svcb-conn-packet,
html.js #lp-last-dance-it .lp__svcb-conn-packet{ animation:lp-svcb-dash 1.15s linear infinite; }
#lp-last-dance-it .lp__svcb-conn.is-on .lp__svcb-conn-glow{ opacity:.95; filter:drop-shadow(0 0 5px rgba(139,92,246,.45)); }
#lp-last-dance-it .lp__svcb-conn.is-on .lp__svcb-conn-packet{ opacity:1; filter:drop-shadow(0 0 6px rgba(255,159,67,.8)); }
#lp-last-dance-it .lp__svcb-conn.is-dim{ opacity:.15; }
#lp-last-dance-it .lp__svcb-conn{ transition:opacity var(--zuzy-dur-enter) var(--zuzy-ease); }
/* elbow markers (demo yellow micro-accent) + struts */
#lp-last-dance-it .lp__svcb-joints circle{ fill:#feca57; stroke:rgba(26,24,30,.22); stroke-width:1.2; }
#lp-last-dance-it .lp__svcb-strut{
stroke:rgba(26,24,30,.13); stroke-width:2;
transition:stroke var(--zuzy-dur-enter) var(--zuzy-ease);
}
#lp-last-dance-it .lp__svcb-strut.is-on[data-strut="1"]{ stroke:rgba(52,152,219,.55); }
#lp-last-dance-it .lp__svcb-strut.is-on[data-strut="2"]{ stroke:rgba(139,92,246,.55); }
#lp-last-dance-it .lp__svcb-strut.is-on[data-strut="3"]{ stroke:rgba(66,185,185,.55); }
/* nodes */
#lp-last-dance-it .lp__svcb-node{ cursor:pointer; transition:opacity var(--zuzy-dur-enter) var(--zuzy-ease); }
#lp-last-dance-it .lp__svcb-node.is-dim{ opacity:.28; }
#lp-last-dance-it .lp__svcb-halo{
fill:var(--nc); opacity:0; filter:blur(16px);
transition:opacity var(--zuzy-dur-enter) var(--zuzy-ease);
}
#lp-last-dance-it .lp__svcb-node.is-on .lp__svcb-halo{ opacity:.2; }
#lp-last-dance-it .lp__svcb-ring{
fill:none; stroke:var(--nc); stroke-width:1.4; stroke-dasharray:3 9; opacity:.45;
transform-box:fill-box; transform-origin:center;
transition:opacity var(--zuzy-dur-enter) var(--zuzy-ease);
}
html.js #lp-last-dance-it .lp__svcb-ring{ animation:lp-svcb-spin 26s linear infinite; }
#lp-last-dance-it .lp__svcb-node.is-on .lp__svcb-ring{ opacity:1; }
#lp-last-dance-it .lp__svcb-track{ fill:none; stroke:rgba(26,24,30,.08); stroke-width:2; }
#lp-last-dance-it .lp__svcb-arc{
fill:none; stroke:var(--nc); stroke-width:3.5; stroke-linecap:round; opacity:.3;
/* arc bbox spans (0,-47)→(47,0): the node center (0,0) = the bbox's
bottom-left corner — that's the correct spin origin */
transform-box:fill-box; transform-origin:0% 100%;
transition:opacity var(--zuzy-dur-enter) var(--zuzy-ease);
}
#lp-last-dance-it .lp__svcb-node.is-on .lp__svcb-arc{ opacity:1; }
html.js #lp-last-dance-it .lp__svcb-node.is-on .lp__svcb-arc{ animation:lp-svcb-spin 3.2s linear infinite; }
#lp-last-dance-it .lp__svcb-core{ fill:var(--zuzy-stone-50); stroke:var(--nc); stroke-width:1.5; }
#lp-last-dance-it .lp__svcb-corefill{
fill:var(--nc); opacity:.07;
transition:opacity var(--zuzy-dur-enter) var(--zuzy-ease);
}
#lp-last-dance-it .lp__svcb-node.is-on .lp__svcb-corefill{ opacity:.16; }
#lp-last-dance-it .lp__svcb-icon{ stroke:var(--nc); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:.95; }
#lp-last-dance-it .lp__svcb-nid{
font-family:var(--zuzy-font-mono); font-size:15px; font-weight:700; fill:var(--zuzy-ink);
}
/* ---- panels ---- */
#lp-last-dance-it .lp__svcb-panels{
position:relative; z-index:1;
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
gap:clamp(1.2rem,2.4vw,2.4rem);
}
#lp-last-dance-it .lp__svcb-panel{
position:relative; min-width:0; cursor:pointer;
transition:opacity var(--zuzy-dur-enter) var(--zuzy-ease);
}
#lp-last-dance-it .lp__svcb-panel.is-dim{ opacity:.35; }
#lp-last-dance-it .lp__svcb-frame{
position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none;
}
#lp-last-dance-it .lp__svcb-frame [data-border]{
fill:rgba(255,255,255,.85); stroke:var(--pc); stroke-width:1.2;
stroke-opacity:.4;
filter:drop-shadow(0 10px 24px rgba(52,46,76,.10));
transition:filter var(--zuzy-dur-enter) var(--zuzy-ease), stroke-opacity var(--zuzy-dur-enter) var(--zuzy-ease);
}
#lp-last-dance-it .lp__svcb-panel.is-on .lp__svcb-frame [data-border]{
stroke-opacity:1;
filter:drop-shadow(0 10px 24px rgba(52,46,76,.10)) drop-shadow(0 0 7px color-mix(in srgb, var(--pc) 45%, transparent));
}
#lp-last-dance-it .lp__svcb-frame [data-acc1],
#lp-last-dance-it .lp__svcb-frame [data-acc2]{ fill:none; stroke:var(--pc); stroke-width:3; }
#lp-last-dance-it .lp__svcb-inner{
position:relative; display:flex; flex-direction:column;
min-height:250px; height:100%;
padding:clamp(1.3rem,2vw,2rem) clamp(1.5rem,2.2vw,2.3rem);
}
#lp-last-dance-it .lp__svcb-top{
display:flex; align-items:center; justify-content:space-between; gap:.8rem;
padding-bottom:.85rem; margin-bottom:.95rem;
border-bottom:1px solid var(--zuzy-line);
}
#lp-last-dance-it .lp__svcb-num{
font-family:var(--zuzy-font-mono); font-size:1.7rem; font-weight:700; line-height:1;
letter-spacing:-.02em; color:var(--pc);
transition:text-shadow var(--zuzy-dur-enter) var(--zuzy-ease);
}
#lp-last-dance-it .lp__svcb-panel.is-on .lp__svcb-num{ text-shadow:0 0 14px var(--pc); }
#lp-last-dance-it .lp__svcb-chip{
display:inline-flex; align-items:center; gap:.45rem; direction:ltr;
font-family:var(--zuzy-font-mono); font-size:.64rem; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:var(--zuzy-stone-600);
border:1px solid var(--zuzy-line); border-radius:2px;
padding:.28rem .6rem; background:rgba(26,24,30,.025);
transition:color var(--zuzy-dur-enter) var(--zuzy-ease), border-color var(--zuzy-dur-enter) var(--zuzy-ease);
}
#lp-last-dance-it .lp__svcb-dot{
width:5px; height:5px; border-radius:50%; background:var(--zuzy-status-success); opacity:.85;
}
#lp-last-dance-it .lp__svcb-panel.is-on .lp__svcb-chip{
color:var(--pc); border-color:color-mix(in srgb, var(--pc) 45%, transparent);
}
#lp-last-dance-it .lp__svcb-title{
margin:0 0 .6rem;
font-size:clamp(1.2rem,1.4vw,1.4rem); line-height:1.25; letter-spacing:-.01em;
font-weight:700; color:var(--zuzy-ink); text-wrap:balance;
}
#lp-last-dance-it .lp__svcb-desc{
margin:0;
font-size:clamp(.95rem,1vw,1.02rem); line-height:1.65;
color:var(--zuzy-muted-text); text-wrap:pretty;
}
/* decorative activity bars — equalizer at the panel's foot */
#lp-last-dance-it .lp__svcb-bars{
display:flex; gap:5px; align-items:flex-end; height:22px;
margin-top:auto; padding-top:1.1rem; opacity:.8;
}
#lp-last-dance-it .lp__svcb-bars i{
width:5px; border-radius:2px 2px 0 0; background:var(--pc);
transition:height var(--zuzy-dur-enter) var(--zuzy-ease);
}
#lp-last-dance-it .lp__svcb-bars i:nth-child(1){ height:34%; }
#lp-last-dance-it .lp__svcb-bars i:nth-child(2){ height:22%; }
#lp-last-dance-it .lp__svcb-bars i:nth-child(3){ height:46%; }
#lp-last-dance-it .lp__svcb-bars i:nth-child(4){ height:14%; }
#lp-last-dance-it .lp__svcb-bars i:nth-child(5){ height:60%; }
#lp-last-dance-it .lp__svcb-panel.is-on .lp__svcb-bars i:nth-child(1){ height:100%; }
#lp-last-dance-it .lp__svcb-panel.is-on .lp__svcb-bars i:nth-child(2){ height:62%; }
#lp-last-dance-it .lp__svcb-panel.is-on .lp__svcb-bars i:nth-child(3){ height:82%; }
#lp-last-dance-it .lp__svcb-panel.is-on .lp__svcb-bars i:nth-child(4){ height:42%; }
#lp-last-dance-it .lp__svcb-panel.is-on .lp__svcb-bars i:nth-child(5){ height:24%; }
/* ================= BOARD DARK RE-ORCHESTRATION (design-r7, 2026-07-05) =================
Gil's r6e verdict: the dark-glass plates read as crude colored squares — patches, not a
system. r7 = ONE language for the whole dark chapter: the board is a single surface (the
ink ground itself). ALL structure draws in one white-alpha hairline scale (.055 grid /
.12 rails / .25 marks); panels are DE-CARDED — no fill, no shadow, hairline corner-cut
frame — so the blueprint grid runs through unbroken; chroma is reserved for the three
node hues in small doses (rings, icons, numbers, corner ticks) and ANSWERS hover instead
of decorating the resting state. The demo's orange packets + yellow joints were
light-ground accents — on ink they become white light-pulses. Node discs stay light
(the beacons — Gil-approved). Placed after ALL base board rules: deterministic cascade. */
#lp-last-dance-it .lp__svcb::before {
opacity: .55;
background-image:
linear-gradient(rgba(253, 252, 255, .055) 1px, transparent 1px),
linear-gradient(90deg, rgba(253, 252, 255, .055) 1px, transparent 1px);
}
#lp-last-dance-it .lp__svcb-tag { color: var(--on-dark-dim); }
/* structure — one white-alpha hairline scale */
#lp-last-dance-it .lp__svcb-conn-base { stroke: rgba(253, 252, 255, .12); }
#lp-last-dance-it .lp__svcb-strut { stroke: rgba(253, 252, 255, .16); }
#lp-last-dance-it .lp__svcb-track { stroke: rgba(253, 252, 255, .14); }
#lp-last-dance-it .lp__svcb-joints circle { fill: rgba(253, 252, 255, .6); stroke: rgba(253, 252, 255, .25); }
/* kinetics — packets = white light-pulses over the colored glow rails */
#lp-last-dance-it .lp__svcb-conn-packet { stroke: rgba(253, 252, 255, .9); }
#lp-last-dance-it .lp__svcb-conn.is-on .lp__svcb-conn-packet { filter: drop-shadow(0 0 6px rgba(253, 252, 255, .7)); }
/* nodes — light beacons; rings/arcs sit quieter on ink */
#lp-last-dance-it .lp__svcb-ring { opacity: .6; }
#lp-last-dance-it .lp__svcb-arc { opacity: .42; }
#lp-last-dance-it .lp__svcb-node.is-on .lp__svcb-halo { opacity: .28; }
/* panels — DE-CARDED: hairline corner-cut frame on the bare ground; the node hue
answers hover (frame warms to the hue, faint glass rises) */
#lp-last-dance-it .lp__svcb-frame [data-border] {
fill: rgba(253, 252, 255, .02);
stroke: rgba(253, 252, 255, .17); stroke-opacity: 1;
filter: none;
}
#lp-last-dance-it .lp__svcb-panel.is-on .lp__svcb-frame [data-border] {
fill: rgba(253, 252, 255, .045);
stroke: color-mix(in srgb, var(--pc) 60%, rgba(253, 252, 255, .4));
filter: none;
}
#lp-last-dance-it .lp__svcb-top { border-bottom-color: rgba(253, 252, 255, .12); }
#lp-last-dance-it .lp__svcb-title { color: var(--on-dark); }
#lp-last-dance-it .lp__svcb-desc { color: var(--on-dark-muted); }
#lp-last-dance-it .lp__svcb-chip {
color: var(--on-dark-dim);
border-color: rgba(253, 252, 255, .18);
background: rgba(253, 252, 255, .05);
}
#lp-last-dance-it .lp__svcb-bars { opacity: .6; }
/* ---- animations ---- */
@keyframes lp-svcb-dash{ to{ stroke-dashoffset:-39; } }
@keyframes lp-svcb-spin{ to{ transform:rotate(360deg); } }
/* ---- responsive: the decorative net hides; panels stack ---- */
@media (max-width:1100px){
#lp-last-dance-it .lp__svcb-net{ display:none; }
#lp-last-dance-it .lp__svcb-panels{ grid-template-columns:1fr; }
#lp-last-dance-it .lp__svcb-tag--tl{ position:static; display:block; margin-bottom:1rem; }
}
/* ---- reduced motion: kill every loop + transition, show final states ---- */
@media (prefers-reduced-motion:reduce){
#lp-last-dance-it .lp__svcb *{ animation:none !important; transition:none !important; }
}
html.reduced-motion #lp-last-dance-it .lp__svcb *{ animation:none !important; transition:none !important; }
/* ============================================================
§7 · CTA POPUP (triggered modal) — REPLACES the removed in-page §7
Light-CTA band (R2 · DEFECTS-R2 §7 · option b LOCKED).
Native