/* Dark look for the whole site (the default), matching the homepage film:
   near-black ink, Workzish red glow, white type. The theme already ships a
   dark mode behind the "uc-dark" class on <html>; this file fixes the places
   where it was never finished, and styles the light/dark switch in the header. */

:root { --wz-ink: #07080a; --wz-ink-2: #15171c; --wz-line: rgba(255, 255, 255, 0.12); --wz-red: #d83924; }

/* ---------- light/dark switch (both modes) ---------- */
.wz-theme-toggle {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: 0 4px; border-radius: 50%; cursor: pointer; flex: none;
    border: 1px solid rgba(0, 0, 0, 0.12); color: #1a1a1a; background: transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wz-theme-toggle:hover { background: rgba(0, 0, 0, 0.05); }
.wz-theme-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wz-theme-toggle input:focus-visible + .wz-theme-icon { outline: 2px solid var(--wz-red); outline-offset: 6px; border-radius: 50%; }
.wz-theme-icon {
    width: 18px; height: 18px; background: currentColor; pointer-events: none;
    /* moon: shown in light mode, "switch to dark" */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.2A8.5 8.5 0 0 1 9.8 3.5a8.5 8.5 0 1 0 10.7 10.7z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.2A8.5 8.5 0 0 1 9.8 3.5a8.5 8.5 0 1 0 10.7 10.7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
html.uc-dark .wz-theme-toggle { border-color: rgba(255, 255, 255, 0.22); color: #fff; }
html.uc-dark .wz-theme-toggle:hover { background: rgba(255, 255, 255, 0.08); }
html.uc-dark .wz-theme-icon {
    /* sun: shown in dark mode, "switch to light" */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E");
}

/* ---------- page ---------- */
html.uc-dark, .uc-dark body { background-color: var(--wz-ink) !important; }
html.uc-dark body { color: rgba(255, 255, 255, 0.72); }
html.uc-dark h1, .uc-dark h2, .uc-dark h3, .uc-dark h4, .uc-dark h5, .uc-dark h6,
html.uc-dark .h1, .uc-dark .h2, .uc-dark .h3, .uc-dark .h4, .uc-dark .h5, .uc-dark .h6 { color: #fff; }
html.uc-dark .uc-pageloader { background-color: var(--wz-ink) !important; }

/* ---------- top banner + header ---------- */
html.uc-dark .uc-banner-top { background: linear-gradient(90deg, #d83924, #8f2114) !important; color: #fff !important; }
html.uc-dark .uc-banner-top a { color: #fff !important; }
html.uc-dark .uc-navbar-container, .uc-dark .uc-navbar-sticky { background-color: transparent; }
html.uc-dark .uc-sticky-fixed .uc-navbar-container, .uc-dark .uc-navbar-container.uc-navbar-sticky { background-color: rgba(13, 14, 17, 0.88) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- hero: ink with a red glow, not a red wall ---------- */
html.uc-dark .hero-header > .position-absolute:nth-child(1) {
    background: radial-gradient(60% 55% at 14% 0%, rgba(216, 57, 36, 0.36), transparent 68%),
                radial-gradient(50% 50% at 96% 30%, rgba(216, 57, 36, 0.2), transparent 70%), var(--wz-ink) !important;
}
html.uc-dark .hero-header > .position-absolute:nth-child(2) { background: linear-gradient(to bottom, transparent 55%, var(--wz-ink)) !important; }

/* ---------- pale tiles and pills: text was white on pale pink ---------- */
html.uc-dark [style*="background-color: #feeeeb"],
html.uc-dark .features-item {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--wz-line);
    color: #fff;
}
html.uc-dark .features-item p, .uc-dark .features-item .title { color: #fff !important; }
html.uc-dark .icon-box.bg-gradient-45n { background: rgba(216, 57, 36, 0.16) !important; }

/* ---------- footer ---------- */
html.uc-dark #uc-footer, .uc-dark footer.uc-footer {
    background: radial-gradient(60% 80% at 0% 100%, rgba(216, 57, 36, 0.28), transparent 70%), #08090b !important;
}

/* ---------- header button: its text turned red on a red pill ---------- */
html.uc-dark .uc-navbar-right .btn-primary { color: #fff !important; }

/* ---------- small outlined label pills above headings ---------- */
html.uc-dark .border.rounded-pill { border-color: var(--wz-line) !important; color: rgba(255, 255, 255, 0.85); }

/* the homepage sets these pills pale with an id rule of its own */
html.uc-dark #key_features .features-item { background-color: rgba(255, 255, 255, 0.06) !important; }

/* ---------- articles: body text was too dim to read ---------- */
html.uc-dark .blog-body p, html.uc-dark .blog-body li, html.uc-dark .blog-body td { color: rgba(255, 255, 255, 0.8); }
html.uc-dark .blog-body a:not(.btn):not(.blog-cta-btn) { color: #e04b36; }
html.uc-dark .blog-author, html.uc-dark .blog-related { border-color: var(--wz-line) !important; background: rgba(255, 255, 255, 0.04) !important; }

/* phones: the hero glow fills the whole narrow screen, so keep it subtle */
@media (max-width: 767px) {
    html.uc-dark .hero-header > .position-absolute:nth-child(1) {
        background: radial-gradient(90% 40% at 10% 0%, rgba(216, 57, 36, 0.3), transparent 70%), var(--wz-ink) !important;
    }
}

/* hero headline: full white, like the film's titles */
html.uc-dark .hero-header [class*="display-"], html.uc-dark .hero-header .h1, html.uc-dark .hero-header .h2 { color: #fff !important; }

/* ---------- the raised "bezel" look ----------
   The theme draws it as a solid offset shadow in black, which disappears on a
   dark page. Use a light edge instead so frames and buttons still look lifted. */
html.uc-dark { --shadowColor: rgba(255, 255, 255, 0.32); }
html.uc-dark .border-dark { border-color: rgba(255, 255, 255, 0.32) !important; }

/* ---------- pricing page ---------- */
html.uc-dark .module-card {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 24px rgba(0, 0, 0, 0.45) !important;
}
html.uc-dark .module-card:hover { border-color: rgba(255, 255, 255, 0.3); }
html.uc-dark .module-card.selected { border-color: #16A34A; }
html.uc-dark #pricing-summary {
    background-color: #0f1115 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 50px rgba(0, 0, 0, 0.55) !important;
}
html.uc-dark .discount-tier-bar { border-color: rgba(255, 255, 255, 0.18) !important; }

/* ---------- text hard-coded black in the page markup (label pills, parts of headings) ---------- */
html.uc-dark [style*="color: #000"]:not([style*="background"]),
html.uc-dark [style*="color:#000"]:not([style*="background"]) { color: #fff !important; }
html.uc-dark .section-heading .border.rounded { border-color: var(--wz-line) !important; }
/* the page's animation script rewrites these inline styles as rgb(), so match that form too */
html.uc-dark [style*="color: rgb(0, 0, 0)"]:not([style*="background"]),
html.uc-dark .section-heading > span.ft-serif { color: #fff !important; }

/* =====================================================================
   DARK DESIGN LAYER
   Everything above makes the light design readable on black. This part
   gives dark its own look, taken from the homepage film: depth instead of
   flat boxes, glass surfaces, red light, a faint grid, glowing accents.
   ===================================================================== */
html.uc-dark {
    --wz-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
    --wz-hair: rgba(255, 255, 255, 0.1);
    --wz-red-hot: #d83924;
    --wz-lift: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.38);
    color-scheme: dark;
    background: var(--wz-ink) !important;
}
html.uc-dark ::selection { background: rgba(216, 57, 36, 0.65); color: #fff; }

/* ---- atmosphere: red light and a faint grid behind every page ---- */
html.uc-dark body { background: transparent !important; color: rgba(255, 255, 255, 0.72); }
html.uc-dark body::before,
html.uc-dark body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html.uc-dark body::before {
    background:
        radial-gradient(52% 46% at 8% 0%, rgba(216, 57, 36, 0.2), transparent 70%),
        radial-gradient(42% 44% at 100% 38%, rgba(216, 57, 36, 0.1), transparent 72%),
        radial-gradient(46% 42% at 12% 100%, rgba(216, 57, 36, 0.09), transparent 72%);
}
html.uc-dark body::after {
    background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 85%);
            mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 85%);
}
/* the hero keeps a glow of its own but lets the grid show through */
html.uc-dark .hero-header > .position-absolute:nth-child(1) {
    background: radial-gradient(58% 60% at 50% -8%, rgba(216, 57, 36, 0.34), transparent 70%) !important;
}
html.uc-dark .hero-header > .position-absolute:nth-child(2) { background: none !important; }

/* ---- type ---- */
html.uc-dark .text-primary,
html.uc-dark .dark\:text-primary-400 { color: var(--wz-red-hot) !important; }
html.uc-dark h1 .text-primary, html.uc-dark h2 .text-primary, html.uc-dark h3.text-primary,

/* ---- surfaces: glass, not black boxes ---- */
html.uc-dark #wrapper .section-outer.dark\:bg-gray-800,
html.uc-dark #wrapper .section-outer.dark\:bg-gray-900 {
    background: radial-gradient(64% 52% at 50% 0%, rgba(216, 57, 36, 0.17), transparent 66%), rgba(255, 255, 255, 0.022) !important;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html.uc-dark #wrapper .features-item,
html.uc-dark #wrapper #key_features .features-item,
html.uc-dark #wrapper .clients-feedback-item,
html.uc-dark #wrapper .bg-white.dark\:bg-opacity-5,
html.uc-dark #wrapper :not(.section-outer).dark\:bg-gray-800,
html.uc-dark #wrapper :not(.section-outer).dark\:bg-gray-900,
html.uc-dark #wrapper [style*="background-color: #feeeeb"] {
    background: var(--wz-surface) !important;
    border: 1px solid var(--wz-hair) !important;
    box-shadow: var(--wz-lift) !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
html.uc-dark #wrapper .features-item:hover,
html.uc-dark #wrapper .clients-feedback-item:hover {
    border-color: rgba(216, 57, 36, 0.55) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(216, 57, 36, 0.18), 0 18px 40px rgba(0, 0, 0, 0.45) !important;
}
html.uc-dark .icon-box {
    background: linear-gradient(135deg, rgba(216, 57, 36, 0.34), rgba(216, 57, 36, 0.1)) !important;
    border: 1px solid rgba(216, 57, 36, 0.35);
    box-shadow: none;
}
html.uc-dark .icon-box i { color: #e04b36 !important; }

/* ---- label pills above headings ---- */
html.uc-dark .section-heading > span.ft-serif,
html.uc-dark .border.rounded-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--wz-hair) !important;
    color: rgba(255, 255, 255, 0.86) !important;
    letter-spacing: 1px;
}

/* ---- buttons: the main action glows red ---- */
html.uc-dark .btn-primary,
html.uc-dark .uc-navbar-right .btn-primary {
    background: linear-gradient(180deg, #d83924, #c2311e) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}
html.uc-dark .btn-primary:hover { background: #d83924 !important; }
/* the raised bezel stays, on top of the glow */
html.uc-dark .btn-primary.contrast-shadow-sm { box-shadow: 2px 2px 0 0 rgba(255, 255, 255, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35) !important; }
html.uc-dark .btn-primary.hover\:contrast-shadow:hover { box-shadow: 3px 3px 0 0 rgba(255, 255, 255, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35) !important; }
html.uc-dark .btn-dark {
    background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #fff !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html.uc-dark .btn-dark:hover { background: rgba(255, 255, 255, 0.14) !important; }

/* ---- hero: the changing phrase is a red bar with white type ---- */
html.uc-dark .hero-header .bg-primary.dark\:bg-tertiary {
    background: #d83924 !important;
    color: #fff !important;
    box-shadow: none;
}

/* ---- feature tabs ---- */
html.uc-dark [data-uc-switcher] > li > a { color: rgba(255, 255, 255, 0.68) !important; }
html.uc-dark [data-uc-switcher] > li.uc-active {
    background: linear-gradient(180deg, #d83924, #c2311e) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 16px rgba(0, 0, 0, 0.35);
}
html.uc-dark [data-uc-switcher] > li.uc-active > a { color: #fff !important; }
html.uc-dark #wrapper .panel.border.rounded-2,
html.uc-dark #wrapper .panel.border.rounded-3 { border-color: var(--wz-hair) !important; background: rgba(255, 255, 255, 0.03); }

/* ---- the red call-to-action block ---- */
html.uc-dark #wrapper div.bg-primary.text-white {
    background: radial-gradient(90% 130% at 18% 0%, #d83924 0%, #d83924 42%, #7d1c10 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px rgba(0, 0, 0, 0.35);
}
html.uc-dark #wrapper div.bg-primary.text-white .btn-primary {
    background: #fff !important; color: #d83924 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* ---- header, menus, footer ---- */
html.uc-dark .uc-sticky-fixed .uc-navbar-container,
html.uc-dark .uc-navbar-container.uc-navbar-sticky {
    background-color: rgba(9, 10, 13, 0.72) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--wz-hair);
}
html.uc-dark .uc-dropbar,
html.uc-dark .uc-offcanvas-bar {
    background: rgba(11, 12, 16, 0.97) !important;
    border-bottom: 1px solid var(--wz-hair);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6) !important;
}
html.uc-dark .uc-dropbar .dark\:bg-gray-900,
html.uc-dark .uc-dropbar .dark\:bg-gray-800 { background: transparent !important; }
html.uc-dark .footer-outer {
    background: radial-gradient(48% 80% at 8% 100%, rgba(216, 57, 36, 0.24), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.5)) !important;
    border-top: 1px solid var(--wz-hair);
}

/* ---- questions and answers ---- */
html.uc-dark .uc-accordion-title { color: #fff !important; }
html.uc-dark .uc-accordion-content { color: rgba(255, 255, 255, 0.68); }

/* ---- pricing page: same glass ---- */
html.uc-dark .module-card { background: var(--wz-surface) !important; }
html.uc-dark .module-card.selected {
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.16), rgba(22, 163, 74, 0.04)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(22, 163, 74, 0.25), 0 16px 40px rgba(22, 163, 74, 0.14) !important;
}
html.uc-dark #pricing-summary {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html.uc-dark .preset-selector, html.uc-dark .discount-tier-bar { background: rgba(255, 255, 255, 0.035) !important; }

@media (max-width: 767px) {
    html.uc-dark body::after { background-size: 44px 44px; }
    html.uc-dark .hero-header > .position-absolute:nth-child(1) { background: radial-gradient(110% 46% at 50% -4%, rgba(216, 57, 36, 0.36), transparent 72%) !important; }
}

/* pictures that come in a light and a dark version: show the one that matches the theme */
img.wz-th-d { display: none !important; }
html.uc-dark img.wz-th-l { display: none !important; }
html.uc-dark img.wz-th-d { display: block !important; }

/* ---------- why choose us: live pictures that follow the theme ---------- */
.wz-why-art { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 8%;
    --why-card: #fff; --why-ink: #1a1a1a; --why-line: #1a1a1a; --why-soft: #f4efed; }
html.uc-dark .wz-why-art { --why-card: #17181c; --why-ink: #fff; --why-line: rgba(255, 255, 255, 0.32); --why-soft: rgba(255, 255, 255, 0.07); }
.wz-why-chip { padding: 16px 30px; font-size: 1.05rem; font-weight: 500; color: var(--why-ink); background: var(--why-card); border: 2px solid var(--why-line); box-shadow: 7px 7px 0 #d83924; white-space: nowrap; }
.wz-why-train { align-items: flex-start; gap: 34px; padding-left: 14%; }
.wz-why-train .wz-why-chip:nth-child(2) { margin-left: 34%; }
.wz-why-quote { display: flex; align-items: center; gap: 14px; max-width: 92%; padding: 18px 22px; border-radius: 16px; background: var(--why-soft); transform: rotate(-1.5deg); }
.wz-why-quote-r { transform: rotate(1.5deg); align-self: flex-end; }
.wz-why-quote p { margin: 0; font-size: 1rem; line-height: 1.4; text-align: center; color: #d83924; }
html.uc-dark .wz-why-quote p { color: #e04b36; }
.wz-why-quote img { width: 54px; height: 54px; flex: none; border-radius: 50%; object-fit: cover; background: #111; }
.wz-why-release { display: grid; grid-template-columns: 64px 1fr 64px; grid-template-rows: 64px 1fr 64px; gap: 0; width: 100%; max-width: 380px; aspect-ratio: 1; height: auto; inset: 0; margin: auto; padding: 0; }
.wz-why-ring { grid-column: 1 / -1; grid-row: 1 / -1; margin: 22px; border-radius: 50%; border: 26px solid #d83924; background: var(--why-card); display: flex; align-items: center; justify-content: center; text-align: center; }
.wz-why-ring b { font-size: 1.15rem; line-height: 1.2; color: #d83924; }
html.uc-dark .wz-why-ring b { color: #e04b36; }
.wz-why-tile { z-index: 1; width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #d83924; background: var(--why-card); border: 5px solid #f3b3aa; }
html.uc-dark .wz-why-tile { border-color: rgba(216, 57, 36, 0.5); color: #e04b36; }
.wz-why-tile svg { width: 30px; height: 30px; }
.wz-why-tile:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.wz-why-tile:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.wz-why-tile:nth-of-type(3) { grid-column: 1; grid-row: 3; }
.wz-why-tile:nth-of-type(4) { grid-column: 3; grid-row: 3; }
.wz-why-req { width: 100%; max-width: 400px; border-radius: 22px; overflow: hidden; background: var(--why-card); border: 1.5px solid #d83924; }
html.uc-dark .wz-why-req { border-color: rgba(216, 57, 36, 0.7); }
.wz-why-req-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; background: #d83924; color: #fff; font-size: 1.1rem; }
.wz-why-req-head svg { width: 26px; height: 26px; flex: none; }
.wz-why-req p { margin: 0; padding: 22px 26px; font-size: 1rem; line-height: 1.5; text-align: center; color: #d83924; }
html.uc-dark .wz-why-req p { color: rgba(255, 255, 255, 0.82); }
.wz-why-req-foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid rgba(216, 57, 36, 0.5); }
.wz-why-req-foot span { padding: 14px; text-align: center; color: #d83924; }
html.uc-dark .wz-why-req-foot span { color: #e04b36; }
.wz-why-req-foot span + span { border-left: 1.5px solid rgba(216, 57, 36, 0.5); }
@media (max-width: 575px) { .wz-why-chip { padding: 12px 20px; font-size: 0.95rem; } .wz-why-quote p { font-size: 0.9rem; } }
/* release ring: a fixed square so it never squashes */
.wz-why-release { display: block; position: absolute; inset: 0; margin: auto; width: 300px; height: 300px; max-width: none; aspect-ratio: auto; padding: 0; }
.wz-why-release .wz-why-ring { position: absolute; inset: 26px; margin: 0; }
.wz-why-release .wz-why-tile { position: absolute; }
.wz-why-release .wz-why-tile:nth-of-type(1) { left: 0; top: 0; }
.wz-why-release .wz-why-tile:nth-of-type(2) { right: 0; top: 0; }
.wz-why-release .wz-why-tile:nth-of-type(3) { left: 0; bottom: 0; }
.wz-why-release .wz-why-tile:nth-of-type(4) { right: 0; bottom: 0; }
.wz-why-art svg { fill: none !important; stroke: currentColor; }
.wz-why-art svg * { fill: none !important; }
.wz-why-release { inset: 0 0 28px 0; }

/* FAQ: breathing room above the heading and below the list (both themes) */
#faq > .section-outer { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(40px, 5vw, 72px); }