/* ==========================================================================
   FlowCraft Web — work-concept.css
   Shared shell for all concept pages (work-*-*.html).
   Scoped to .wc-* / .wcp-* classes. Variables can be overridden per page.
   ========================================================================== */

:root {
    --wc-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --wc-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.04 0 0 0 0 0.06 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
    --wc-accent: var(--accent-bright);
    --wc-accent-soft: var(--accent-soft);
}
body.wc-page { background: var(--paper); }

.wc-grain {
    position: fixed; inset: 0; pointer-events: none;
    background-image: var(--wc-grain);
    background-size: 220px 220px;
    opacity: 0.10; mix-blend-mode: overlay;
    z-index: 9998;
}
@media (prefers-reduced-motion: reduce) { .wc-grain { opacity: 0.06; } }

/* ============================================================
   CONCEPT-PAGE NAVBAR — dark glass bar over the cinematic hero.
   Light text + light logo on initial load (unscrolled). Once
   the user scrolls past the hero into the lighter content
   sections, the standard .navbar.scrolled cream rule kicks in
   and we swap the logo + text back to dark.
   ============================================================ */
body.wc-page .navbar:not(.scrolled) {
    background: rgba(11,18,32, 0.55);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255, 0.12);
    box-shadow:
        0 1px 0 rgba(255,255,255, 0.10) inset,
        0 14px 36px -18px rgba(0,0,0, 0.45),
        0 2px 8px -2px rgba(0,0,0, 0.18);
}
/* When scrolled, switch to cream so the dark-text sections below match */
body.wc-page .navbar.scrolled {
    background: rgba(251,250,246, 0.94);
}

/* ─── Light wordmark + nav links on the initial hero state ───
   IMPORTANT: styles-v2.css forces dark color on these classes with
   !important. We need !important here too so our higher-specificity
   override wins the cascade tie-break. Specificity comparison:
     styles-v2.css   .logo-main             (0,1,0) !important
     work-concept    body.wc-page .navbar:not(.scrolled) .logo-main
                                            (0,4,0) !important — wins. */
body.wc-page .navbar:not(.scrolled) .logo-main {
    color: rgba(255,255,255, 0.98) !important;
    text-shadow:
        0 1px 2px rgba(0,0,0, 0.55),
        0 0 18px rgba(255,255,255, 0.06);
}
body.wc-page .navbar:not(.scrolled) .logo-accent {
    color: rgba(255,255,255, 0.74) !important;
    text-shadow:
        0 1px 2px rgba(0,0,0, 0.50),
        0 0 14px rgba(255,255,255, 0.04);
}
/* Emerald accent dot between FlowCraft and Web (instead of the coral
   default from styles-v2.css) — premium emerald cue on dark backgrounds. */
body.wc-page .navbar:not(.scrolled) .logo-divider {
    background: var(--accent-bright) !important;
    box-shadow: 0 0 8px rgba(45,227,181, 0.40);
}
body.wc-page .navbar:not(.scrolled) .nav-link,
body.wc-page .navbar:not(.scrolled) .nav-links li > a:not(.btn) {
    color: rgba(255,255,255, 0.92) !important;
    text-shadow:
        0 1px 2px rgba(0,0,0, 0.50),
        0 0 14px rgba(255,255,255, 0.06);
}
body.wc-page .navbar:not(.scrolled) .nav-link:hover,
body.wc-page .navbar:not(.scrolled) .nav-links li > a:not(.btn):hover {
    color: #FFFFFF !important;
    text-shadow:
        0 1px 2px rgba(0,0,0, 0.55),
        0 0 22px rgba(255,255,255, 0.14);
}
body.wc-page .navbar:not(.scrolled) .nav-link::after,
body.wc-page .navbar:not(.scrolled) .nav-links li > a:not(.btn)::after {
    background: linear-gradient(90deg, var(--accent-bright), #FFFFFF) !important;
}
body.wc-page .navbar:not(.scrolled) .hamburger span {
    background: rgba(255,255,255, 0.94) !important;
}
/* Logo mark — refined ring on dark backdrop */
body.wc-page .navbar:not(.scrolled) .logo-mark {
    box-shadow:
        0 1px 0 rgba(255,255,255, 0.22) inset,
        0 0 0 1px rgba(255,255,255, 0.12),
        0 8px 18px -4px rgba(0,0,0, 0.45);
}
/* Start a project — white pill on dark hero, emerald on hover */
body.wc-page .navbar:not(.scrolled) .nav-cta-desktop {
    background: rgba(255,255,255, 0.96);
    color: var(--midnight);
    border-color: rgba(255,255,255, 0.96);
    box-shadow:
        0 1px 0 rgba(255,255,255, 0.40) inset,
        0 8px 22px -10px rgba(0,0,0, 0.50);
}
body.wc-page .navbar:not(.scrolled) .nav-cta-desktop:hover {
    background: var(--accent-bright);
    border-color: var(--accent-bright);
    color: var(--midnight);
}

/* ─── Logo variant swap (CSS only, no JS)
   Light cream-on-dark variant shows during the hero state.
   Standard dark variant shows once .scrolled toggles on. ───── */
body.wc-page .navbar .logo-mark-light { display: none; }
body.wc-page .navbar:not(.scrolled) .logo-mark-dark { display: none; }
body.wc-page .navbar:not(.scrolled) .logo-mark-light { display: inline-flex; }

/* ───────── HERO BACK LINK
   Floating glass pill in the top-left of every concept-page hero.
   Replaces the previous inline .nav-back element, which crowded the
   header row. The back link is now a corner utility — visually
   separate from the main navigation, intentional and premium.       */
.wc-hero-back {
    position: absolute;
    top: clamp(92px, 9vw, 120px);
    left: var(--pad-x);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.96);
    text-decoration: none;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.20) inset,
        0 12px 28px -14px rgba(0,0,0,0.50);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    transition:
        color 240ms var(--wc-ease),
        background 240ms var(--wc-ease),
        border-color 240ms var(--wc-ease),
        transform 240ms var(--wc-ease),
        box-shadow 240ms var(--wc-ease);
}
.wc-hero-back:hover {
    color: #FFFFFF;
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.58);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.30) inset,
        0 0 0 1px rgba(45,227,181,0.24),
        0 16px 32px -10px rgba(0,0,0,0.55);
}
.wc-hero-back-arrow {
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    color: var(--accent-bright);
    transition: transform 240ms var(--wc-ease);
}
.wc-hero-back:hover .wc-hero-back-arrow {
    transform: translateX(-3px);
}
.wc-hero-back-label {
    display: inline-block;
    line-height: 1;
}
@media (max-width: 720px) {
    .wc-hero-back {
        top: 76px;
        padding: 7px 12px 7px 10px;
        font-size: 10px;
        letter-spacing: 0.16em;
        gap: 8px;
    }
    /* On small screens, hide the verbose "to" prefix — keeps it tappable */
    .wc-hero-back .wc-hero-back-long { display: none; }
}

/* ───────── HERO ───────── */
.wc-hero {
    position: relative;
    min-height: 82vh;
    background: var(--midnight);
    color: var(--ink-on-dark);
    overflow: hidden;
    isolation: isolate;
    display: flex; align-items: center;
    padding: clamp(64px, 8vw, 112px) 0;
}
.wc-hero-photo {
    position: absolute; inset: 0;
    background-image: url('assets/google-business-photos/mockup-dark-workspace-16x9.jpg');
    background-size: cover; background-position: center;
    transform: scale(1.06);
    animation: wcDrift 30s var(--ease-soft) infinite alternate;
    z-index: -3;
}
.wc-hero-scrim {
    position: absolute; inset: 0; z-index: -2;
    /* Two-layer scrim: vertical (top + bottom darker) + horizontal (left side
       darker where text sits). Guarantees text legibility on both dark niche
       photos (Stellar, Northbound) and light ones (Aria, Pinepoint, Greenline). */
    background:
        linear-gradient(180deg, rgba(11,18,32,0.94) 0%, rgba(11,18,32,0.70) 36%, rgba(11,18,32,0.80) 72%, rgba(11,18,32,0.96) 100%),
        linear-gradient(90deg, rgba(11,18,32,0.55) 0%, rgba(11,18,32,0.18) 55%, rgba(11,18,32,0) 100%);
}
.wc-hero-bloom {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 50% at 12% 16%, rgba(168,134,82,0.18), transparent 65%),
        radial-gradient(50% 40% at 100% 100%, rgba(45,227,181,0.10), transparent 60%);
}
.wc-hero-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    width: 100%;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
}
.wc-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #2DE3B5;
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 28px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.65);
}
.wc-hero-eyebrow::before {
    content: ""; display: inline-block;
    width: 48px; height: 2px;
    background: #2DE3B5;
    box-shadow: 0 0 10px rgba(45,227,181,0.45);
}
.wc-hero-h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.8rem, 6vw + 0.6rem, 6.8rem);
    line-height: 0.96;
    letter-spacing: -0.030em;
    color: #FFFFFF;
    margin: 0 0 24px;
    text-shadow:
        0 1px 2px rgba(0,0,0,0.65),
        0 2px 18px rgba(0,0,0,0.55),
        0 0 36px rgba(11,18,32,0.40);
}
.wc-hero-h em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    color: #2DE3B5;
    letter-spacing: -0.012em;
    text-shadow:
        0 1px 2px rgba(0,0,0,0.65),
        0 2px 18px rgba(0,0,0,0.55);
}
.wc-hero-meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.96);
    display: flex; gap: 16px; flex-wrap: wrap;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.36);
    text-shadow: 0 1px 2px rgba(0,0,0,0.60);
}
.wc-hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.wc-hero-meta-sep { color: rgba(255,255,255,0.50); }
.wc-hero-concept {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2.2rem);
    line-height: 1.30;
    letter-spacing: -0.010em;
    color: #FFFFFF;
    margin: 0 0 30px;
    max-width: 24ch;
    text-shadow:
        0 1px 2px rgba(0,0,0,0.60),
        0 2px 14px rgba(0,0,0,0.55);
}
.wc-hero-concept em {
    color: #2DE3B5;
    text-shadow:
        0 1px 2px rgba(0,0,0,0.60),
        0 0 14px rgba(45,227,181,0.30);
}
.wc-hero-sub {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.18rem);
    line-height: 1.66;
    color: rgba(255,255,255,0.94);
    margin: 0 0 36px;
    max-width: 52ch;
    text-shadow: 0 1px 2px rgba(0,0,0,0.60);
}
.wc-hero-ctas {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.wc-cta {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--midnight);
    background: #FFFFFF;
    text-decoration: none;
    padding: 16px 28px;
    border: 1px solid #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 16px 34px -10px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.20);
    transition:
        background 320ms var(--wc-ease),
        color 320ms var(--wc-ease),
        border-color 320ms var(--wc-ease),
        transform 320ms var(--wc-ease),
        box-shadow 320ms var(--wc-ease);
}
.wc-cta:hover {
    background: var(--wc-accent);
    border-color: var(--wc-accent);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(45,227,181,0.32), 0 22px 44px -10px rgba(45,227,181,0.34);
}
.wc-cta-ghost {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255,255,255,0.72);
    box-shadow: 0 0 0 0 transparent;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.wc-cta-ghost:hover {
    background: rgba(255,255,255,0.12);
    color: #FFFFFF;
    border-color: #FFFFFF;
    box-shadow: 0 8px 24px -10px rgba(0,0,0,0.45);
}
.wc-cta-arrow { transition: transform 320ms var(--wc-ease); }
.wc-cta:hover .wc-cta-arrow { transform: translateX(4px); }

/* Hero mockup column */
.wc-hero-mock {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #0E0F11 0%, #16181C 100%);
    box-shadow:
        0 1px 0 rgba(244,241,232,0.06) inset,
        0 60px 120px -20px rgba(0,0,0,0.65),
        0 24px 56px -16px rgba(0,0,0,0.45);
    border: 1px solid rgba(244,241,232,0.10);
}
.wc-hero-mock-photo {
    position: absolute; inset: 0;
    background-image: url('assets/google-business-photos/06-ui-stilllife-16x9.jpg');
    background-size: cover; background-position: center;
    opacity: 0.34;
}
.wc-hero-mock-grad {
    position: absolute; inset: 0;
    background:
        radial-gradient(600px 300px at 80% 10%, rgba(255,107,69,0.16), transparent 60%),
        linear-gradient(180deg, rgba(14,15,17,0.30) 0%, rgba(14,15,17,0.78) 100%);
}
.wc-hero-mock-content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(28px, 4vw, 56px);
    gap: 16px;
    color: #F0EEE8;
}
.wc-hero-mock-tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--wc-accent);
    margin: 0;
}
.wc-hero-mock-h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 2vw + 1rem, 3rem);
    line-height: 0.98;
    letter-spacing: -0.026em;
    margin: 0;
}
.wc-hero-mock-h em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    color: var(--wc-accent);
}
.wc-hero-mock-row {
    display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(240,238,232,0.78);
}
.wc-hero-mock-row strong {
    color: #FFFFFF; font-weight: 600;
    margin-right: 4px;
}
.wc-hero-mock-frame {
    position: absolute; top: 22px; left: 22px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(240,238,232,0.66);
    display: inline-flex; align-items: center; gap: 8px;
}
.wc-hero-mock-frame-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--wc-accent);
    box-shadow: 0 0 0 3px rgba(45,227,181,0.22);
}

/* ───────── SECTION SHELL ───────── */
.wc-section {
    position: relative;
    padding: clamp(72px, 8vw, 124px) 0;
    overflow: hidden;
}
.wc-section-light { background: var(--paper); }
.wc-section-cream { background: var(--bone); }
.wc-section-warm  { background: var(--surface-warm); }
.wc-section-dark { background: var(--midnight); color: var(--ink-on-dark); }
.wc-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    position: relative;
    z-index: 1;
}
.wc-section-eyebrow {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 26px;
}
.wc-section-eyebrow::before {
    content: ""; display: inline-block;
    width: 42px; height: 1.5px;
    background: currentColor;
}
.wc-section-dark .wc-section-eyebrow { color: var(--wc-accent); }

.wc-section-h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 3vw + 1rem, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.028em;
    color: var(--ink);
    margin: 0 0 20px;
    max-width: 20ch;
}
.wc-section-dark .wc-section-h { color: var(--ink-on-dark); }
.wc-section-h em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: -0.012em;
}
.wc-section-dark .wc-section-h em { color: var(--wc-accent); }

.wc-section-sub {
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.3vw + 0.92rem, 1.14rem);
    line-height: 1.62;
    color: var(--ink-2);
    margin: 0 0 44px;
    max-width: 54ch;
}
.wc-section-dark .wc-section-sub { color: rgba(244,241,232,0.92); }

/* ───────── BRIEF ───────── */
.wc-brief-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 3vw, 48px);
    margin-top: 32px;
}
.wc-brief-card {
    padding: 32px 28px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 24px 48px -28px rgba(11,18,32,0.16);
    position: relative;
}
.wc-section-dark .wc-brief-card {
    background: var(--midnight-2);
    border-color: rgba(244,241,232,0.10);
    box-shadow: 0 1px 0 rgba(244,241,232,0.06) inset, 0 36px 72px -32px rgba(0,0,0,0.65);
}
.wc-brief-card-tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 18px;
    display: inline-flex; align-items: center; gap: 12px;
}
.wc-section-dark .wc-brief-card-tag { color: var(--wc-accent); }
.wc-brief-card-tag::before {
    content: ""; display: inline-block;
    width: 22px; height: 1.5px;
    background: currentColor;
}
.wc-brief-card-statement {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.3rem, 0.6vw + 1.05rem, 1.5rem);
    line-height: 1.30;
    letter-spacing: -0.008em;
    color: var(--ink);
    margin: 0;
}
.wc-section-dark .wc-brief-card-statement { color: var(--ink-on-dark); }
.wc-brief-card-statement em { color: var(--accent); }
.wc-section-dark .wc-brief-card-statement em { color: var(--wc-accent); }

/* ───────── WEBSITE PREVIEW (desktop + phone) ───────── */
.wc-preview-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: clamp(28px, 3vw, 56px);
    align-items: stretch;
    margin-top: 32px;
}
.wc-preview-frame {
    position: relative;
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 50px 100px -28px rgba(11,18,32,0.28),
        0 24px 50px -16px rgba(11,18,32,0.16);
    border: 1px solid rgba(11,18,32,0.06);
    height: clamp(520px, 70vh, 760px);
}
.wc-section-dark .wc-preview-frame {
    border-color: rgba(244,241,232,0.10);
    box-shadow:
        0 1px 0 rgba(244,241,232,0.06) inset,
        0 60px 120px -20px rgba(0,0,0,0.65);
}
.wc-preview-bar {
    display: flex; align-items: center;
    background: #F4F1EA;
    border-bottom: 1px solid rgba(11,18,32,0.06);
    padding: 12px 16px; gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    position: relative; z-index: 3;
}
.wc-preview-bar-dots { display: flex; gap: 6px; }
.wc-preview-bar-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(11,18,32,0.16); }
.wc-preview-bar-url { margin-left: auto; margin-right: auto; opacity: 0.72; }
.wc-preview-canvas {
    position: absolute;
    top: 41px; left: 0; right: 0; bottom: 0;
    overflow: hidden;
}
.wc-preview-canvas > * { min-height: 100%; }
.wc-preview-frame::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 60px; pointer-events: none; z-index: 2;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}
.wc-section-dark .wc-preview-frame::after {
    background: linear-gradient(to bottom, rgba(11,18,32,0), rgba(11,18,32,0.92));
}

/* ──────────────────────────────────────────────────────────────────
   Phone — flex-based layout for bulletproof height propagation.
   Bug fix: the previous version used position:absolute canvas with
   percentage-height children, which collapsed the wcm-page in some
   render paths (grid stage + align-self + max-width edge case). Now
   the screen is a flex column and the canvas takes flex:1, giving
   children a guaranteed definite height.
   ────────────────────────────────────────────────────────────────── */
.wc-phone {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 252px;
    margin: 0 auto;
    padding: 9px;
    border-radius: 30px;
    background: linear-gradient(180deg, #1A1F2B 0%, #0A0E16 100%);
    border: 1px solid rgba(0,0,0,0.40);
    box-shadow:
        0 1px 0 rgba(244,241,232,0.10) inset,
        0 0 0 1px rgba(244,241,232,0.04) inset,
        0 36px 72px -28px rgba(11,18,32,0.40),
        0 16px 36px -14px rgba(11,18,32,0.22);
}
.wc-phone-screen {
    position: relative;
    background: var(--surface);
    border-radius: 22px;
    overflow: hidden;
    height: 456px;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 0 0 1px rgba(0,0,0,0.04) inset;
}
.wc-phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 86px;
    height: 20px;
    background: #050810;
    border-radius: 999px;
    z-index: 4;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 1px 3px rgba(0,0,0,0.4);
}
/* The canvas is now a flex item — its height is definite via flex:1 */
.wc-phone-canvas {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;            /* flex bug-guard: allow shrink below content size */
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.wc-phone-canvas > .wcm-page {
    flex: 1 1 auto;            /* fills the canvas vertically — no % needed */
    min-height: 0;
    /* extra top padding to clear the notch (notch is at top:14 + 20 tall = 34 from screen top) */
    padding-top: 38px;
}
.wc-phone-caption {
    position: absolute;
    bottom: -26px;
    left: 0; right: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.wc-section-dark .wc-phone-caption { color: rgba(244,241,232,0.66); }

/* ───────── CRM PIPELINE ───────── */
.wc-pipeline {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 32px 0 72px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 28px 56px -28px rgba(11,18,32,0.16);
}
.wc-section-dark .wc-pipeline {
    background: var(--midnight-2);
    border-color: rgba(244,241,232,0.10);
    box-shadow: 0 1px 0 rgba(244,241,232,0.06) inset, 0 36px 72px -32px rgba(0,0,0,0.65);
}
.wc-stage {
    flex: 1;
    padding: 24px 22px;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
    border-right: 1px solid var(--hairline);
}
.wc-section-dark .wc-stage { border-right-color: rgba(244,241,232,0.10); }
.wc-stage:last-child { border-right: 0; }
.wc-stage-num {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: inline-flex; align-items: center; gap: 10px;
}
.wc-section-dark .wc-stage-num { color: rgba(244,241,232,0.66); }
.wc-stage-num-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hairline);
}
.wc-stage[data-state="active"] .wc-stage-num-dot {
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.wc-section-dark .wc-stage[data-state="active"] .wc-stage-num-dot {
    background: var(--accent-bright);
    box-shadow: 0 0 0 4px rgba(45,227,181,0.18);
}
.wc-stage-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.08rem;
    line-height: 1.22;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 4px 0 0;
}
.wc-section-dark .wc-stage-title { color: var(--ink-on-dark); }
.wc-stage-meta {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.50;
    color: var(--ink-2);
    margin: 0;
}
.wc-section-dark .wc-stage-meta { color: rgba(244,241,232,0.82); }

/* ───────── NOTIFICATION PREVIEW ───────── */
.wc-noti-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 40px);
}
.wc-noti {
    padding: 28px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 28px 56px -28px rgba(11,18,32,0.16);
    display: flex; flex-direction: column; gap: 16px;
    position: relative;
}
.wc-section-dark .wc-noti {
    background: var(--midnight-2);
    border-color: rgba(244,241,232,0.10);
    box-shadow: 0 1px 0 rgba(244,241,232,0.06) inset, 0 36px 72px -32px rgba(0,0,0,0.65);
}
.wc-noti-head {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hairline);
}
.wc-section-dark .wc-noti-head { border-bottom-color: rgba(244,241,232,0.10); }
.wc-noti-avatar {
    width: 36px; height: 36px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--ink-on-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.wc-section-dark .wc-noti-avatar {
    background: var(--accent-bright);
    color: var(--midnight);
}
.wc-noti-from {
    display: flex; flex-direction: column; gap: 2px;
    font-family: var(--font-body);
}
.wc-noti-from strong {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.wc-section-dark .wc-noti-from strong { color: var(--ink-on-dark); }
.wc-noti-from span {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.wc-section-dark .wc-noti-from span { color: rgba(244,241,232,0.66); }
.wc-noti-time {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.10em;
}
.wc-section-dark .wc-noti-time { color: rgba(244,241,232,0.66); }
.wc-noti-subject {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.08rem;
    line-height: 1.30;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 0;
}
.wc-section-dark .wc-noti-subject { color: var(--ink-on-dark); }
.wc-noti-body {
    font-family: var(--font-body);
    font-size: 0.96rem;
    line-height: 1.58;
    color: var(--ink-2);
    margin: 0;
}
.wc-section-dark .wc-noti-body { color: rgba(244,241,232,0.88); }
.wc-noti-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.wc-noti-list li {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-2);
    display: flex; gap: 10px;
}
.wc-section-dark .wc-noti-list li { color: rgba(244,241,232,0.86); }
.wc-noti-list li::before {
    content: "—";
    color: var(--accent);
    font-weight: 600;
}
.wc-section-dark .wc-noti-list li::before { color: var(--accent-bright); }

/* ───────── AI CHAT CONCEPT ───────── */
.wc-chat {
    max-width: 640px;
    margin: 32px 0 0;
    padding: 28px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 28px 56px -28px rgba(11,18,32,0.18);
    display: flex; flex-direction: column; gap: 16px;
}
.wc-section-dark .wc-chat {
    background: var(--midnight-2);
    border-color: rgba(244,241,232,0.10);
    box-shadow: 0 1px 0 rgba(244,241,232,0.06) inset, 0 36px 72px -32px rgba(0,0,0,0.65);
}
.wc-chat-head {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hairline);
}
.wc-section-dark .wc-chat-head { border-bottom-color: rgba(244,241,232,0.10); }
.wc-chat-avatar {
    width: 36px; height: 36px; border-radius: 999px;
    background: var(--ink);
    color: var(--ink-on-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.wc-section-dark .wc-chat-avatar { background: var(--ink-on-dark); color: var(--midnight); }
.wc-chat-from { display: flex; flex-direction: column; gap: 2px; }
.wc-chat-from strong {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--ink);
}
.wc-section-dark .wc-chat-from strong { color: var(--ink-on-dark); }
.wc-chat-from span {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex; align-items: center; gap: 6px;
}
.wc-section-dark .wc-chat-from span { color: var(--accent-bright); }
.wc-chat-from span::before {
    content: ""; width: 7px; height: 7px;
    border-radius: 50%; background: currentColor;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.wc-msg {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.58;
    padding: 14px 18px;
    border-radius: 14px;
    max-width: 86%;
}
.wc-msg-user {
    align-self: flex-end;
    background: var(--ink);
    color: var(--ink-on-dark);
    border-bottom-right-radius: 4px;
}
.wc-section-dark .wc-msg-user {
    background: var(--ink-on-dark);
    color: var(--midnight);
}
.wc-msg-bot {
    align-self: flex-start;
    background: var(--surface-warm);
    color: var(--ink);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--hairline);
}
.wc-section-dark .wc-msg-bot {
    background: rgba(244,241,232,0.06);
    color: var(--ink-on-dark);
    border-color: rgba(244,241,232,0.10);
}
.wc-msg-bot strong {
    color: var(--accent);
    font-weight: 600;
}
.wc-section-dark .wc-msg-bot strong { color: var(--accent-bright); }
.wc-msg-event {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 6px 0;
    display: inline-flex; align-items: center; gap: 10px;
}
.wc-section-dark .wc-msg-event { color: rgba(244,241,232,0.72); }
.wc-msg-event::before {
    content: "✓"; color: var(--accent);
    font-weight: 700;
}
.wc-section-dark .wc-msg-event::before { color: var(--accent-bright); }
.wc-chat-note {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--hairline);
}
.wc-section-dark .wc-chat-note {
    color: rgba(244,241,232,0.66);
    border-top-color: rgba(244,241,232,0.10);
}

/* ───────── CLOSING CTA ───────── */
.wc-close {
    position: relative;
    padding: clamp(88px, 10vw, 140px) 0;
    background: var(--paper);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.wc-close-photo {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 56%;
    background-image: url('assets/google-business-photos/01-workspace-loft-v2-16x9.jpg');
    background-size: cover; background-position: center 60%;
    opacity: 0.32; z-index: -2;
}
.wc-close-photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--paper) 0%, rgba(251,250,246,0.85) 30%, rgba(251,250,246,0.45) 70%, rgba(251,250,246,0.92) 100%);
}
.wc-close-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    position: relative; z-index: 1;
}
.wc-close-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 26px;
}
.wc-close-eyebrow::before, .wc-close-eyebrow::after {
    content: ""; display: inline-block;
    width: 32px; height: 1.5px;
    background: var(--ink-3);
}
.wc-close-h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 4vw + 1rem, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.028em;
    color: var(--ink);
    margin: 0 auto 26px;
    max-width: 18ch;
}
.wc-close-h em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}
.wc-close-sub {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 0.3vw + 0.95rem, 1.18rem);
    line-height: 1.66;
    color: var(--ink-2);
    margin: 0 auto 36px;
    max-width: 52ch;
}
.wc-close-actions { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.wc-close .btn-primary { box-shadow: var(--shadow-glow); }

/* ───────── ANIMATIONS / REVEAL ───────── */
@keyframes wcDrift {
    from { transform: scale(1.06) translate(0, 0); }
    to   { transform: scale(1.10) translate(-1.8%, -1.4%); }
}
.wc-reveal {
    opacity: 0; transform: translateY(22px);
    transition: opacity 900ms var(--wc-ease), transform 900ms var(--wc-ease);
}
.wc-reveal.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .wc-hero-photo { animation: none; }
    .wc-reveal { opacity: 1; transform: none; }
}

/* ───────── RESPONSIVE ───────── */
@media (max-width: 960px) {
    .wc-hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .wc-hero-mock { aspect-ratio: 16 / 11; }
    .wc-brief-grid { grid-template-columns: 1fr; gap: 20px; }
    .wc-preview-stage { grid-template-columns: 1fr; }
    .wc-phone {
        max-width: 256px;
        margin: 32px auto 0;
    }
    .wc-pipeline { flex-direction: column; }
    .wc-stage { border-right: 0; border-bottom: 1px solid var(--hairline); }
    .wc-section-dark .wc-stage { border-bottom-color: rgba(244,241,232,0.10); }
    .wc-stage:last-child { border-bottom: 0; }
    .wc-noti-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .wc-backlink-inner { font-size: 10.5px; gap: 14px; }
}

/* ==========================================================================
   FEATURES CALLOUT — 3-up "multiple website previews" row
   Clean visual demonstration of the surfaces FlowCraft would build.
   ========================================================================== */
.wc-callouts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.4vw, 32px);
    margin-top: 12px;
}
.wc-callout {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 24px 48px -28px rgba(11,18,32,0.16);
    display: flex;
    flex-direction: column;
    transition: transform 360ms var(--wc-ease), box-shadow 360ms var(--wc-ease), border-color 360ms var(--wc-ease);
}
.wc-section-cream .wc-callout {
    background: var(--surface);
}
.wc-callout:hover {
    transform: translateY(-3px);
    border-color: rgba(14,122,101,0.20);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 0 0 1px rgba(14,122,101,0.10), 0 32px 64px -22px rgba(11,18,32,0.20);
}
.wc-callout-art {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
    background: var(--surface-warm);
    border-bottom: 1px solid var(--hairline);
}
.wc-callout-art-inner {
    position: absolute; inset: 0;
    padding: 18px;
    display: flex; flex-direction: column;
    gap: 10px;
    background: var(--surface);
}
.wc-callout-art-bar {
    display: flex; align-items: center; gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hairline);
}
.wc-callout-art-bar span {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(11,18,32,0.14);
}
.wc-callout-art-bar strong {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.10em;
    color: var(--ink-3);
}
.wc-callout-body {
    padding: 22px 22px 24px;
    display: flex; flex-direction: column; gap: 6px;
}
.wc-callout-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 6px;
}
.wc-callout-h {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.08rem;
    line-height: 1.24;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 0;
}
.wc-callout-p {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 4px 0 0;
}

/* Generic preview primitives used inside the callout art area.
   Niche-agnostic but flexible enough to read as a website section. */
.wcp-hero {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(14,122,101,0.04), rgba(14,122,101,0.10));
    border: 1px solid var(--hairline);
}
.wcp-eyebrow {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}
.wcp-h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: var(--ink);
}
.wcp-h em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}
.wcp-bar {
    height: 7px; border-radius: 999px;
    background: var(--ink);
    width: 56%;
    margin-top: 4px;
}
.wcp-bar.is-ghost { background: transparent; border: 1px solid var(--ink-2); width: 40%; }
.wcp-row {
    display: grid; gap: 6px;
    grid-template-columns: repeat(3, 1fr);
}
.wcp-tile {
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    background: var(--surface-warm);
    border: 1px solid var(--hairline);
    position: relative;
}
.wcp-tile.is-feat { background: var(--ink); border-color: var(--ink); }
.wcp-tile.is-feat::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(45,227,181,0.20) 100%);
    border-radius: 4px;
}
.wcp-form {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 4px;
}
.wcp-field {
    height: 18px; border-radius: 4px;
    background: var(--surface-warm);
    border: 1px solid var(--hairline);
    position: relative;
}
.wcp-field::before {
    content: ""; position: absolute;
    top: 50%; left: 8px;
    transform: translateY(-50%);
    width: 32%; height: 4px;
    background: rgba(11,18,32,0.18);
    border-radius: 999px;
}
.wcp-cta {
    height: 22px; border-radius: 999px;
    background: var(--ink);
    width: 60%;
    margin-top: 2px;
    position: relative;
}
.wcp-cta::after {
    content: ""; position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 28%; height: 4px;
    background: var(--ink-on-dark);
    border-radius: 999px;
}
.wcp-list {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 4px;
}
.wcp-list-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--surface-warm);
}
.wcp-list-row::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
}
.wcp-list-row strong {
    flex: 1;
    height: 4px;
    background: rgba(11,18,32,0.32);
    border-radius: 999px;
}
.wcp-list-row em {
    width: 22%; height: 4px;
    background: rgba(11,18,32,0.18);
    border-radius: 999px;
}

@media (max-width: 880px) {
    .wc-callouts { grid-template-columns: 1fr; gap: 20px; }
    .wc-callout-art { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   WCM — MOBILE-SCALE PRIMITIVES
   Sized for ~240px wide phone canvas + ~340px wide slideshow slide. Used
   inside .wc-phone-canvas AND .wc-slide-canvas so the design system stays
   coherent across surfaces. Theme via .wcm-page modifier classes.
   ========================================================================== */
.wcm-page {
    padding: 16px 14px;
    font-family: var(--font-body);
    background: var(--surface);
    color: var(--ink);
    height: 100%;
    min-height: 100%;
    display: flex; flex-direction: column; gap: 12px;
    overflow: hidden;
}
.wcm-page.is-dark { background: #16181C; color: #F0EEE8; }
.wcm-page.is-cream { background: var(--bone); }
.wcm-page.is-warm { background: var(--surface-warm); }

/* Nav */
.wcm-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--hairline);
}
.is-dark .wcm-nav { border-bottom-color: rgba(255,255,255,0.10); }
.wcm-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: inherit;
}
.wcm-logo em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}
.is-dark .wcm-logo em { color: var(--accent-bright); }
.wcm-burger {
    display: inline-flex; flex-direction: column; gap: 3px;
    width: 18px;
}
.wcm-burger span { display: block; height: 1.5px; width: 100%; background: currentColor; opacity: 0.6; }

/* Type */
.wcm-eyebrow {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 4px;
}
.is-dark .wcm-eyebrow { color: var(--accent-bright); }
.wcm-h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.04;
    letter-spacing: -0.020em;
    color: var(--ink);
    margin: 0;
}
.is-dark .wcm-h { color: #FFFFFF; }
.wcm-h em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}
.is-dark .wcm-h em { color: var(--accent-bright); }
.wcm-sub {
    font-family: var(--font-body);
    font-size: 11.5px;
    line-height: 1.46;
    color: var(--ink-2);
    margin: 4px 0 0;
}
.is-dark .wcm-sub { color: rgba(240,238,232,0.78); }
.wcm-meta {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: inline-flex; gap: 8px; align-items: center;
}
.is-dark .wcm-meta { color: rgba(240,238,232,0.62); }
.wcm-meta-sep { opacity: 0.5; }

/* CTAs */
.wcm-cta {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--ink-on-dark);
    border: 1px solid var(--ink);
    text-decoration: none;
    line-height: 1;
}
.wcm-cta.is-block { width: 100%; }
.wcm-cta.is-ghost { background: transparent; color: var(--ink); border-color: rgba(11,18,32,0.30); }
.is-dark .wcm-cta { background: #FFFFFF; color: #16181C; border-color: #FFFFFF; }
.is-dark .wcm-cta.is-ghost { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.55); }
.wcm-cta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* Cards / tiles */
.wcm-stack { display: flex; flex-direction: column; gap: 6px; }
.wcm-card {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-warm);
    border: 1px solid var(--hairline);
    display: flex; flex-direction: column; gap: 2px;
}
.is-dark .wcm-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); color: #F0EEE8; }
.is-cream .wcm-card { background: var(--surface); }
.wcm-card-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px;
}
.wcm-card strong {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    color: inherit;
    letter-spacing: -0.005em;
}
.wcm-card span {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    color: var(--ink-2);
}
.is-dark .wcm-card span { color: rgba(240,238,232,0.72); }
.wcm-card em {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 2px;
}
.is-dark .wcm-card em { color: rgba(240,238,232,0.62); }
.wcm-card.is-feat {
    background: var(--ink);
    color: var(--ink-on-dark);
    border-color: var(--ink);
}
.wcm-card.is-feat strong { color: #FFFFFF; }
.wcm-card.is-feat span { color: rgba(244,241,232,0.78); }
.wcm-card.is-feat em { color: rgba(244,241,232,0.62); }
.wcm-card-badge {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 7.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--accent);
    color: var(--ink-on-dark);
    margin-bottom: 2px;
}
.wcm-card.is-feat .wcm-card-badge { background: rgba(255,255,255,0.18); color: #FFFFFF; }

/* Tile grid (3-up) */
.wcm-tiles {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    margin-top: 4px;
}
.wcm-tile {
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: var(--surface-warm);
    border: 1px solid var(--hairline);
    position: relative;
}
.is-dark .wcm-tile { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.wcm-tile.is-feat {
    background: var(--ink);
    border-color: var(--ink);
}
.wcm-tile.is-feat::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 55%, rgba(45,227,181,0.20) 100%);
    border-radius: 6px;
}

/* Product / gallery tiles 2-up */
.wcm-products {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 4px;
}
.wcm-product {
    display: flex; flex-direction: column; gap: 4px;
}
.wcm-product-img {
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: var(--surface-warm);
    border: 1px solid var(--hairline);
    position: relative;
    overflow: hidden;
}
.is-dark .wcm-product-img { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.wcm-product-img-1 { background: linear-gradient(135deg, #D5C9B2 0%, #B8A98D 100%); border: 0; }
.wcm-product-img-2 { background: linear-gradient(135deg, #4A5161 0%, #2E3340 100%); border: 0; }
.wcm-product-img-3 { background: linear-gradient(135deg, #8C9774 0%, #5F6850 100%); border: 0; }
.wcm-product-img-4 { background: linear-gradient(135deg, #2A2E38 0%, #16181C 100%); border: 0; }
.wcm-product-meta {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10px;
}
.wcm-product-meta strong {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10.5px;
    color: inherit;
}
.wcm-product-meta em {
    font-family: var(--font-mono);
    font-style: normal;
    font-weight: 500;
    color: var(--ink-2);
    font-size: 10px;
}
.is-dark .wcm-product-meta em { color: rgba(240,238,232,0.72); }
.wcm-product-badge {
    position: absolute; top: 6px; left: 6px;
    font-family: var(--font-mono);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.18em;
    padding: 3px 5px;
    background: #FFFFFF;
    color: var(--ink);
    border-radius: 3px;
}

/* Form fields */
.wcm-form {
    display: flex; flex-direction: column; gap: 6px;
    margin: 4px 0 8px;
}
.wcm-field {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 10.5px;
}
.is-dark .wcm-field { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
.wcm-field-label {
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.is-dark .wcm-field-label { color: rgba(240,238,232,0.62); }
.wcm-field-value {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--ink);
    font-size: 11px;
}
.is-dark .wcm-field-value { color: #FFFFFF; }

/* List rows */
.wcm-list {
    display: flex; flex-direction: column;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 4px;
}
.is-dark .wcm-list { border-color: rgba(255,255,255,0.10); }
.wcm-list-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-body);
    font-size: 11px;
}
.is-dark .wcm-list-row { border-bottom-color: rgba(255,255,255,0.08); }
.wcm-list-row:last-child { border-bottom: 0; }
.wcm-list-row strong {
    font-family: var(--font-display);
    font-weight: 600;
    color: inherit;
    font-size: 11.5px;
}
.wcm-list-row em {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 9.5px;
    color: var(--ink-3);
}
.is-dark .wcm-list-row em { color: rgba(240,238,232,0.62); }
.wcm-list-row-tag {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 3px 6px;
    background: var(--accent-soft);
    border-radius: 4px;
}

/* Chat bubbles */
.wcm-chat {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 4px;
}
.wcm-msg {
    font-family: var(--font-body);
    font-size: 10.5px;
    line-height: 1.42;
    padding: 8px 11px;
    border-radius: 10px;
    max-width: 88%;
}
.wcm-msg.is-user {
    align-self: flex-end;
    background: var(--ink);
    color: var(--ink-on-dark);
    border-bottom-right-radius: 3px;
}
.wcm-msg.is-bot {
    align-self: flex-start;
    background: var(--surface-warm);
    color: var(--ink);
    border-bottom-left-radius: 3px;
    border: 1px solid var(--hairline);
}
.is-dark .wcm-msg.is-bot { background: rgba(255,255,255,0.06); color: #F0EEE8; border-color: rgba(255,255,255,0.10); }
.is-dark .wcm-msg.is-user { background: #FFFFFF; color: #16181C; }

/* Pill / status */
.wcm-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(14,122,101,0.18);
    align-self: flex-start;
}
.wcm-pill::before {
    content: ""; width: 5px; height: 5px;
    border-radius: 50%; background: currentColor;
}

/* Trust row */
.wcm-trust {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.10em;
    color: var(--ink-3);
}
.is-dark .wcm-trust { color: rgba(240,238,232,0.66); }
.wcm-trust strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0;
}
.is-dark .wcm-trust strong { color: #FFFFFF; }

/* ==========================================================================
   SLIDESHOW
   ========================================================================== */
.wc-slideshow {
    position: relative;
    margin-top: 12px;
}
.wc-slideshow-track {
    display: flex;
    gap: clamp(14px, 1.6vw, 22px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 4px 28px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.wc-slideshow-track::-webkit-scrollbar { display: none; }
.wc-slide {
    flex: 0 0 clamp(300px, 32vw, 380px);
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 24px 48px -28px rgba(11,18,32,0.18),
        0 12px 24px -14px rgba(11,18,32,0.10);
    position: relative;
    transition: transform 320ms var(--wc-ease), box-shadow 320ms var(--wc-ease);
}
.wc-slide:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 32px 64px -28px rgba(11,18,32,0.22),
        0 16px 32px -14px rgba(11,18,32,0.14);
}
.wc-slide-bar {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ink-3);
    background: var(--surface-warm);
}
.wc-slide-bar-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(11,18,32,0.14);
}
.wc-slide-bar strong {
    margin-left: auto;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ink-2);
}
.wc-slide-canvas {
    height: 460px;
    overflow: hidden;
    position: relative;
}
.wc-slide-canvas::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 32px; pointer-events: none; z-index: 2;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}
.wc-slide-canvas.is-dark::after {
    background: linear-gradient(to bottom, rgba(22,24,28,0), rgba(22,24,28,1));
}
.wc-slide-canvas.is-cream::after {
    background: linear-gradient(to bottom, rgba(240,242,235,0), rgba(240,242,235,1));
}
.wc-slide-caption {
    padding: 14px 16px;
    border-top: 1px solid var(--hairline);
    display: flex; align-items: center; gap: 12px;
}
.wc-slide-caption-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex; align-items: center; gap: 8px;
}
.wc-slide-caption-tag::before {
    content: ""; display: inline-block;
    width: 18px; height: 1.5px;
    background: currentColor;
}
.wc-slide-caption-h {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.22;
    letter-spacing: -0.008em;
    color: var(--ink);
}

/* Controls */
.wc-slideshow-controls {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-top: 24px;
}
.wc-slideshow-dots {
    display: flex; gap: 8px; align-items: center;
}
.wc-slideshow-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--hairline);
    padding: 0;
    cursor: pointer;
    transition: background 280ms var(--wc-ease), border-color 280ms var(--wc-ease), transform 280ms var(--wc-ease);
}
.wc-section-dark .wc-slideshow-dot { border-color: rgba(244,241,232,0.30); }
.wc-slideshow-dot.is-active {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.20);
}
.wc-section-dark .wc-slideshow-dot.is-active {
    background: var(--accent-bright);
    border-color: var(--accent-bright);
}
.wc-slideshow-arrows {
    display: flex; gap: 10px;
}
.wc-slideshow-arrow {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--hairline);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink);
    cursor: pointer;
    transition: background 220ms var(--wc-ease), border-color 220ms var(--wc-ease), color 220ms var(--wc-ease), transform 220ms var(--wc-ease);
}
.wc-section-dark .wc-slideshow-arrow {
    background: rgba(244,241,232,0.06);
    border-color: rgba(244,241,232,0.18);
    color: var(--ink-on-dark);
}
.wc-slideshow-arrow:hover {
    background: var(--ink);
    color: var(--ink-on-dark);
    border-color: var(--ink);
    transform: translateY(-1px);
}
.wc-section-dark .wc-slideshow-arrow:hover {
    background: var(--ink-on-dark);
    color: var(--midnight);
    border-color: var(--ink-on-dark);
}
.wc-slideshow-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
    background: var(--surface);
    color: var(--ink);
    border-color: var(--hairline);
}
.wc-section-dark .wc-slideshow-arrow:disabled {
    background: rgba(244,241,232,0.04);
    color: rgba(244,241,232,0.40);
    border-color: rgba(244,241,232,0.12);
}

@media (max-width: 720px) {
    .wc-slide { flex: 0 0 84%; }
    .wc-slide-canvas { height: 420px; }
    .wc-slideshow-controls { gap: 12px; }
    .wc-slideshow-arrow { width: 38px; height: 38px; }
}

/* ==========================================================================
   SLIDESHOW STAGE — integrated layout (desktop slides + phone alongside)
   Used when the slideshow lives inside the website-concept section.
   ========================================================================== */
.wc-slideshow-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: clamp(20px, 2.4vw, 36px);
    align-items: start;
    margin-top: 12px;
}
/* When inside the stage, slides fill the track column instead of being card-sized */
.wc-slideshow-stage .wc-slideshow-track {
    margin: 0;
    padding: 4px 0 14px;
}
.wc-slideshow-stage .wc-slide {
    flex: 0 0 100%;
}
.wc-slideshow-stage .wc-slide-canvas {
    height: 460px;
}
.wc-slideshow-stage .wc-phone {
    margin: 6px auto 0;
    align-self: start;
}
.wc-slideshow-stage .wc-phone-caption {
    bottom: -24px;
}

/* The slideshow wrapper inside a website-concept section: controls under stage */
.wc-slideshow-stage + .wc-slideshow-controls {
    margin-top: 36px;
}

@media (max-width: 880px) {
    .wc-slideshow-stage {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .wc-slideshow-stage .wc-slide-canvas { height: 420px; }
    .wc-slideshow-stage .wc-phone { margin-top: 18px; }
}

/* ==========================================================================
   DESKTOP SCALE-UP FOR SLIDE CONTENT
   The .wcm-* primitives are sized for ~240px phone canvas. When the same
   content appears inside a .wc-slide-canvas (~680px+ wide desktop frame),
   bump typography + padding + gap to desktop proportions so the slides
   read as real website pages instead of stretched mobile shells.
   Phone canvas (.wc-phone-canvas) is unaffected.
   ========================================================================== */
.wc-slide-canvas .wcm-page {
    padding: 28px 32px 24px;
    gap: 18px;
}
.wc-slide-canvas .wcm-nav {
    padding-bottom: 14px;
    margin-bottom: 8px;
}
.wc-slide-canvas .wcm-logo {
    font-size: 14px;
    letter-spacing: 0.01em;
}
.wc-slide-canvas .wcm-burger { width: 22px; gap: 4px; }
.wc-slide-canvas .wcm-burger span { height: 1.5px; }

.wc-slide-canvas .wcm-eyebrow {
    font-size: 10px;
    letter-spacing: 0.24em;
    margin: 0 0 6px;
}
.wc-slide-canvas .wcm-h {
    font-size: 28px;
    line-height: 1.04;
    letter-spacing: -0.022em;
}
.wc-slide-canvas .wcm-sub {
    font-size: 13.5px;
    line-height: 1.50;
    margin-top: 6px;
    max-width: 48ch;
}
.wc-slide-canvas .wcm-meta {
    font-size: 10.5px;
    letter-spacing: 0.18em;
}
.wc-slide-canvas .wcm-cta {
    font-size: 12.5px;
    padding: 10px 18px;
    letter-spacing: 0.02em;
}
.wc-slide-canvas .wcm-cta-row { gap: 10px; margin-top: 6px; }

.wc-slide-canvas .wcm-stack { gap: 8px; }
.wc-slide-canvas .wcm-card {
    padding: 14px 18px;
    gap: 4px;
}
.wc-slide-canvas .wcm-card-row { gap: 12px; }
.wc-slide-canvas .wcm-card strong { font-size: 15px; }
.wc-slide-canvas .wcm-card span { font-size: 11px; }
.wc-slide-canvas .wcm-card em { font-size: 12px; }
.wc-slide-canvas .wcm-card-badge { font-size: 9px; padding: 4px 8px; }

.wc-slide-canvas .wcm-list { margin-top: 4px; }
.wc-slide-canvas .wcm-list-row {
    padding: 12px 16px;
    font-size: 13px;
}
.wc-slide-canvas .wcm-list-row strong { font-size: 14px; }
.wc-slide-canvas .wcm-list-row em { font-size: 11px; }
.wc-slide-canvas .wcm-list-row-tag { font-size: 9.5px; padding: 4px 8px; }

.wc-slide-canvas .wcm-form { gap: 8px; margin-top: 6px; }
.wc-slide-canvas .wcm-field {
    padding: 12px 14px;
    font-size: 12px;
}
.wc-slide-canvas .wcm-field-label { font-size: 9.5px; letter-spacing: 0.20em; }
.wc-slide-canvas .wcm-field-value { font-size: 13px; }

.wc-slide-canvas .wcm-pill {
    font-size: 9.5px;
    padding: 5px 11px;
    letter-spacing: 0.20em;
}
.wc-slide-canvas .wcm-trust { font-size: 10.5px; gap: 12px; }
.wc-slide-canvas .wcm-trust strong { font-size: 13px; }

/* AI chat — constrain to widget scale so it reads as a chat panel
   embedded in a page, not a full-width takeover ("blown up" look). */
.wc-slide-canvas .wcm-chat {
    max-width: 480px;
    padding: 16px;
    gap: 10px;
    margin-top: 6px;
    background: rgba(11,18,32, 0.04);
    border: 1px solid rgba(11,18,32, 0.08);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(255,255,255, 0.50) inset;
}
.wc-slide-canvas .is-dark .wcm-chat,
.is-dark .wc-slide-canvas .wcm-chat {
    background: rgba(255,255,255, 0.04);
    border-color: rgba(255,255,255, 0.10);
    box-shadow: 0 1px 0 rgba(255,255,255, 0.06) inset;
}
.wc-slide-canvas .wcm-msg {
    font-size: 12px;
    padding: 9px 13px;
    max-width: 74%;
    line-height: 1.46;
}

/* Subtle premium accent — a barely-perceptible brand glow in the upper-right
   corner of every slide. Layered with the existing fade overlay; not visible
   on hover or as decoration, just adds the "designed" feel users associate
   with high-end product pages. */
.wc-slide-canvas {
    position: relative;
    isolation: isolate;
}
.wc-slide-canvas::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 55%; height: 55%;
    background:
        radial-gradient(70% 70% at 100% 0%, rgba(45,227,181, 0.07), transparent 65%),
        radial-gradient(60% 60% at 100% 0%, rgba(168,134,82, 0.04), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.wc-slide-canvas.is-dark::before {
    background:
        radial-gradient(70% 70% at 100% 0%, rgba(45,227,181, 0.12), transparent 65%),
        radial-gradient(60% 60% at 100% 0%, rgba(168,134,82, 0.08), transparent 70%);
}
.wc-slide-canvas > * {
    position: relative;
    z-index: 1;
}

.wc-slide-canvas .wcm-tiles { gap: 8px; margin-top: 6px; }
.wc-slide-canvas .wcm-products { gap: 10px; }
.wc-slide-canvas .wcm-product-meta strong { font-size: 12px; }
.wc-slide-canvas .wcm-product-meta em { font-size: 12px; }
.wc-slide-canvas .wcm-product-badge { font-size: 8px; padding: 4px 7px; letter-spacing: 0.20em; }

/* ==========================================================================
   .wcd-* — DESKTOP-ONLY SLIDE PATTERNS
   Richer composition primitives used to upgrade hero + tier slides.
   ========================================================================== */

/* Hero with 2-col layout: text on left, art slot on right */
.wcd-hero {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 22px;
    align-items: stretch;
    margin-top: 4px;
}
.wcd-hero-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.wcd-hero-art {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(14,122,101, 0.20) 0%, transparent 60%),
        radial-gradient(80% 60% at 80% 20%, rgba(168,134,82, 0.20), transparent 65%),
        var(--surface-warm);
    min-height: 200px;
    border: 1px solid rgba(11,18,32, 0.06);
    box-shadow: 0 1px 0 rgba(255,255,255, 0.50) inset;
}
.is-dark .wcd-hero-art {
    background:
        linear-gradient(135deg, rgba(45,227,181, 0.22) 0%, transparent 55%),
        radial-gradient(80% 60% at 80% 20%, rgba(168,134,82, 0.18), transparent 65%),
        rgba(255,255,255, 0.04);
    border-color: rgba(255,255,255, 0.10);
    box-shadow: 0 1px 0 rgba(255,255,255, 0.06) inset;
}
.wcd-hero-art[data-img] {
    background-image: var(--wcd-art-img);
    background-size: cover;
    background-position: center;
}
.wcd-hero-art-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,18,32, 0.15) 0%, rgba(11,18,32, 0.50) 100%);
    pointer-events: none;
}
.wcd-hero-art-tag {
    position: absolute;
    left: 14px; bottom: 14px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: rgba(11,18,32, 0.55);
    border: 1px solid rgba(255,255,255, 0.22);
    padding: 5px 10px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
}

/* Horizontal 3-column tier row — replaces .wcm-stack for pricing/service slides */
.wcd-tier-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.wcd-tier-row .wcm-card {
    padding: 14px 14px 16px;
}

/* ==========================================================================
   SIDE-POSITIONED SLIDESHOW ARROWS
   When slideshow lives inside .wc-slideshow-stage, the prev/next arrows
   sit as absolute children flanking the desktop track at vertical center.
   The dots row stays in the controls block below.
   ========================================================================== */
.wc-slideshow-stage {
    position: relative;
}
.wc-slideshow-stage .wc-slideshow-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: block;
    pointer-events: none;
    z-index: 6;
}
.wc-slideshow-stage .wc-slideshow-arrow {
    position: absolute;
    pointer-events: auto;
    top: 0;
    width: 44px;
    height: 44px;
    background: rgba(11,18,32, 0.58);
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255, 0.30);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    box-shadow:
        0 1px 0 rgba(255,255,255, 0.20) inset,
        0 14px 28px -12px rgba(0,0,0, 0.55);
}
.wc-slideshow-stage .wc-slideshow-arrow[data-slideshow-prev] {
    left: -22px;
}
.wc-slideshow-stage .wc-slideshow-arrow[data-slideshow-next] {
    /* sits just to the right of the desktop track, before the phone column.
       phone column = 240px wide. */
    right: calc(240px + clamp(20px, 2.4vw, 36px) - 22px);
}
.wc-slideshow-stage .wc-slideshow-arrow:hover {
    background: rgba(11,18,32, 0.85);
    color: var(--accent-bright);
    border-color: rgba(255,255,255, 0.55);
}
.wc-slideshow-stage .wc-slideshow-arrow:disabled {
    opacity: 0.35;
    background: rgba(11,18,32, 0.32);
    color: #FFFFFF;
    border-color: rgba(255,255,255, 0.18);
}
/* Hide controls row's arrows on desktop — they live on the sides now */
.wc-slideshow-stage ~ .wc-slideshow-controls .wc-slideshow-arrows,
.wc-slideshow:has(.wc-slideshow-stage) > .wc-slideshow-controls .wc-slideshow-arrows {
    display: none;
}
/* Better dots row when arrows have moved */
.wc-slideshow:has(.wc-slideshow-stage) > .wc-slideshow-controls {
    justify-content: center;
}

/* ==========================================================================
   RESPONSIVE — collapse side arrows back to inline on mobile/tablet
   ========================================================================== */
@media (max-width: 880px) {
    .wc-slideshow-stage .wc-slideshow-arrows {
        position: static;
        transform: none;
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 14px;
    }
    .wc-slideshow-stage .wc-slideshow-arrow {
        position: static;
        width: 40px;
        height: 40px;
    }
    .wc-slideshow:has(.wc-slideshow-stage) > .wc-slideshow-controls .wc-slideshow-arrows {
        display: flex;
    }
    /* Compress scale-up a bit on tablet so canvas height still fits */
    .wc-slide-canvas .wcm-h { font-size: 24px; }
    .wc-slide-canvas .wcm-page { padding: 22px 24px 18px; }
    .wcd-hero { grid-template-columns: 1fr; gap: 14px; }
    .wcd-hero-art { min-height: 110px; }
    .wcd-tier-row { grid-template-columns: 1fr; gap: 8px; }
}