/* Self-hosted fonts (Manrope, Outfit) - removes two DNS/TLS round-trips to
   fonts.googleapis.com + fonts.gstatic.com on the critical path. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('/fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('/fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --color-black: #000000;
    --color-canvas: #080809;
    --color-dark-blue: #0a0a0b;
    --color-graphite: #1f2d3a;
    --color-white: #ffffff;
    --color-accent: #ffffff;
    --color-background: transparent;
    --color-nav-default: #5c5c5c;
    
    --font-primary: 'Manrope', sans-serif;
    --font-blog-display: 'Outfit', 'Manrope', system-ui, sans-serif;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: wac-view-fade-out 160ms ease both;
}

::view-transition-new(root) {
    animation: wac-view-fade-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The floating header (view-transition-name: wac-header) is identical and
   pinned on every page. Its frosted, semi-transparent backdrop made the
   default cross-fade dip in opacity mid-transition - reading as a momentary
   "the navbar isn't there" flicker. Hold it steady instead: no fade, old
   snapshot hidden, new shown solid - so the header stays put through the
   page transition. */
::view-transition-old(wac-header),
::view-transition-new(wac-header) {
    animation: none;
    mix-blend-mode: normal;
}
::view-transition-old(wac-header) {
    opacity: 0;
}

@keyframes wac-view-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-4px); }
}

@keyframes wac-view-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.01ms;
    }
}

/* ───────── Minimal framework (replaces bootstrap.min.css) ───────── */
*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure { margin-top: 0; }

hr {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.25;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

.d-none { display: none !important; }
.d-flex { display: flex !important; }
@media (min-width: 768px) {
    .d-md-flex { display: flex !important; }
}
@media (min-width: 992px) {
    .d-lg-flex { display: flex !important; }
    .d-lg-none { display: none !important; }
}

.flex-row { flex-direction: row !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }

.w-100 { width: 100% !important; }
.text-nowrap { white-space: nowrap !important; }

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.navbar-brand {
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.nav-link:focus, .nav-link:hover { text-decoration: none; }

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

.btn {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:focus, .btn:focus-visible { outline: 0; }

.btn-outline-light {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.38);
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
    -webkit-appearance: none;
}

.form-control:focus { outline: 0; }

.form-control.is-invalid { border-color: #dc3545; }

.form-label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.form-group { margin-bottom: 1rem; }

/* Honeypot field - hidden from real users but filled by most bots */
.wac-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

html {
    height: 100%;
    margin: 0;
    background-color: var(--color-canvas);
    overflow-x: hidden;
}

body {
    min-height: 100%;
    margin: 0;
    font-family: var(--font-primary);
    color: var(--color-graphite);
    position: relative;
    background-color: transparent;
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 80px;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable;
    }
}

main {
    flex: 1 0 auto;
    position: relative;
    z-index: 1;
    background-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--color-white);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--color-white);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.floating-header {
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.4rem 1rem;
    background-color: rgba(8, 8, 9, 0.78);
    background-color: color-mix(in srgb, var(--color-canvas) 78%, transparent);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
    margin: 0 auto;
    max-width: 1050px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
    /* No permanent will-change: backdrop-filter already promotes this element
       to its own compositing layer, so the transform animation stays smooth
       without keeping a layer alive indefinitely. */
    view-transition-name: wac-header;
}

model-viewer.hero-bg,
#hero-poster,
#hero-bg-fallback {
    view-transition-name: none;
}

@media (min-width: 992px) {
    .floating-header {
        padding: 0.75rem 1.35rem;
    }

    .floating-header .wac-nav-desktop.navbar {
        padding-top: 1.15rem;
        padding-bottom: 1.15rem;
    }

    body {
        padding-top: 102px;
    }

    body.wac-blog-page {
        padding-top: 134px;
    }
}

.floating-header.header-overshoot {
    transform: translateY(5px);
    opacity: 1;
}

.floating-header.header-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s ease-out, opacity 0.3s ease-out;
}

.floating-header .navbar,
.floating-header .container {
    background-color: transparent;
}

.floating-header .wac-nav-desktop {
    width: 100%;
}

.floating-header .wac-nav-desktop.navbar {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    padding-left: 0;
    padding-right: 0;
}

.navbar {
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    background-color: transparent;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    position: relative;
    transition: opacity 0.18s ease;
}

.two-line-logo {
    display: inline-grid;
    grid-template-columns: max-content;
    line-height: 1.1;
    position: relative;
    border-radius: 0.4rem;
    width: auto;
}

.navbar-brand:hover,
.navbar-brand:focus-visible {
    opacity: 0.78;
}

.navbar-brand:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.48);
    outline-offset: 0.32rem;
}

.navbar-brand:active {
    opacity: 0.92;
}

.logo-top {
    display: block;
    color: var(--color-white);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.logo-bottom {
    display: flex;
    justify-content: space-between;
    gap: 0;
    width: 92%;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.56);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 auto;
    line-height: 1;
}

.navbar-brand::after {
    content: none;
}

.navbar-nav .nav-link {
    font-weight: 500;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    position: relative;
    transition: color 0.3s ease;
    color: var(--color-nav-default);
}

.navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.62) !important;
}

.navbar-nav .nav-link:focus-visible {
    color: rgba(255, 255, 255, 0.72) !important;
    outline: 2px solid rgba(255, 255, 255, 0.42);
    outline-offset: 0.18rem;
    border-radius: 0.45rem;
}

.navbar-nav .nav-link.active {
    color: #d6d6d6 !important;
}

.wac-nav-desktop-row {
    min-width: 0;
}

.wac-primary-nav {
    gap: 0.08rem;
}

.wac-nav-menu-item {
    position: relative;
}

.wac-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.wac-nav-trigger:focus-visible,
.wac-nav-mega a:focus-visible,
.wac-mobile-sheet a:focus-visible,
.wac-mobile-accordion-trigger:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.82);
    outline-offset: 3px;
}

.wac-nav-caret {
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
    opacity: 0.76;
    transition: transform 0.18s ease;
}

.wac-nav-menu-item.is-open .wac-nav-caret {
    transform: translateY(1px) rotate(225deg);
}

.wac-nav-mega {
    position: fixed;
    top: 5.32rem;
    left: 50%;
    width: min(1040px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1100;
    padding-top: 0.4rem;
    transition:
        opacity 0.16s ease,
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.16s ease;
}

.wac-nav-menu-item.is-open .wac-nav-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* No-JS fallback: until main.js sets html.wac-js, reveal the mega on hover or
   focus so sub-navigation is reachable without scripting. Gated to
   html:not(.wac-js) so it never fights the JS open/close/toggle logic, where a
   lingering :hover / :focus-within would otherwise keep a panel stuck open. */
html:not(.wac-js) .wac-nav-menu-item:hover .wac-nav-mega,
html:not(.wac-js) .wac-nav-menu-item:focus-within .wac-nav-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.wac-nav-mega-grid {
    display: grid;
    grid-template-columns: minmax(20rem, 22rem) minmax(0, 1fr);
    align-items: stretch;
    gap: 0.72rem;
    padding: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(12, 12, 13, 0.95);
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.wac-nav-mega-feature,
.wac-nav-mega-card {
    border-radius: 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
}

.wac-nav-mega-feature {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 21rem;
    padding: 1.1rem;
    background: rgba(20, 20, 21, 0.54);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.wac-nav-mega-feature::before,
.wac-nav-mega-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wac-nav-mega-feature::before {
    z-index: 0;
    background-image: var(--wac-nav-feature-image);
    background-size: cover;
    background-position: center;
    filter: grayscale(1) contrast(1.08);
    opacity: 0.76;
    transform: scale(1);
    transition: opacity 0.18s ease, transform 0.22s ease;
}

.wac-nav-mega-feature::after {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(8, 8, 9, 0.18), rgba(8, 8, 9, 0.78)),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18));
}

.wac-nav-mega-feature--services {
    --wac-nav-feature-image: url("https://images.unsplash.com/photo-1639920464448-aed8c129712a?auto=format&fit=crop&crop=entropy&w=720&h=720&q=72");
}

.wac-nav-mega-feature--resources {
    --wac-nav-feature-image: url("https://images.unsplash.com/photo-1741163269578-c51176eddb3c?auto=format&fit=crop&crop=entropy&w=720&h=720&q=72");
}

.wac-nav-mega-feature:hover,
.wac-nav-mega-feature:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.wac-nav-mega-feature:hover::before,
.wac-nav-mega-feature:focus-visible::before {
    opacity: 0.84;
    transform: scale(1.012);
}

.wac-nav-badge {
    align-self: flex-start;
    margin-bottom: auto;
    padding: 0.24rem 0.52rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.wac-nav-mega-feature .wac-nav-badge,
.wac-nav-mega-feature strong,
.wac-nav-mega-feature > span:last-child {
    position: relative;
    z-index: 2;
}

.wac-nav-mega-feature strong,
.wac-nav-mega-card strong {
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.25;
}

.wac-nav-mega-feature > span:last-child,
.wac-nav-mega-card span {
    display: block;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.78rem;
    line-height: 1.45;
}

.wac-nav-mega-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 1fr);
    align-items: stretch;
    gap: 0.55rem;
    min-height: 21rem;
    height: 100%;
}

.wac-nav-mega-card {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-height: 0;
    height: 100%;
    padding: 0.82rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.07);
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.wac-nav-mega-card span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.wac-nav-mega-card:hover,
.wac-nav-mega-card:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-1px);
}

.wac-nav-trigger.active {
    color: #d6d6d6 !important;
}

[data-wac-current-page="true"],
.wac-nav-trigger.active[aria-current="page"] {
    cursor: pointer;
}

.navbar-nav .nav-link[data-wac-current-page="true"]:hover,
.navbar-nav .nav-link[data-wac-current-page="true"]:focus-visible {
    color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
    .wac-nav-mega,
    .wac-nav-caret,
    .wac-nav-mega-card,
    .wac-mobile-accordion-icon {
        transition-duration: 0.01ms !important;
    }
}

.floating-header .navbar .btn {
    box-shadow: none;
}

.floating-header .btn.btn-outline-light {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.floating-header .btn.btn-outline-light:hover,
.floating-header .btn.btn-outline-light:focus-visible {
    background-color: #fff !important;
    color: var(--color-canvas) !important;
    border-color: #fff !important;
}

.floating-header .btn.btn-outline-light:active {
    background-color: rgba(255, 255, 255, 0.92) !important;
    color: var(--color-canvas) !important;
    border-color: #fff !important;
}

.floating-header #get-started-btn.btn-get-started,
.floating-header #get-started-btn.btn-get-started:focus,
.floating-header #get-started-btn.btn-get-started:active {
    background-color: #fff !important;
    color: var(--color-canvas) !important;
    border-color: #fff !important;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        opacity 0.15s ease;
}

.floating-header #get-started-btn.btn-get-started:hover {
    background-color: #fff !important;
    color: var(--color-canvas) !important;
    border-color: #fff !important;
    opacity: 0.92;
}

.floating-header:has(#login-btn:hover) #get-started-btn.btn-get-started {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
    opacity: 1 !important;
}

.floating-header:has(#login-btn:hover) #get-started-btn.btn-get-started:hover {
    background-color: #fff !important;
    color: var(--color-canvas) !important;
    border-color: #fff !important;
    opacity: 1 !important;
}

.floating-header .wac-nav-mobile .wac-nav-mobile-tools {
    gap: 0.35rem;
    flex-shrink: 1;
    min-width: 0;
}

.floating-header .wac-nav-mobile .wac-nav-auth-compact {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    flex-shrink: 1;
    min-width: 0;
    margin-right: 0.15rem;
}

.floating-header .wac-nav-mobile .wac-nav-compact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    padding: 0.42rem 0.48rem;
    border-radius: 8px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.floating-header .wac-nav-mobile .wac-nav-compact-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.floating-header .wac-nav-mobile .wac-nav-compact-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-canvas);
    background: #fff;
    text-decoration: none;
    padding: 0.42rem 0.55rem;
    border-radius: 8px;
    white-space: nowrap;
    letter-spacing: 0.01em;
    border: 1px solid rgba(255, 255, 255, 0.28);
    transition: opacity 0.15s ease;
}

.floating-header .wac-nav-mobile .wac-nav-compact-primary:hover {
    opacity: 0.9;
    color: var(--color-canvas);
}

.wac-cta-wip {
    cursor: not-allowed;
}

.wac-wip-popover {
    position: fixed;
    z-index: 1100;
    display: none;
    overflow: hidden;
    border-radius: 8px;
    background: #0c0c0c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.48);
}

.wac-wip-popover.is-visible {
    display: block;
    animation: wac-wip-popover-enter 0.16s ease-out forwards;
}

.wac-wip-popover.is-visible.is-leaving {
    display: block;
    pointer-events: none;
    animation: wac-wip-popover-exit 0.2s ease-in forwards;
}

.wac-wip-popover__edge {
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
}

.wac-wip-popover__row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.72rem 0.75rem 0.75rem;
}

.wac-wip-popover__content {
    flex: 1;
    min-width: 0;
}

.wac-wip-popover__title {
    display: block;
    margin-bottom: 0.22rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}

.wac-wip-popover__body {
    display: block;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.58);
}

.wac-wip-popover__close {
    flex: 0 0 auto;
    margin: -0.18rem -0.1rem 0 0;
    padding: 0.16rem 0.34rem;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.48);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.wac-wip-popover__close:hover,
.wac-wip-popover__close:focus-visible {
    color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.08);
}

@keyframes wac-wip-popover-enter {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes wac-wip-popover-exit {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-4px) scale(0.985);
    }
}

@media (max-width: 575.98px) {
    .wac-wip-popover {
        width: auto !important;
    }
}

.floating-header .wac-nav-mobile .wac-burger {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    flex-shrink: 0;
    cursor: pointer;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    isolation: isolate;
}

.floating-header .wac-nav-mobile .wac-burger:hover {
    background: transparent;
}

.floating-header .wac-nav-mobile .wac-burger:focus,
.floating-header .wac-nav-mobile .wac-burger:focus-visible {
    outline: none;
    box-shadow: none;
}

.floating-header .wac-nav-mobile .wac-burger-line {
    display: block;
    position: absolute;
    top: 21px;
    left: 13px;
    right: 13px;
    height: 1.5px;
    border-radius: 0.75px;
    background: currentColor;
    transform-origin: center;
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-header .wac-nav-mobile .wac-burger.collapsed .wac-burger-line:nth-child(1) {
    transform: translateY(-4px);
}

.floating-header .wac-nav-mobile .wac-burger.collapsed .wac-burger-line:nth-child(2) {
    transform: translateY(4px);
}

.floating-header .wac-nav-mobile .wac-burger:not(.collapsed) .wac-burger-line:nth-child(1) {
    transform: translateY(0) rotate(45deg);
}

.floating-header .wac-nav-mobile .wac-burger:not(.collapsed) .wac-burger-line:nth-child(2) {
    transform: translateY(0) rotate(-45deg);
}

@media (max-width: 991.98px) {
    html.wac-nav-lock,
    html.wac-nav-lock body {
        overflow: hidden;
    }

    body {
        padding-top: 84px;
    }

    body.wac-blog-page {
        padding-top: 110px;
    }

    .floating-header {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 0;
        padding: 0;
        padding-top: env(safe-area-inset-top, 0);
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
        background-color: rgba(8, 8, 9, 0.94);
        background-color: color-mix(in srgb, var(--color-canvas) 94%, transparent);
        /* Reduced from 12px: the mobile header stays on screen for the whole
           scroll (scroll-hide is disabled below), so a smaller sampled-blur
           area materially cuts per-frame repaint cost. The 94%-opaque bg keeps
           it legible without heavy blur. */
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: none;
        will-change: auto;
        transform: none;
    }

    .floating-header.header-hidden,
    .floating-header.header-overshoot {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .floating-header > .container {
        max-width: none;
        width: 100%;
        margin: 0;
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }

    .floating-header .wac-nav-mobile > .d-flex.align-items-center.justify-content-between.w-100 {
        position: relative;
        z-index: 3;
        min-height: 4.15rem;
        padding-top: 0.9rem !important;
        padding-bottom: 0.9rem !important;
        background-color: rgba(8, 8, 9, 0.94);
        background-color: color-mix(in srgb, var(--color-canvas) 94%, transparent);
    }

    .floating-header .wac-nav-mobile .navbar-collapse.wac-navbar-collapse-mobile {
        margin-top: 0;
        border-radius: 0;
        position: fixed;
        top: var(--wac-mobile-nav-overlay-top, 6rem);
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        height: calc(100vh - var(--wac-mobile-nav-overlay-top, 6rem));
        height: calc(100dvh - var(--wac-mobile-nav-overlay-top, 6rem));
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        box-sizing: border-box;
        padding: 1.1rem max(1.25rem, env(safe-area-inset-right, 0px))
            max(1.5rem, env(safe-area-inset-bottom, 0px))
            max(1.25rem, env(safe-area-inset-left, 0px));
        background-color: rgba(8, 8, 9, 0.985);
        background-color: color-mix(in srgb, var(--color-canvas) 98.5%, transparent);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    .floating-header .wac-nav-mobile .navbar-collapse.wac-navbar-collapse-mobile.wac-nav-mobile-menu--open {
        opacity: 1;
        pointer-events: auto;
    }

    @media (prefers-reduced-motion: reduce) {
        .floating-header .wac-nav-mobile .navbar-collapse.wac-navbar-collapse-mobile {
            transition: none;
        }

        .floating-header .wac-nav-mobile .wac-burger-line {
            transition-duration: 0.01ms;
        }
    }

    .wac-mobile-sheet {
        display: flex;
        flex-direction: column;
        gap: 0.32rem;
        width: 100%;
    }

    .floating-header .wac-nav-mobile .wac-navbar-collapse-mobile .nav-link,
    .wac-mobile-accordion-trigger,
    .wac-mobile-accordion-panel a {
        width: 100%;
        text-align: left;
    }

    .floating-header .wac-nav-mobile .wac-navbar-collapse-mobile .nav-link,
    .wac-mobile-accordion-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0.85rem !important;
        font-size: 1.15rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.94) !important;
        border-radius: 10px;
        border: 0;
        background: transparent;
        font-family: inherit;
        line-height: 1.3;
        cursor: pointer;
    }

    .floating-header .wac-nav-mobile .wac-navbar-collapse-mobile .nav-link:hover,
    .floating-header .wac-nav-mobile .wac-navbar-collapse-mobile .nav-link:focus-visible,
    .wac-mobile-accordion-trigger:hover,
    .wac-mobile-accordion-trigger:focus-visible {
        background: rgba(255, 255, 255, 0.07);
        color: #fff !important;
    }

    .floating-header .wac-nav-mobile .wac-navbar-collapse-mobile .nav-link.active,
    .wac-mobile-accordion-trigger.active {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.06);
    }

    .wac-mobile-accordion {
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.025);
        overflow: hidden;
    }

    .wac-mobile-accordion-trigger {
        border-radius: 0;
    }

    .wac-mobile-accordion-icon {
        width: 0.55rem;
        height: 0.55rem;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.18s ease;
        opacity: 0.78;
    }

    .wac-mobile-accordion-trigger[aria-expanded="true"] .wac-mobile-accordion-icon {
        transform: rotate(225deg);
    }

    .wac-mobile-accordion-panel {
        display: grid;
        gap: 0.12rem;
        padding: 0 0.45rem 0.55rem;
    }

    .wac-mobile-accordion-panel[hidden] {
        display: none;
    }

    .wac-mobile-accordion-panel a {
        display: block;
        padding: 0.72rem 0.82rem;
        border-radius: 9px;
        color: rgba(255, 255, 255, 0.76);
        font-size: 0.98rem;
        font-weight: 600;
        line-height: 1.3;
        text-decoration: none;
    }

    .wac-mobile-accordion-panel a:hover,
    .wac-mobile-accordion-panel a:focus-visible,
    .wac-mobile-accordion-panel a.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.065);
    }

    .wac-mobile-book-link {
        margin-top: 0.35rem;
        justify-content: center !important;
        color: var(--color-canvas) !important;
        background: #fff !important;
    }
}


/* Respect reduced-motion for the header's own show/hide. The existing
   reduced-motion blocks cover the mega/caret/accordion, but not the floating
   header's transform/opacity slide or the overshoot bounce - neutralize them
   so the scroll-hide is instant rather than a springy slide. */
@media (prefers-reduced-motion: reduce) {
    .floating-header,
    .floating-header.header-hidden,
    .floating-header.header-overshoot {
        transition: none;
    }
    .floating-header.header-overshoot {
        transform: translateY(0);
    }
}

/* Skip-to-content link: first focusable element, hidden until focused. Lets
   keyboard / screen-reader users bypass the nav (WCAG 2.4.1). Target is the
   <main id="main"> on each content page. */
.wac-skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    margin: 0.6rem;
    padding: 0.6rem 1rem;
    background: #ffffff;
    color: #080809;
    font-family: 'Manrope', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.45rem;
    transform: translateY(-160%);
    transition: transform 0.18s ease;
}
.wac-skip-link:focus {
    transform: translateY(0);
    outline: 2px solid #080809;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .wac-skip-link { transition: none; }
}
.hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    background-color: transparent;
}

.hero-content {
    max-width: 800px;
    z-index: 2;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero .hero-subtitle {
    color: rgba(255, 255, 255, 0.94);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-shadow:
        0 0 1px rgba(8, 8, 9, 0.95),
        0 1px 2px rgba(8, 8, 9, 0.85),
        0 0 28px rgba(8, 8, 9, 0.55);
}

.arrow-down {
    font-size: 1rem;
    color: #ffffff;
    animation: bounce 2s infinite;
    cursor: pointer;
    z-index: 2;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    margin-bottom: 10px;
}

.arrow-down svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.explore-container {
    position: absolute;
    bottom: 9vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    cursor: pointer;
    border: 0;
    color: #ffffff;
    text-decoration: none;
    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.28s ease;
}

.explore-container:hover .arrow-down {
    opacity: 1;
}

.explore-container:hover,
.explore-container:focus {
    color: #ffffff;
    text-decoration: none;
}

.explore-container:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.72);
    outline-offset: 0.65rem;
}

.explore-container.explore-fading {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.35rem);
    visibility: hidden;
}

.explore-text {
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.explore-container:hover .explore-text {
    opacity: 1;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.wac-rule {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 1px;
    border: 0;
    padding: 0;
    opacity: 0.2;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.26) 12%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.26) 88%,
        transparent 100%
    );
}

.about-rule-wrap {
    padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}

#delivered-in-your-tools {
    scroll-margin-top: 5rem;
}

#about-words-heading {
    scroll-margin-top: 6rem;
}

#quote-request {
    scroll-margin-top: 7rem;
}

body.wac-blog-page {
    padding-top: 110px;
    text-align: start;
}

.wac-blog-page {
    background: var(--color-canvas);
    color: rgba(255, 255, 255, 0.46);
    --wac-blog-bleed: calc(1rem + 2 * var(--bs-gutter-x, 1.5rem) - 3px);
    --wac-blog-media-radius: 8px;
    --wac-blog-media-border: 1px solid rgba(255, 255, 255, 0.09);
    /* Long-form (Linear-style): readable measure + brighter body copy */
    --wac-blog-content-max: min(38rem, 100%);
    --wac-blog-prose-text: rgba(255, 255, 255, 0.88);
    --wac-blog-prose-heading: rgba(255, 255, 255, 0.97);
    --wac-blog-prose-muted: rgba(255, 255, 255, 0.48);
}

.wac-blog-page .wac-blog-footer-rule {
    padding-top: clamp(0.65rem, 1.5vw, 1rem);
    padding-bottom: 0;
}

.wac-blog-page main.wac-blog-main {
    width: 100%;
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(1rem + 2 * var(--bs-gutter-x, 1.5rem));
    padding-right: calc(1rem + 2 * var(--bs-gutter-x, 1.5rem));
    text-align: start;
}

.wac-blog-page .wac-blog-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(0.65rem, 1.75vw, 1.15rem) 0 1.15rem;
    margin-left: calc(-1 * var(--wac-blog-bleed));
    margin-right: calc(-1 * var(--wac-blog-bleed));
    width: calc(100% + 2 * var(--wac-blog-bleed));
    max-width: none;
    box-sizing: border-box;
    text-align: start;
}

.wac-blog-page .wac-blog-list {
    margin-left: calc(-1 * var(--wac-blog-bleed));
    margin-right: calc(-1 * var(--wac-blog-bleed));
    width: calc(100% + 2 * var(--wac-blog-bleed));
    max-width: none;
    box-sizing: border-box;
    text-align: start;
}

.wac-blog-page .wac-blog-hero h1#wac-blog-heading {
    font-family: var(--font-blog-display);
    max-width: 13ch;
    margin: 0 0 1rem;
    font-size: clamp(2.4rem, 6vw, 4.1rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: #f4f4f5;
    text-align: left;
}

.wac-blog-page .wac-blog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 0 0 1.25rem;
    align-self: stretch;
    width: 100%;
}

.wac-blog-page .wac-blog-categories {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: start;
}

.wac-blog-page .wac-blog-categories-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem 0.65rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wac-blog-page .wac-blog-cat {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.32);
    cursor: pointer;
    transition: color 0.15s ease;
}

.wac-blog-page .wac-blog-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
    transform: translateY(-1px);
}

.wac-blog-page .wac-blog-search-trigger,
.wac-blog-page .wac-blog-rss-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(9, 9, 11, 0.62);
    color: rgba(255, 255, 255, 0.32);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.wac-blog-page .wac-blog-search-trigger {
    width: min(332px, 42vw);
    gap: 0.55rem;
    padding: 0 0.9rem 0 0.7rem;
    justify-content: flex-start;
    cursor: pointer;
}

.wac-blog-page .wac-blog-rss-button {
    width: 38px;
    height: 38px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.wac-blog-page .wac-blog-search-trigger:hover,
.wac-blog-page .wac-blog-search-trigger:focus-visible {
    border-color: rgba(244, 244, 245, 0.26);
    background: rgba(24, 24, 27, 0.86);
    color: rgba(255, 255, 255, 0.52);
}

.wac-blog-page .wac-blog-rss-button:hover,
.wac-blog-page .wac-blog-rss-button:focus-visible {
    border-color: transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.52);
}

.wac-blog-page .wac-blog-command-icon,
.wac-blog-page .wac-blog-rss-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wac-blog-page .wac-blog-rss-icon {
    width: 1.38rem;
    height: 1.38rem;
    stroke-width: 2.35;
}

.wac-blog-page .wac-blog-rss-dot {
    fill: currentColor;
    stroke: none;
}

.wac-blog-page .wac-blog-command-icon {
    opacity: 0.82;
}

.wac-blog-page .wac-blog-command-placeholder {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: currentColor;
}

.wac-blog-page .wac-blog-cat:hover {
    color: rgba(255, 255, 255, 0.52);
}

.wac-blog-page .wac-blog-cat.is-active {
    color: #c8c8c9;
}

.wac-blog-page .wac-blog-cat:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.22);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (max-width: 767.98px) {
    .wac-blog-page .wac-blog-cat {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0.42rem 0.62rem;
    }
}

.wac-blog-page .wac-blog-feed,
.wac-blog-page .wac-blog-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.25rem 1.5rem;
    padding-bottom: 1.15rem;
}

@media (max-width: 991px) {
    .wac-blog-page .wac-blog-feed,
    .wac-blog-page .wac-blog-skeleton-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .wac-blog-page .wac-blog-feed,
    .wac-blog-page .wac-blog-skeleton-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.wac-blog-page .wac-blog-skeleton-grid[hidden] {
    display: none;
}

.wac-blog-page .wac-blog-skeleton-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 11rem;
    border-radius: var(--wac-blog-media-radius);
    overflow: hidden;
}

.wac-blog-page .wac-blog-skeleton-card .wac-blog-post-main {
    min-height: 10.85rem;
}

@media (max-width: 600px) {
    .wac-blog-page .wac-blog-skeleton-card .wac-blog-post-main {
        min-height: 8.4rem;
    }
}

.wac-blog-page .wac-blog-skeleton-line,
.wac-blog-page .wac-blog-post-thumb-frame::before {
    background:
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.028) 0%,
            rgba(255, 255, 255, 0.055) 42%,
            rgba(255, 255, 255, 0.095) 50%,
            rgba(255, 255, 255, 0.055) 58%,
            rgba(255, 255, 255, 0.028) 100%
        );
    background-size: 220% 100%;
    animation: wac-blog-skeleton-sheen 1.55s ease-in-out infinite;
}

.wac-blog-page .wac-blog-skeleton-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--wac-blog-media-radius);
    margin-bottom: 0.85rem;
}

.wac-blog-page .wac-blog-skeleton-line {
    display: block;
    width: 100%;
    height: 0.78rem;
    border-radius: 999px;
    margin-bottom: 0.62rem;
}

.wac-blog-page .wac-blog-skeleton-line--title {
    width: 92%;
    height: 1.04rem;
}

.wac-blog-page .wac-blog-skeleton-line--title-short {
    width: 68%;
    height: 1.04rem;
    margin-bottom: 0.85rem;
}

.wac-blog-page .wac-blog-skeleton-line--body-short {
    width: 78%;
    margin-bottom: auto;
}

.wac-blog-page .wac-blog-skeleton-card .wac-blog-post-meta-row {
    display: flex;
    align-items: center;
    min-height: 1.1rem;
}

.wac-blog-page .wac-blog-skeleton-line--meta {
    width: min(64%, 13.5rem);
    height: 0.82rem;
    margin-top: 0;
    margin-bottom: 0;
}

@keyframes wac-blog-skeleton-sheen {
    0% {
        background-position: 130% 0;
    }

    100% {
        background-position: -130% 0;
    }
}

.wac-blog-page .wac-blog-post {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    min-height: 11rem;
    border: 1px solid transparent;
    border-radius: var(--wac-blog-media-radius);
    background: var(--color-canvas);
    box-shadow: none;
    overflow: hidden;
}

.wac-blog-page .wac-blog-post-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    padding: 0;
    text-decoration: none;
    color: inherit;
    border-radius: var(--wac-blog-media-radius);
}

.wac-blog-page .wac-blog-post-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
    border-radius: var(--wac-blog-media-radius);
}

.wac-blog-page .wac-blog-post-thumb-frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.025);
    border-radius: var(--wac-blog-media-radius);
    margin-bottom: 0.85rem;
    overflow: hidden;
}

.wac-blog-page .wac-blog-post-thumb-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: opacity 0.22s ease;
}

.wac-blog-page .wac-blog-post-thumb-frame.is-loaded::before,
.wac-blog-page .wac-blog-post-thumb-frame.is-error::before {
    opacity: 0;
}

.wac-blog-page .wac-blog-post-thumb {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
    border: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.wac-blog-page .wac-blog-post-thumb-frame.is-loaded .wac-blog-post-thumb {
    opacity: 1;
}

.wac-blog-page .wac-blog-post-thumb-frame.is-error .wac-blog-post-thumb {
    display: none;
}

.wac-blog-page .wac-blog-post-main {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 0 0 0.95rem;
}

.wac-blog-page .wac-blog-post-foot {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid transparent;
}

.wac-blog-page .wac-blog-post-meta-row {
    min-height: 1rem;
}

.wac-blog-page .wac-blog-post-meta-text {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5em;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.011em;
    color: rgba(255, 255, 255, 0.4);
}

.wac-blog-page .wac-blog-post-meta-core {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

.wac-blog-page a.wac-blog-post-link .wac-blog-post-meta-core,
.wac-blog-page a.wac-blog-post-link .wac-blog-post-meta-core * {
    color: rgba(255, 255, 255, 0.4) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
}

.wac-blog-page .wac-blog-post-meta-text .wac-blog-post-author,
.wac-blog-page .wac-blog-post-meta-text .wac-blog-post-time,
.wac-blog-page .wac-blog-post-meta-text .wac-blog-post-sep {
    color: inherit;
}

.wac-blog-page .wac-blog-post-meta-text time.wac-blog-post-time {
    color: inherit;
}

.wac-blog-page .wac-blog-post-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 1em;
    line-height: 0;
    color: rgba(255, 255, 255, 0.42);
    opacity: 0;
    transform: translate3d(-4px, 0, 0);
    transition:
        opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.22s ease;
}

.wac-blog-page .wac-blog-post-arrow-svg {
    display: block;
    width: 11px;
    height: 11px;
}

.wac-blog-page .wac-blog-post-link:hover .wac-blog-post-arrow {
    opacity: 1;
    transform: translate3d(2px, 0, 0);
    color: rgba(255, 255, 255, 0.68);
}

@media (prefers-reduced-motion: reduce) {
    .wac-blog-page .wac-blog-skeleton-line,
    .wac-blog-page .wac-blog-post-thumb-frame::before {
        animation: none;
    }

    .wac-blog-page .wac-blog-post-arrow {
        transform: none;
        transition: opacity 0.15s ease, color 0.15s ease;
    }

    .wac-blog-page .wac-blog-post-link:hover .wac-blog-post-arrow {
        transform: none;
    }
}

.wac-blog-page .wac-blog-post-title {
    font-size: clamp(1.08rem, 1vw + 0.75rem, 1.28rem);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.28;
    margin: 0 0 0.55rem;
    color: #e6e6e8;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.wac-blog-page .wac-blog-post-excerpt {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    letter-spacing: -0.011em;
    color: rgba(255, 255, 255, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 5;
    flex: 1 1 auto;
    min-height: 3.5rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.wac-blog-page .wac-blog-status {
    max-width: none;
    margin: 0;
    padding: 0.75rem 0 1rem;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.88rem;
    text-align: start;
}

.wac-blog-page .wac-blog-status.wac-blog-status--error {
    color: rgba(232, 168, 168, 0.95);
    font-size: 0.86rem;
    line-height: 1.55;
}

.wac-blog-page .wac-blog-static-archive {
    margin-left: calc(-1 * var(--wac-blog-bleed));
    margin-right: calc(-1 * var(--wac-blog-bleed));
    width: calc(100% + 2 * var(--wac-blog-bleed));
    padding: clamp(0.75rem, 2vw, 1.1rem) 0 0.35rem;
    border-top: 0;
}

.wac-blog-page .wac-blog-static-archive-head {
    max-width: 38rem;
    margin-bottom: 1.35rem;
}

.wac-blog-page .wac-blog-static-archive h2,
.wac-blog-page .wac-blog-archive-group h3,
.wac-blog-page .wac-related-reading h2,
.wac-related-guides h2 {
    font-family: var(--font-blog-display);
    color: var(--wac-blog-prose-heading);
    letter-spacing: -0.03em;
}

.wac-blog-page .wac-blog-static-archive h2 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
}

.wac-blog-page .wac-blog-static-archive-head p,
.wac-blog-page .wac-blog-archive-group p {
    margin: 0;
    color: rgba(255, 255, 255, 0.48);
    line-height: 1.55;
}

.wac-blog-page .wac-blog-archive-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1.75rem;
}

.wac-blog-page .wac-blog-archive-list {
    max-width: none;
}

.wac-blog-page .wac-blog-archive-list .wac-blog-archive-item {
    padding: 0;
    border-bottom-color: rgba(255, 255, 255, 0.035);
}

.wac-blog-page .wac-blog-archive-list .wac-blog-archive-item:has(.wac-blog-archive-row:hover),
.wac-blog-page .wac-blog-archive-list .wac-blog-archive-item:has(.wac-blog-archive-row:focus-visible),
.wac-blog-page .wac-blog-archive-list .wac-blog-archive-item--last-visible {
    border-bottom-color: transparent;
}

.wac-blog-page .wac-blog-archive-list .wac-blog-archive-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: clamp(1rem, 3vw, 2rem);
    align-items: baseline;
    min-width: 0;
    margin-left: -0.65rem;
    margin-right: -0.65rem;
    padding: 1.42rem 1.1rem;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.wac-blog-page .wac-blog-archive-list .wac-blog-archive-row:hover,
.wac-blog-page .wac-blog-archive-list .wac-blog-archive-row:focus-visible {
    background: rgba(255, 255, 255, 0.045);
}

.wac-blog-page .wac-blog-archive-list .wac-blog-archive-title {
    display: block;
    min-width: 0;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 650;
    line-height: 1.35;
}

.wac-blog-page .wac-blog-archive-list .wac-blog-archive-row:hover .wac-blog-archive-title,
.wac-blog-page .wac-blog-archive-list .wac-blog-archive-row:focus-visible .wac-blog-archive-title {
    color: #fff;
    text-decoration: none;
}

.wac-blog-page .wac-blog-archive-list .wac-blog-archive-meta {
    display: block;
    max-width: none;
    margin-top: 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.84rem;
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;
}

.wac-blog-page .wac-blog-archive-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    margin: 1.35rem auto 0;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.wac-blog-page .wac-blog-archive-more[hidden] {
    display: none;
}

.wac-blog-page .wac-blog-archive-more:hover,
.wac-blog-page .wac-blog-archive-more:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--color-canvas);
}

.wac-blog-page .wac-blog-archive-more:active {
    background: rgba(255, 255, 255, 0.92);
    border-color: #fff;
    color: var(--color-canvas);
}

.wac-blog-page .wac-blog-archive-more:disabled {
    cursor: default;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.38);
    color: rgba(255, 255, 255, 0.9);
}

.wac-blog-page .wac-blog-archive-spinner {
    width: 1rem;
    height: 1rem;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-top-color: currentColor;
    border-radius: 999px;
    animation: wac-blog-archive-spin 0.78s linear infinite;
}

@keyframes wac-blog-archive-spin {
    to {
        transform: rotate(360deg);
    }
}

.wac-blog-page .wac-blog-search-dialog[hidden] {
    display: none;
}

.wac-blog-page .wac-blog-search-dialog {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: start center;
    padding: clamp(10.5rem, 26vh, 15rem) 1rem 1rem;
    opacity: 0;
    pointer-events: none;
    overscroll-behavior: contain;
    transition: opacity 0.18s ease;
}

.wac-blog-page .wac-blog-search-dialog.is-open {
    opacity: 1;
    pointer-events: auto;
}

.wac-blog-page .wac-blog-search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
}

.wac-blog-page .wac-blog-search-panel {
    position: relative;
    width: min(620px, 100%);
    max-height: min(480px, calc(100vh - 8.5rem));
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(244, 244, 245, 0.12);
    border-radius: 10px;
    background: rgba(9, 9, 11, 0.98);
    color: #f4f4f5;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
    opacity: 0;
    overflow: hidden;
    transform: translateY(-8px) scale(0.985);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.wac-blog-page .wac-blog-search-dialog.is-open .wac-blog-search-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .wac-blog-page .wac-blog-search-dialog,
    .wac-blog-page .wac-blog-search-panel {
        transition: none;
    }

    .wac-blog-page .wac-blog-search-panel {
        transform: none;
    }
}

.wac-blog-page .wac-blog-search-head {
    position: absolute;
}

.wac-blog-page .wac-blog-search-head h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.wac-blog-page .wac-blog-search-input-wrap {
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 0.72rem;
    padding: 0 0.95rem;
    border-bottom: 1px solid rgba(244, 244, 245, 0.1);
}

.wac-blog-page .wac-blog-search-input-icon {
    width: 1.12rem;
    height: 1.12rem;
    flex: 0 0 auto;
    fill: none;
    stroke: rgba(244, 244, 245, 0.42);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wac-blog-page .wac-blog-search-input {
    width: 100%;
    min-width: 0;
    min-height: 64px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f4f4f5;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.wac-blog-page .wac-blog-search-input::placeholder {
    color: rgba(244, 244, 245, 0.42);
}

.wac-blog-page .wac-blog-search-input::-webkit-search-cancel-button,
.wac-blog-page .wac-blog-search-input::-webkit-search-decoration,
.wac-blog-page .wac-blog-search-input::-webkit-search-results-button,
.wac-blog-page .wac-blog-search-input::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}

.wac-blog-page .wac-blog-search-list {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0.55rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 244, 245, 0.22) transparent;
}

.wac-blog-page .wac-blog-search-list::-webkit-scrollbar {
    width: 8px;
}

.wac-blog-page .wac-blog-search-list::-webkit-scrollbar-track {
    background: transparent;
}

.wac-blog-page .wac-blog-search-list::-webkit-scrollbar-thumb {
    border: 2px solid rgba(9, 9, 11, 0.98);
    border-radius: 999px;
    background: rgba(244, 244, 245, 0.22);
}

.wac-blog-page .wac-blog-search-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wac-blog-page .wac-blog-search-results li {
    margin: 0;
    padding: 0;
}

.wac-blog-page .wac-blog-search-results a {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 0.72rem;
    padding: 0.68rem 0.72rem;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    outline: none;
}

.wac-blog-page .wac-blog-search-results a:hover,
.wac-blog-page .wac-blog-search-results a:focus-visible,
.wac-blog-page .wac-blog-search-results a.is-selected {
    background: rgba(39, 39, 42, 0.86);
}

.wac-blog-page .wac-blog-search-result-arrow {
    width: 0.8rem;
    flex: 0 0 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.22s ease;
}

.wac-blog-page .wac-blog-search-result-arrow-svg {
    display: block;
    width: 11px;
    height: 11px;
}

.wac-blog-page .wac-blog-search-results a:hover .wac-blog-search-result-arrow,
.wac-blog-page .wac-blog-search-results a:focus-visible .wac-blog-search-result-arrow,
.wac-blog-page .wac-blog-search-results a.is-selected .wac-blog-search-result-arrow {
    opacity: 1;
    transform: translate3d(2px, 0, 0);
    color: rgba(255, 255, 255, 0.68);
}

.wac-blog-page .wac-blog-search-result-title {
    min-width: 0;
    color: rgba(244, 244, 245, 0.92);
    font-size: 0.94rem;
    font-weight: 560;
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .wac-blog-page .wac-blog-search-result-arrow {
        transform: none;
        transition: opacity 0.15s ease, color 0.15s ease;
    }

    .wac-blog-page .wac-blog-search-results a:hover .wac-blog-search-result-arrow,
    .wac-blog-page .wac-blog-search-results a:focus-visible .wac-blog-search-result-arrow,
    .wac-blog-page .wac-blog-search-results a.is-selected .wac-blog-search-result-arrow {
        transform: none;
    }
}

.wac-blog-page .wac-blog-search-empty {
    margin: 0;
    padding: 2rem 0.75rem;
    text-align: center;
    color: rgba(244, 244, 245, 0.5);
    font-size: 0.9rem;
}

.wac-blog-page .wac-blog-archive-group {
    min-width: 0;
}

.wac-blog-page .wac-blog-archive-group h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    line-height: 1.3;
}

.wac-blog-page .wac-blog-archive-group p {
    margin-bottom: 0.6rem;
    font-size: 0.88rem;
}

.wac-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wac-related-list li {
    padding: 0.74rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.wac-related-list li:last-child {
    border-bottom: 0;
}

.wac-related-link {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
}

.wac-related-link:hover,
.wac-related-link:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.wac-related-list span {
    display: block;
    max-width: 62ch;
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.9rem;
    line-height: 1.5;
}

.wac-related-support {
    background: rgba(255, 255, 255, 0.018);
}

.wac-blog-page .wac-related-reading {
    max-width: 38rem;
    margin: 0 auto 2.5rem;
    padding-top: 1.45rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-blog-page .wac-related-reading h2 {
    margin: 0 0 0.45rem;
    font-size: clamp(1.18rem, 2vw, 1.45rem);
}

@media (max-width: 767.98px) {
    .wac-blog-page .wac-blog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .wac-blog-page .wac-blog-actions {
        justify-content: flex-start;
        margin-left: 0;
        width: 100%;
    }

    .wac-blog-page .wac-blog-search-trigger {
        flex: 1 1 auto;
        width: auto;
    }

    .wac-blog-page .wac-blog-archive-groups {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.2rem;
    }

    .wac-blog-page .wac-blog-archive-list .wac-blog-archive-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.28rem;
        padding: 1.28rem 0.2rem;
    }

    .wac-blog-page .wac-blog-archive-list .wac-blog-archive-meta {
        text-align: left;
        white-space: normal;
    }

    .wac-blog-page .wac-blog-search-dialog {
        place-items: start stretch;
        padding-top: 9rem;
    }

    .wac-blog-page .wac-blog-search-panel {
        max-height: min(500px, calc(100vh - 6.6rem));
    }

}

.wac-blog-page main article.tools-inner {
    max-width: 38rem;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    width: 100%;
}

.wac-blog-page .wac-blog-feature {
    margin: 0 0 0.85rem;
    padding: 0;
    border-radius: var(--wac-blog-media-radius);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.025);
    max-width: 100%;
}

.wac-blog-page .wac-blog-feature img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    box-sizing: border-box;
    border: var(--wac-blog-media-border);
    border-radius: inherit;
}

.wac-blog-page .wac-blog-article-head {
    padding: clamp(0.5rem, 1.5vw, 1rem) 0 0;
    text-align: start;
}

.wac-blog-page .wac-blog-article-kicker {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--wac-blog-prose-muted);
    margin: 0 0 0.65rem;
    max-width: var(--wac-blog-content-max);
    text-align: start;
}

.wac-blog-page .wac-blog-article-kicker a.wac-blog-article-kicker-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
    transition: color 0.15s ease;
}

.wac-blog-page .wac-blog-article-kicker a.wac-blog-article-kicker-link:hover {
    color: rgba(255, 255, 255, 0.88);
}

.wac-blog-page .wac-blog-article-kicker-sep {
    margin: 0 0.2em;
    user-select: none;
    opacity: 0.55;
}

.wac-blog-page .wac-blog-article-head h1 {
    font-family: var(--font-blog-display);
    font-size: clamp(2.1rem, 5vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.1;
    margin: 0 0 1.3rem;
    max-width: var(--wac-blog-content-max);
    color: #f2f2f3;
    text-align: start;
}

.wac-blog-page .wac-blog-article-byline {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin: 0 0 2rem;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--wac-blog-prose-muted);
}

.wac-blog-page .wac-blog-article-byline-inner {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.35em;
    text-align: start;
}

.wac-blog-page .wac-blog-article-byline-dot {
    color: inherit;
    opacity: 0.55;
    user-select: none;
}

.wac-blog-page .wac-blog-article-author,
.wac-blog-page .wac-blog-article-date,
.wac-blog-page time.wac-blog-article-date {
    font-weight: 500;
    color: inherit;
    -webkit-text-fill-color: currentColor;
    min-width: 0;
}

/* ── Linear-style article prose ── */
.wac-blog-page .wac-blog-prose {
    padding: 0 0 2.5rem;
    max-width: 38rem;
    margin: 0 auto;
    font-family: var(--font-primary);
    font-size: clamp(1.08rem, 0.4vw + 1.02rem, 1.2rem);
    line-height: 1.68;
    letter-spacing: -0.011em;
    color: var(--wac-blog-prose-text);
    text-align: start;
    font-weight: 400;
    word-break: break-word;
    overflow-wrap: break-word;
}

.wac-blog-page .wac-blog-prose > *:first-child {
    margin-top: 0;
}

.wac-blog-page .wac-blog-prose > *:last-child {
    margin-bottom: 0;
}

/* ── Headings ── */
.wac-blog-page .wac-blog-prose h1,
.wac-blog-page .wac-blog-prose h2,
.wac-blog-page .wac-blog-prose h3,
.wac-blog-page .wac-blog-prose h4 {
    font-family: var(--font-blog-display);
    color: var(--wac-blog-prose-heading);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.22;
}

.wac-blog-page .wac-blog-prose h1 {
    font-size: clamp(1.45rem, 3vw, 1.85rem);
    margin: 2.25rem 0 0.85rem;
}

.wac-blog-page .wac-blog-prose h2 {
    font-size: clamp(1.22rem, 2.4vw, 1.45rem);
    margin: 2.35rem 0 0.75rem;
}

.wac-blog-page .wac-blog-prose h3 {
    font-size: clamp(1.05rem, 1.8vw, 1.18rem);
    margin: 1.85rem 0 0.55rem;
}

.wac-blog-page .wac-blog-prose h4 {
    font-size: 1rem;
    margin: 1.5rem 0 0.45rem;
    color: rgba(255, 255, 255, 0.86);
}

/* ── Paragraphs ── */
.wac-blog-page .wac-blog-prose p {
    margin: 0 0 1.35rem;
}

/* ── Links ── */
.wac-blog-page .wac-blog-prose a {
    color: rgba(200, 210, 255, 0.95);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(200, 210, 255, 0.35);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.wac-blog-page .wac-blog-prose a:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.45);
}

/* ── Strong / emphasis ── */
.wac-blog-page .wac-blog-prose strong,
.wac-blog-page .wac-blog-prose b {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.wac-blog-page .wac-blog-prose em,
.wac-blog-page .wac-blog-prose i {
    color: rgba(255, 255, 255, 0.68);
}

/* ── Lists ── */
.wac-blog-page .wac-blog-prose ul,
.wac-blog-page .wac-blog-prose ol {
    margin: 0 0 1.35rem;
    padding-left: 1.35rem;
}

.wac-blog-page .wac-blog-prose li {
    margin: 0.4em 0;
}

.wac-blog-page .wac-blog-prose li::marker {
    color: rgba(255, 255, 255, 0.35);
}

.wac-blog-page .wac-blog-prose li > ul,
.wac-blog-page .wac-blog-prose li > ol {
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
}

/* ── Images & media ── */
.wac-blog-page .wac-blog-prose img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin: 1.5rem 0;
    display: block;
}

/* ── Figure ── */
.wac-blog-page .wac-blog-prose figure {
    margin: 1.75rem 0;
}

.wac-blog-page .wac-blog-prose figure img {
    margin: 0 0 0.5rem;
}

.wac-blog-page .wac-blog-prose figcaption {
    font-size: 0.8125rem;
    color: var(--wac-blog-prose-muted);
    text-align: center;
    line-height: 1.5;
}

/* ── Blockquote ── */
.wac-blog-page .wac-blog-prose blockquote {
    border-left: 2px solid rgba(255, 255, 255, 0.14);
    margin: 1.5rem 0;
    padding: 0.15rem 0 0.15rem 1.1rem;
    color: var(--wac-blog-prose-muted);
    font-size: 0.97em;
}

.wac-blog-page .wac-blog-prose blockquote p:last-child {
    margin-bottom: 0;
}

/* ── Horizontal rule ── */
.wac-blog-page .wac-blog-prose hr {
    border: 0;
    height: 1px;
    margin: 2rem 0;
    background: rgba(255, 255, 255, 0.1);
}

/* ── Code ── */
.wac-blog-page .wac-blog-prose code {
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
    font-size: 0.88em;
    padding: 0.12em 0.38em;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
}

.wac-blog-page .wac-blog-prose pre {
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
    font-size: 0.84rem;
    line-height: 1.55;
    margin: 1.25rem 0 1.5rem;
    padding: 1rem 1.1rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    color: rgba(255, 255, 255, 0.82);
}

.wac-blog-page .wac-blog-prose pre code {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: inherit;
}

/* ── Table ── */
.wac-blog-page .wac-blog-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
}

.wac-blog-page .wac-blog-prose th,
.wac-blog-page .wac-blog-prose td {
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.625rem 0.875rem;
    text-align: left;
}

.wac-blog-page .wac-blog-prose th {
    color: var(--wac-blog-prose-heading);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.03);
}

/* ── Mobile-friendly tables ──
   Article tables are baked/injected bare (no wrapper) and were width:100% with no
   overflow handling, so multi-column tables squished on phones. Each table is wrapped
   in .wac-blog-table-scroll (server-side by prerender_blog, client-side by the CSR
   fallback JS) so wide tables scroll horizontally instead of crushing the text.
   Per-cell min-width makes scroll proportional to column count: a 2-col table (~15rem)
   fits a phone; a 5-col table (~37.5rem) scrolls. Desktop is unaffected. */
.wac-blog-page .wac-blog-prose .wac-blog-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 1.5rem 0;
}

.wac-blog-page .wac-blog-prose .wac-blog-table-scroll table {
    margin: 0;
}

.wac-blog-page .wac-blog-prose .wac-blog-table-scroll th,
.wac-blog-page .wac-blog-prose .wac-blog-table-scroll td {
    min-width: 7.5rem;
}

/* ── Video / iframe embeds ── */
.wac-blog-page .wac-blog-prose iframe,
.wac-blog-page .wac-blog-prose video {
    max-width: 100%;
    border-radius: 10px;
    margin: 1.5rem 0;
    display: block;
}

.wac-blog-page #wac-post-status.wac-blog-status {
    padding: 1rem 0 1.15rem;
    max-width: var(--wac-blog-content-max);
    margin: 0 auto;
}

.wac-blog-page footer.site-footer.site-footer--modern .site-footer-inner {
    padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
    padding-bottom: clamp(0.9rem, 1.8vw, 1.25rem);
    padding-left: 3rem;
    padding-right: 3rem;
}

.form-container {
    background-color: transparent;
    border-radius: 20px;
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.form-container h2 {
    color: var(--color-white);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    color: #8f8f8f;
}

.form-control {
    height: 50px;
    border: 1px solid #262626;
    border-radius: 4px;
    background-color: #0a0a0a;
    color: #e0e0e0;
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--color-accent);
    background-color: #0a0a0a;
}

textarea.form-control {
    height: 150px;
}

p {
    color: #9a9a9a;
}

@media (max-width: 992px) {
    .hero h1 {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    :root {
        --wac-tools-rail-gap: 1.65rem;
    }

    .hero {
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        padding-top: clamp(5.5rem, 20vw, 8.5rem);
        padding-bottom: 0;
        text-align: left;
    }

    .hero-content {
        position: relative;
        top: auto;
        left: 0;
        right: auto;
        transform: none;
        width: 100%;
        max-width: none;
        margin: 0;
        align-items: flex-start;
        text-align: left;
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }

    .section {
        padding: 3rem 0;
    }
    
    .hero h1 {
        font-size: 2.2rem;
        text-align: left;
    }

    .hero .hero-subtitle {
        text-align: left;
        font-size: clamp(0.93rem, 3.25vw, 1.05rem);
        font-weight: 400;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.56);
        text-shadow: none;
        margin-bottom: var(--wac-tools-rail-gap);
    }
    
    .explore-text {
        font-size: 0.8rem;
        bottom: 8%;
    }

    .arrow-down {
        bottom: 13vh;
    }
}

@media (max-width: 576px) {
    .hero {
        padding-top: clamp(5.25rem, 22vw, 7.5rem);
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero .hero-subtitle {
        font-size: clamp(0.9rem, 3.5vw, 1rem);
    }
    
    .form-container {
        padding: 1.5rem;
    }

    .explore-text {
        font-size: 0.7rem;
        bottom: 7%;
    }

    .arrow-down {
        bottom: 12vh;
        font-size: 0.7rem;
    }
}

.btn-get-started,
.btn-get-started:hover,
.btn-get-started:focus,
.btn-get-started:active {
    background-color: #ffffff !important;
    color: var(--color-canvas) !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

footer.site-footer.site-footer--modern {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    border-top: none;
    background: var(--color-canvas);
    backdrop-filter: none;
    color: rgba(255, 255, 255, 0.34);
}

.site-footer--modern .site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(1.8rem, 3vw, 2.25rem) 2rem clamp(1.35rem, 2.4vw, 1.75rem);
}

.site-footer--modern .site-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    /* Nav + contact columns top-aligned (headers in one line); the brand
       block is vertically centered against this column band (see
       --brand below) so its two short lines don't look stranded at top. */
    align-items: start;
    padding-bottom: clamp(1.5rem, 2.6vw, 2rem);
    border-bottom: 0;
}

.site-footer--modern .site-footer-col {
    min-width: 0;
}

.site-footer--modern .site-footer-col--brand {
    /* Center the brand block against the column band (top of the
       Navigate/Contact headers down to the divider above the copyright),
       not the viewport - so the two short lines sit visually balanced. */
    align-self: center;
}

.site-footer--modern .site-footer-grid > nav.site-footer-col {
    /* Center the whole Navigate block in its cell so it sits midway
       between the brand and contact columns, not glued to the left. */
    justify-self: center;
}

.site-footer--modern .site-footer-grid > nav.site-footer-col .site-footer-label {
    text-align: center;
}

.site-footer--modern .site-footer-brand {
    display: inline-block;
    font-family: 'Manrope', sans-serif;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #d8d8d8;
    text-decoration: none;
    margin-bottom: 0.45rem;
    line-height: 1.2;
}

.site-footer--modern .site-footer-desc {
    margin: 0;
    max-width: 32ch;
    font-family: 'Manrope', sans-serif;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.3);
}

.site-footer--modern .site-footer-label {
    margin: 0 0 0.9rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

.site-footer--modern .site-footer-links {
    /* Two TIGHT columns (sized to content, sitting close together) -
       compact, so neither the over-tall single column nor the old
       full-width 2-col spread. */
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 2.5rem;
    row-gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer--modern .site-footer-links li {
    margin-bottom: 0;
}

.site-footer--modern .site-footer-links a {
    font-family: 'Manrope', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 0.04rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.site-footer--modern .site-footer-links a:hover {
    color: #c4c4c4;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.site-footer--modern .site-footer-mail {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    margin-bottom: 0;
    transition: color 0.15s ease;
}

.site-footer--modern .site-footer-mail--second {
    margin-top: 0.7rem;
}

.site-footer--modern .site-footer-mail:hover {
    color: #b8b8b8;
}

.site-footer--modern .site-footer-mail-note {
    display: block;
    margin-top: 0.14rem;
    font-size: 0.72rem;
    line-height: 1.3;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.28);
    white-space: normal;
}

.site-footer--modern [aria-labelledby="footer-contact-label"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.site-footer--modern .site-footer-social {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    margin-top: 1rem;
}

.site-footer--modern .site-footer-social-link {
    --site-footer-social-icon-size: 1.3rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    color: rgba(255, 255, 255, 0.38);
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-footer--modern .site-footer-social-link:hover {
    color: rgba(255, 255, 255, 0.78);
}

.site-footer--modern .site-footer-social-icon {
    /* One uniform system for every brand mark: official Simple Icons
       glyphs, all viewBox 0 0 24 24, solid fill, identical size. No
       per-icon size/stroke tuning - that mismatch is exactly what made
       them look "one bigger, one smaller" before. */
    display: block;
    width: var(--site-footer-social-icon-size);
    height: var(--site-footer-social-icon-size);
    fill: currentColor;
}

.site-footer--modern .site-footer-social-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-footer--modern .site-footer-meta {
    margin-top: clamp(1.5rem, 2.6vw, 1.9rem);
    padding-top: clamp(1.1rem, 2vw, 1.4rem);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
}

.site-footer--modern .site-footer-meta p {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.22);
}

.site-footer--modern .site-footer-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 0.45rem;
    row-gap: 0.15rem;
}

.site-footer--modern .site-footer-meta-row > p {
    margin: 0;
}

.site-footer--modern .site-footer-meta-dot {
    color: rgba(255, 255, 255, 0.16);
    font-size: 0.78rem;
    line-height: 1;
    user-select: none;
}

.site-footer--modern .site-footer-cc {
    position: relative;
    margin: 0;
    max-width: none;
    display: inline-block;
    vertical-align: baseline;
}

.site-footer--modern .site-footer-cc[open] {
    z-index: 15;
}

.site-footer--modern .site-footer-cc summary {
    list-style: none;
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.18);
    cursor: pointer;
}

.site-footer--modern .site-footer-cc summary::-webkit-details-marker {
    display: none;
}

.site-footer--modern .site-footer-cc summary:hover {
    color: rgba(255, 255, 255, 0.26);
}

.site-footer--modern .site-footer-cc .site-footer-cc-body {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.55rem);
    width: min(20rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.45rem 0.65rem;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.45rem;
    background: rgba(9, 9, 9, 0.96);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
    font-family: 'Manrope', sans-serif;
    font-size: 0.64rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.22);
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
}

.site-footer--modern .site-footer-cc .site-footer-cc-body::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.38rem;
    width: 0.7rem;
    height: 0.7rem;
    transform: translateX(-50%) rotate(45deg);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(9, 9, 9, 0.96);
}

.site-footer--modern .site-footer-cc .site-footer-cc-body a {
    color: rgba(255, 255, 255, 0.34);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer--modern .site-footer-cc .site-footer-cc-body a:hover {
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 768px) {
    .site-footer--modern .site-footer-inner {
        padding: 1.35rem 1rem 1.15rem;
    }

    .site-footer--modern .site-footer-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-bottom: 1rem;
    }

    .site-footer--modern .site-footer-col--brand {
        align-self: start;
        padding-top: 0;
        transform: none;
    }

    .site-footer--modern .site-footer-grid > nav.site-footer-col {
        justify-self: stretch;
        width: auto;
        transform: none;
    }

    .site-footer--modern .site-footer-grid > nav.site-footer-col .site-footer-label {
        text-align: left;
    }

    .site-footer--modern .site-footer-label {
        font-size: 0.68rem;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.24);
    }

    .site-footer--modern .site-footer-desc {
        max-width: none;
    }

    .site-footer--modern .site-footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
    }

    .site-footer--modern .site-footer-mail-note {
        margin-bottom: 0.2rem;
    }

    .site-footer--modern .site-footer-social {
        margin-top: 0.85rem;
    }

    .site-footer--modern .site-footer-meta {
        text-align: left;
    }

    .site-footer--modern .site-footer-meta-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;
        justify-content: flex-start;
        column-gap: 0.42rem;
        row-gap: 0;
    }

    .site-footer--modern .site-footer-meta-row > p,
    .site-footer--modern .site-footer-cc summary {
        white-space: nowrap;
    }

    .site-footer--modern .site-footer-meta-dot {
        display: inline;
    }

    .site-footer--modern .site-footer-cc {
        width: auto;
        flex: 0 0 auto;
    }

    .site-footer--modern .site-footer-cc .site-footer-cc-body {
        left: auto;
        right: 0;
        width: min(15.5rem, calc(100vw - 2rem));
        padding: 0.45rem 0.6rem;
        font-size: 0.64rem;
        line-height: 1.25;
        white-space: nowrap;
        transform: none;
    }

    .site-footer--modern .site-footer-cc .site-footer-cc-body::after {
        left: auto;
        right: 2.2rem;
        transform: rotate(45deg);
    }
}

@media (max-width: 991.98px) {
    .wac-blog-page main.wac-blog-main {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .wac-blog-page .wac-blog-hero,
    .wac-blog-page .wac-blog-list {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .wac-blog-page .wac-blog-hero {
        padding-top: 0.35rem;
        padding-bottom: 0.5rem;
    }
    .wac-blog-page .wac-blog-footer-rule {
        padding-top: 0.35rem;
        padding-bottom: 0;
    }
    .wac-blog-page footer.site-footer.site-footer--modern .site-footer-inner {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Legal pages (Privacy / Terms): wider reading column than the blog's 32rem. */
.wac-legal-page main article.tools-inner,
.wac-legal-page .wac-blog-prose,
.wac-legal-page .wac-blog-article-head h1,
.wac-legal-page .wac-blog-article-kicker {
    max-width: 46rem;
}
.wac-legal-page .wac-blog-prose h2 {
    margin-top: 2rem;
    margin-bottom: 0.6rem;
}
.wac-legal-page .wac-blog-prose ul {
    padding-left: 1.25rem;
}

/* Static SEO/GEO content pages: services, resources, deliverables, and location/case-study holding pages. */
.wac-content-page {
    --wac-page-shell-max: 1050px;
    --wac-page-shell-padding: calc(1.35rem + 15px);
    /* Hub/landing content measure. Deliberately wider than the blog prose column
       (38rem) so service and resource pages read as broad landing pages, and so
       body text lines up with the full-width tables instead of hugging the left
       of the 1050px shell. Tune width here; all section text references it. */
    --wac-page-prose-max: 60rem;
}

.wac-content-page .wac-page-main {
    width: 100%;
    max-width: var(--wac-page-shell-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wac-page-shell-padding);
    padding-right: var(--wac-page-shell-padding);
    box-sizing: border-box;
    text-align: start;
}

.wac-content-page .wac-page-shell {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* Backward-compatible guard if an older generated content page still uses the blog shell. */
.wac-content-page main.wac-blog-main {
    max-width: var(--wac-page-shell-max);
}

.wac-content-page main.wac-blog-main article.tools-inner {
    max-width: 100%;
}

.wac-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.38);
}

.wac-breadcrumbs a {
    color: rgba(255, 255, 255, 0.58);
    text-decoration: none;
}

.wac-breadcrumbs a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.wac-breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 0.35rem;
    color: rgba(255, 255, 255, 0.24);
}

.wac-page-hero {
    max-width: var(--wac-page-prose-max, 50rem);
    padding: clamp(0.5rem, 1.5vw, 1rem) 0 clamp(1.75rem, 4vw, 2.75rem);
}

.wac-page-hero h1 {
    font-family: var(--font-blog-display);
    max-width: 18ch;
    margin: 0 0 1rem;
    font-size: clamp(2.4rem, 6vw, 4.1rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: #f4f4f5;
}

.wac-page-lede {
    max-width: var(--wac-page-prose-max, 50rem);
    margin: 0;
    font-size: clamp(1.05rem, 1.2vw, 1.2rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.66);
}

.wac-section-label {
    margin: 0 0 0.55rem;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wac-section {
    padding: clamp(1.8rem, 4vw, 3rem) 0;
}

.wac-section + .wac-section {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-section h2 {
    max-width: var(--wac-page-prose-max);
    margin: 0 0 1rem;
    font-family: var(--font-blog-display);
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    line-height: 1.14;
    letter-spacing: -0.035em;
    color: #f1f1f2;
}

.wac-section h3 {
    margin: 0 0 0.55rem;
    font-size: 1rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.9);
}

.wac-section p,
.wac-section li {
    color: rgba(255, 255, 255, 0.56);
}

.wac-section p {
    max-width: var(--wac-page-prose-max);
}

.wac-section-split {
    display: grid;
    grid-template-columns: minmax(16rem, 0.34fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 5vw, 4.5rem);
    align-items: start;
}

.wac-section-split > div:first-child p {
    margin-bottom: 0;
}

.wac-section-intro {
    max-width: var(--wac-page-prose-max);
    margin-bottom: clamp(1rem, 2.4vw, 1.6rem);
}

.wac-section-intro p {
    margin-bottom: 0;
}

.wac-resource-hero {
    padding-bottom: clamp(1.25rem, 3vw, 2rem);
}

.wac-resource-jump {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.65rem;
    row-gap: 0.6rem;
    margin-top: 1.35rem;
}

.wac-resource-jump a,
.wac-inline-action {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}

.wac-resource-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.84rem;
    background: rgba(255, 255, 255, 0.025);
}

.wac-resource-jump a:hover,
.wac-resource-jump a:focus-visible,
.wac-inline-action:hover,
.wac-inline-action:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.26);
}

.wac-inline-action {
    display: inline-flex;
    margin-top: 0.35rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.22);
    text-underline-offset: 0.18em;
}

.wac-content-page .wac-section > ul:not(.wac-service-list),
.wac-content-page .wac-section > ol:not(.wac-workflow) {
    max-width: var(--wac-page-prose-max);
}

.wac-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.wac-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wac-info-card {
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.wac-info-card p,
.wac-info-card ul,
.wac-info-card ol {
    margin-bottom: 0;
}

.wac-info-card ul,
.wac-info-card ol {
    padding-left: 1.1rem;
}

.wac-service-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wac-service-list li {
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.wac-service-list li:last-child {
    border-bottom: 0;
}

.wac-service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.wac-service-link:hover {
    color: #fff;
}

.wac-decision-table-wrap {
    min-width: 0;
    overflow-x: auto;
}

.wac-decision-table {
    width: 100%;
    min-width: 42rem;
    border-collapse: collapse;
    color: rgba(255, 255, 255, 0.62);
}

.wac-decision-table th,
.wac-decision-table td {
    padding: 0.9rem 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
    text-align: left;
}

.wac-decision-table th {
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wac-decision-table td:first-child {
    color: rgba(255, 255, 255, 0.86);
    font-weight: 650;
}

.wac-decision-table a,
.wac-topic-rail a,
.wac-editorial-list a,
.wac-resource-feature a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration-color: rgba(255, 255, 255, 0.22);
    text-underline-offset: 0.18em;
}

.wac-decision-table a:hover,
.wac-topic-rail a:hover,
.wac-editorial-list a:hover,
.wac-resource-feature a:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.62);
}

.wac-comparison-rows {
    min-width: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.wac-comparison-head,
.wac-comparison-row {
    display: grid;
    grid-template-columns: minmax(14rem, 0.32fr) minmax(0, 1fr);
    column-gap: clamp(1.4rem, 3.5vw, 3rem);
    row-gap: 0.45rem;
    align-items: start;
}

.wac-comparison-head {
    display: none;
    padding: 0.78rem 0;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-comparison-row {
    min-width: 0;
    padding: 1.1rem 0;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

a.wac-comparison-row {
    transition: border-color 0.16s ease, color 0.16s ease;
}

a.wac-comparison-row:hover,
a.wac-comparison-row:focus-visible {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.wac-comparison-row strong,
.wac-comparison-row span,
.wac-comparison-row em {
    min-width: 0;
    line-height: 1.55;
}

.wac-comparison-row strong {
    grid-row: 1 / span 2;
    color: rgba(255, 255, 255, 0.9);
    font-style: normal;
    font-weight: 700;
}

.wac-comparison-row span {
    grid-column: 2;
    color: rgba(255, 255, 255, 0.7);
}

.wac-comparison-row em {
    grid-column: 2;
    color: rgba(255, 255, 255, 0.5);
    font-style: normal;
}

.wac-deliverables {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.1rem;
}

.wac-deliverable {
    min-width: 0;
    padding: 0.95rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-deliverable strong {
    display: block;
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    line-height: 1.35;
}

.wac-deliverable span {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.84rem;
    line-height: 1.5;
}

.wac-table-wrap {
    width: 100%;
    margin-top: 1rem;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.wac-table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-family: var(--font-blog-body);
    color: rgba(255, 255, 255, 0.62);
}

.wac-table th,
.wac-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
    vertical-align: top;
}

.wac-table th {
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-blog-display);
    font-size: 0.95rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.035);
}

.wac-table tr:last-child td {
    border-bottom: 0;
}

.wac-workflow {
    counter-reset: wac-step;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.wac-workflow li {
    counter-increment: wac-step;
    position: relative;
    padding: 0.95rem 0 0.95rem 2.3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.wac-workflow li::before {
    content: counter(wac-step);
    position: absolute;
    left: 0;
    top: 0.95rem;
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-canvas);
    font-size: 0.75rem;
    font-weight: 800;
}

.wac-workflow li:last-child {
    border-bottom: 0;
}

.wac-process-rail,
.wac-proof-rail,
.wac-topic-rails,
.wac-editorial-list,
.wac-intake-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wac-process-rail {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-process-rail li {
    display: grid;
    grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 2.4rem);
    padding: 1.08rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-process-rail strong,
.wac-proof-rail strong,
.wac-intake-list strong,
.wac-two-column-compare h3,
.wac-topic-rail h3 {
    color: rgba(255, 255, 255, 0.92);
}

.wac-process-rail span,
.wac-proof-rail span,
.wac-intake-list span,
.wac-two-column-compare p,
.wac-two-column-compare li {
    color: rgba(255, 255, 255, 0.54);
}

.wac-proof-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.6rem, 4vw, 3rem);
    row-gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-proof-rail div {
    min-width: 0;
    padding: 1.08rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-proof-rail strong,
.wac-proof-rail span,
.wac-intake-list strong,
.wac-intake-list span {
    display: block;
}

.wac-proof-rail span,
.wac-intake-list span {
    margin-top: 0.35rem;
    line-height: 1.55;
}

.wac-resource-feature-section {
    padding-top: clamp(1rem, 2.5vw, 1.8rem);
}

.wac-resource-feature {
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(18rem, 0.38fr);
    gap: clamp(1rem, 4vw, 2.4rem);
    align-items: start;
    padding: clamp(1.2rem, 3vw, 1.7rem);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.wac-resource-feature h2 {
    max-width: 15ch;
}

.wac-resource-feature-main p:last-of-type {
    margin-bottom: 0.8rem;
}

.wac-resource-start-list,
.wac-resource-feature-meta {
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-resource-start-list a,
.wac-resource-feature-meta div {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.wac-resource-start-list span,
.wac-resource-feature-meta dt {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wac-resource-start-list strong {
    display: block;
    margin-top: 0.28rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.35;
}

.wac-resource-start-list a:hover strong {
    color: #fff;
}

.wac-resource-feature-meta dd {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.72);
}

.wac-resource-questions {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wac-resource-questions a {
    display: grid;
    grid-template-columns: minmax(12rem, 0.36fr) minmax(12rem, 0.28fr) minmax(0, 1fr);
    gap: clamp(0.9rem, 2.2vw, 1.6rem);
    padding: 1rem 0;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-resource-questions a:hover span,
.wac-resource-questions a:hover strong {
    color: #fff;
}

.wac-resource-questions span,
.wac-resource-questions strong,
.wac-resource-questions em {
    min-width: 0;
    line-height: 1.5;
}

.wac-resource-questions span {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}

.wac-resource-questions strong {
    color: rgba(255, 255, 255, 0.7);
}

.wac-resource-questions em {
    color: rgba(255, 255, 255, 0.5);
    font-style: normal;
}

.wac-topic-rails {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.2rem, 3vw, 2.2rem);
    row-gap: 1.4rem;
}

.wac-topic-rail {
    min-width: 0;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wac-topic-rail h3 {
    margin-bottom: 0.55rem;
}

.wac-topic-rail a {
    display: block;
    padding: 0.42rem 0;
    color: rgba(255, 255, 255, 0.66);
}

.wac-editorial-list {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-editorial-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: baseline;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-editorial-list span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.78rem;
    white-space: nowrap;
}

.wac-editorial-list--compact li {
    padding: 0.72rem 0;
}

.wac-two-column-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}

.wac-two-column-compare > div {
    min-width: 0;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wac-two-column-compare ul {
    margin: 0.8rem 0 0;
    padding-left: 1.05rem;
}

.wac-intake-list {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-intake-list li {
    display: grid;
    grid-template-columns: minmax(12rem, 0.3fr) minmax(0, 1fr);
    gap: clamp(1.2rem, 3.5vw, 2.6rem);
    padding: 1.08rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-faq details {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-faq details:first-of-type {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wac-faq summary {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 650;
    letter-spacing: -0.015em;
}

.wac-faq summary::-webkit-details-marker {
    color: rgba(255, 255, 255, 0.32);
}

.wac-faq p {
    margin: 0.75rem 0 0;
}

.wac-page-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.2rem, 3vw, 1.6rem);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.wac-page-cta p {
    margin: 0;
    max-width: 58ch;
}

@media (max-width: 991.98px) {
    .wac-content-page .wac-page-main {
        --wac-page-shell-padding: max(1rem, env(safe-area-inset-left, 0px));
        padding-left: var(--wac-page-shell-padding);
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }

    .wac-grid,
    .wac-grid--two,
    .wac-deliverables,
    .wac-section-split,
    .wac-resource-feature,
    .wac-topic-rails,
    .wac-two-column-compare {
        grid-template-columns: 1fr;
    }

    .wac-process-rail li,
    .wac-intake-list li,
    .wac-editorial-list li,
    .wac-resource-questions a {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .wac-proof-rail {
        grid-template-columns: 1fr;
    }

    .wac-comparison-head {
        display: none;
    }

    .wac-comparison-row {
        display: block;
        padding: 0.95rem 0;
    }

    .wac-comparison-row strong,
    .wac-comparison-row span,
    .wac-comparison-row em {
        display: block;
        grid-column: auto;
        grid-row: auto;
        width: 100%;
    }

    .wac-comparison-row span,
    .wac-comparison-row em {
        margin-top: 0.28rem;
    }

    .wac-page-cta {
        align-items: stretch;
    }

    .wac-page-cta .btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Home page: hero, tools rail, about words, roadmap, quote form.
   (Moved out of index.html inline <style> so this CSS can be cached.)
   ═══════════════════════════════════════════════════════════════ */

model-viewer.hero-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 114%;
    z-index: 0;
    opacity: 0;
    background: #080809;
    --progress-bar-color: transparent;
}

#model-vignette {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        transparent 30%,
        rgba(8, 8, 9, 0.5) 65%,
        rgba(8, 8, 9, 0.92) 100%
    );
}

#hero-poster {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 100;
    pointer-events: none;
    background: #080809;
    transition: opacity 1.5s ease;
}
#hero-poster.hide { opacity: 0; }
.loader-bar-wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1px;
    background: rgba(255,255,255,0.06);
}
.loader-bar {
    height: 100%;
    background: rgba(255,255,255,0.5);
    width: 0%;
    transition: width 0.3s ease;
}
.loader-pct {
    position: absolute;
    top: 1.5rem; right: 2rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.2);
    letter-spacing: 0.05em;
}
.hero { background: transparent !important; }
main { background: transparent !important; }
body { background: #080809; }

.hero-bg-fallback {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 114%;
    z-index: 0;
    pointer-events: none;
    display: none;
    opacity: 1;
    background: radial-gradient(ellipse 85% 65% at 50% 38%, #2a2a2a 0%, #0d0d0d 45%, #080809 100%);
}
html.wac-hero-fallback .hero-bg-fallback { display: block; }
html.wac-hero-fallback model-viewer.hero-bg {
    display: none !important;
}

html.wac-hero-model-deferred .hero-bg-fallback {
    display: block;
}

html.wac-hero-model-ready .hero-bg-fallback {
    display: block;
    opacity: 0;
}

html.wac-hero-mobile-no-model model-viewer.hero-bg {
    display: none !important;
}
html.wac-hero-mobile-no-model .hero-bg-fallback {
    display: block;
}
html.wac-hero-mobile-no-model #model-vignette {
    display: none;
}

@media (max-width: 767.98px) {
    #hero-poster {
        display: none;
    }
}

.tools-section {
    position: relative;
    z-index: 5;
    padding: 5rem 0 0;
}
.tools-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 3rem;
}
.tools-logos {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    margin-bottom: 3.5rem;
    box-sizing: border-box;
}
.tools-logos-track {
    display: contents;
}
.tools-logos-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1.75rem, 5.5vw, 3.5rem);
    box-sizing: border-box;
}
.tools-logos-strip--clone {
    display: none !important;
}
.tool-logo {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    height: clamp(15px, 2.45vw, 25px);
    aspect-ratio: var(--ar);
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.92);
    -webkit-mask-image: var(--logo);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: var(--logo);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    opacity: 0.78;
    transition: opacity 0.2s ease;
}
.tool-logo:hover {
    opacity: 0.95;
}
@media (max-width: 960px) and (min-width: 768px) {
    .tools-logos-strip {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 1.15rem;
        column-gap: clamp(1.5rem, 5vw, 2.85rem);
    }
    .tool-logo {
        height: clamp(15px, 4vw, 21px);
    }
}
@media (max-width: 767.98px) {
    .about-rule-wrap {
        padding: 0.35rem 0;
    }
    .roadmap-section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: -0.5rem;
    }
    .quote-request-inner {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    .quote-request-panel .form-container.linear-quote-card {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-shadow: none !important;
    }
    .linear-quote-divider {
        display: none;
    }
    .quote-request-support {
        display: none !important;
    }
    .quote-request-form {
        display: block !important;
        flex: none !important;
        height: auto !important;
    }
    .linear-quote-footer {
        flex-direction: column-reverse;
        gap: 0.4rem;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .linear-quote-mail-hint {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .hero h1 {
        margin-bottom: 0.75rem;
    }
    .tools-section {
        padding-top: 2.5rem;
        margin-top: 0;
    }
    .tools-inner {
        /* Use clip, not hidden. overflow-x:hidden forces the visible y-axis to
           compute as overflow-y:auto (CSS Overflow spec: when one axis is not
           visible/clip and the other is visible, visible becomes auto). That
           turned this wrapper into a scroll container, and with content ~1px
           taller than the box the marquee + statement could be dragged up/down
           on touch. clip is compatible with visible (no coercion) so y stays
           in-flow and unscrollable; on engines without clip the rule is dropped
           and x reverts to visible, with body{overflow-x:hidden} as a backstop.
           The marquee already clips itself, so the inner never clips x anyway. */
        overflow-x: clip;
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    }
    .tools-logos {
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 2.5rem;
        padding-top: 0;
        box-sizing: border-box;
        contain: paint;
    }
    .tools-statement {
        margin-top: 0;
    }
    .tools-logos-track {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: max-content;
        /* Pin to content width: as a flex child of .tools-logos the track
           would otherwise be shrunk to the viewport, so translateX(-50%)
           shifted only ~half a screen instead of one full strip and the
           marquee stalled/stuttered on phones. */
        flex: 0 0 max-content;
        min-width: max-content;
        animation: wac-tools-marquee 24s linear infinite;
        will-change: transform;
    }
    .tools-logos-strip {
        flex-wrap: nowrap;
        flex-shrink: 0;
        gap: clamp(1.65rem, 6.25vw, 2.85rem);
        padding-right: clamp(1.65rem, 6.25vw, 2.85rem);
    }
    .tools-logos-strip--clone {
        display: flex !important;
    }
    .tool-logo {
        height: clamp(20px, 6.1vw, 34px);
        flex: 0 0 auto;
        max-width: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .tools-logos-track {
        animation: none !important;
    }
}
@keyframes wac-tools-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.tools-statement {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    line-height: 1.25;
    letter-spacing: -0.04em;
    margin: 0;
    color: rgba(255,255,255,0.38);
}
.tools-statement strong {
    color: #fff;
    font-weight: 800;
}

.about-words-section {
    position: relative;
    z-index: 5;
    padding: 0;
}
.about-words-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.85rem, 3.8vw, 2.85rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.12;
    color: #fff;
    margin: 0 0 1.75rem;
    max-width: 20ch;
}
.about-words-body {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1rem, 1.35vw, 1.12rem);
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.44);
    max-width: 52ch;
}
.about-words-body p {
    margin: 0 0 1.15rem;
}
.about-words-body p:last-child {
    margin-bottom: 0;
}

.quote-section {
    position: relative;
    z-index: 5;
}

.roadmap-section {
    position: relative;
    z-index: 5;
    padding: clamp(0.5rem, 1.5vw, 1rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
.roadmap-inner > .about-words-title.roadmap-heading {
    margin-bottom: 0.65rem;
    max-width: none;
}
.roadmap-heading-line {
    display: block;
}
.roadmap-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.roadmap-intro {
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 1.75rem;
    max-width: 52ch;
}
.roadmap-split {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(2rem, 5vw, 3.75rem);
    align-items: start;
}
.roadmap-track {
    position: relative;
    --roadmap-point: 11px;
    --roadmap-bar-h: 3px;
    --roadmap-fill: 0;
    --roadmap-bar-top: calc(
        0.15rem + 0.82rem + 0.4rem + (var(--roadmap-point) / 2) - (var(--roadmap-bar-h) / 2)
    );
    padding-top: 0.15rem;
}
.roadmap-bar-stack {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--roadmap-bar-top);
    height: var(--roadmap-bar-h);
    border-radius: 999px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.roadmap-bar-base {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.09) 50%,
        rgba(255, 255, 255, 0.04)
    );
}
.roadmap-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    border-radius: inherit;
    transform-origin: left center;
    transform: scaleX(var(--roadmap-fill, 0));
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.35),
        rgba(255, 255, 255, 0.82) 45%,
        rgba(255, 255, 255, 0.55) 100%
    );
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.12);
}
.roadmap-stages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
}
.roadmap-milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
    position: relative;
    z-index: 1;
}
.roadmap-num {
    font-family: 'Manrope', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.roadmap-point {
    width: var(--roadmap-point);
    height: var(--roadmap-point);
    border-radius: 50%;
    flex-shrink: 0;
    background: #fff;
    box-shadow:
        0 0 0 2px rgba(10, 10, 10, 0.95),
        0 0 0 3px rgba(255, 255, 255, 0.12);
}
.roadmap-stage {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    text-align: center;
    padding: 0 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}
.roadmap-num,
.roadmap-point,
.roadmap-stage strong,
.roadmap-stage-desc {
    transition:
        color 0.75s ease,
        opacity 0.75s ease,
        background 0.75s ease,
        box-shadow 0.75s ease;
}
.roadmap-stage:not(.roadmap-stage--lit) .roadmap-num {
    color: rgba(255, 255, 255, 0.22);
}
.roadmap-stage:not(.roadmap-stage--lit) .roadmap-point {
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        0 0 0 2px rgba(10, 10, 10, 0.95),
        0 0 0 3px rgba(255, 255, 255, 0.05);
}
.roadmap-stage:not(.roadmap-stage--lit) strong {
    color: rgba(255, 255, 255, 0.32);
}
.roadmap-stage:not(.roadmap-stage--lit) .roadmap-stage-desc {
    color: rgba(255, 255, 255, 0.22);
}
.roadmap-stage strong {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(0.8rem, 1.05vw, 0.92rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.roadmap-stage-desc {
    display: block;
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.4);
}
.roadmap-copy {
    min-width: 0;
}
.roadmap-copy .about-words-body {
    max-width: none;
}

.quote-request-section {
    position: relative;
    z-index: 5;
}

.quote-request-section > .about-rule-wrap:last-of-type {
    padding-bottom: 0;
}
.quote-request-inner {
    padding: clamp(2rem, 4vw, 3rem) 0;
}
.quote-request-layout {
    display: grid;
    grid-template-columns: minmax(300px, min(30rem, 100%)) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}
.quote-request-intro {
    width: 100%;
    max-width: 48ch;
}
.quote-request-panel {
    position: relative;
}
@media (min-width: 769px) {
    .quote-request-panel {
        grid-column: 1;
        grid-row: 1;
    }
    .quote-request-intro {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        justify-self: end;
    }
}
.quote-request-intro .quote-request-statement {
    margin: 0;
    text-wrap: balance;
}
.quote-request-support {
    margin-top: clamp(2.35rem, 5vw, 3.35rem);
    padding-top: clamp(2rem, 4vw, 2.85rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.quote-request-support-title {
    font-family: 'Manrope', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 0.85rem;
}
.quote-request-support-text {
    font-family: 'Manrope', sans-serif;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.42);
    margin: 0 0 0.55rem;
}
.quote-request-support-email {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
}
.quote-request-support-email a {
    color: rgba(255, 255, 255, 0.58);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.quote-request-support-email a:hover {
    color: rgba(255, 255, 255, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.38);
}

.quote-request-panel .form-container.linear-quote-card {
    margin-top: 0;
    padding: clamp(1.05rem, 2.2vw, 1.35rem) clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2vw, 1.2rem);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #080809;
    box-shadow: none;
}
.linear-quote-heading {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 0.65rem;
    line-height: 1.3;
}
.linear-quote-divider {
    border: 0;
    height: 1px;
    margin: 0 0 0.85rem;
    background: rgba(255, 255, 255, 0.1);
}
.quote-request-section .form-group {
    margin-bottom: 0.78rem;
}
.quote-request-section .form-group:last-of-type {
    margin-bottom: 0.45rem;
}
.quote-request-section .form-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.45);
}
.quote-request-section .form-control {
    height: auto;
    min-height: 2.45rem;
    padding: 0.48rem 0.65rem;
    font-size: 0.82rem;
    line-height: 1.45;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0c0c0c;
    color: rgba(255, 255, 255, 0.92);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.quote-request-section .form-control::placeholder {
    color: rgba(255, 255, 255, 0.28);
}
.quote-request-section .form-control:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: #111;
}
.quote-request-section .form-control:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.22);
    background: #141414;
    box-shadow: none;
}
.quote-request-section .form-control:focus-visible {
    outline: none;
}
.quote-request-section textarea.form-control {
    min-height: 5.1rem;
    height: auto;
    padding-top: 0.58rem;
    resize: vertical;
}
.wac-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 0.65rem;
}
.wac-form-grid--single {
    grid-template-columns: minmax(0, 1fr);
}
.wac-fieldset-legend {
    display: block;
    width: 100%;
    margin-bottom: 0.24rem;
}
.wac-field-hint {
    margin: -0.1rem 0 0.42rem;
    color: rgba(255, 255, 255, 0.38);
    font-family: 'Manrope', sans-serif;
    font-size: 0.7rem;
    line-height: 1.35;
}
.wac-deliverable-options {
    border: 0;
    padding: 0;
    margin: 0 0 0.78rem;
}
.wac-check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.38rem;
}
.wac-check-option {
    display: flex;
    align-items: flex-start;
    gap: 0.38rem;
    min-height: 2.1rem;
    padding: 0.42rem 0.48rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: #0c0c0c;
    color: rgba(255, 255, 255, 0.76);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(0.67rem, 0.78vw, 0.74rem);
    line-height: 1.2;
}
.wac-check-option input {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-top: 1px;
    accent-color: #f4f4ee;
}
.linear-quote-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem 1rem;
    padding-top: 0;
}
.linear-quote-mail-hint {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.38);
    flex: 1 1 12rem;
    min-width: 0;
}
.linear-quote-mail-hint a {
    color: rgba(255, 255, 255, 0.52);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.linear-quote-mail-hint a:hover {
    color: rgba(255, 255, 255, 0.75);
    border-bottom-color: rgba(255, 255, 255, 0.35);
}
.quote-request-section .linear-quote-footer .btn-get-started {
    flex-shrink: 0;
    margin: 0;
}
.quote-request-section .form-control.is-invalid {
    border-color: rgba(255, 130, 110, 0.5);
    box-shadow: none;
}
.wac-deliverable-options.is-invalid .wac-check-option {
    border-color: rgba(255, 130, 110, 0.5);
}
/* Toast over quote panel (does not stretch the form layout) */
.wac-quote-notice {
    display: none;
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    left: auto;
    width: min(17.5rem, calc(100% - 0.8rem));
    max-width: calc(100vw - 2rem);
    z-index: 8;
    flex-direction: column;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    font-family: 'Manrope', sans-serif;
    background: #0c0c0c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
}
.wac-quote-notice.is-visible {
    display: flex;
}
.wac-quote-notice.is-visible:not(.is-leaving) {
    animation: wac-quote-notice-enter 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wac-quote-notice.is-visible.is-leaving {
    animation: wac-quote-notice-exit 0.26s cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
}
.wac-quote-notice[hidden] {
    display: none !important;
}
@keyframes wac-quote-notice-enter {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes wac-quote-notice-exit {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}
@media (prefers-reduced-motion: reduce) {
    .wac-quote-notice.is-visible:not(.is-leaving) {
        animation: wac-quote-notice-enter-reduced 0.01s ease forwards;
    }
    .wac-quote-notice.is-visible.is-leaving {
        animation: wac-quote-notice-exit-reduced 0.01s ease forwards;
    }
    .wac-quote-notice.is-timed .wac-quote-notice__progress-bar {
        animation: none !important;
        opacity: 0.35;
    }
}
@keyframes wac-quote-notice-enter-reduced {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes wac-quote-notice-exit-reduced {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.wac-quote-notice__edge {
    flex-shrink: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
}
.wac-quote-notice--error .wac-quote-notice__edge {
    background: rgba(255, 130, 110, 0.35);
}
.wac-quote-notice__row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.62rem 0.65rem 0.65rem 0.72rem;
}
.wac-quote-notice__content {
    flex: 1;
    min-width: 0;
}
.wac-quote-notice__title {
    display: block;
    margin: 0 0 0.22rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
}
.wac-quote-notice__body {
    display: block;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.01em;
    white-space: pre-wrap;
    word-break: break-word;
    color: rgba(255, 255, 255, 0.55);
}
.wac-quote-notice__close {
    flex-shrink: 0;
    margin: -0.12rem -0.05rem 0 0;
    padding: 0.15rem 0.32rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.wac-quote-notice__close:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
}
.wac-quote-notice__progress-track {
    flex-shrink: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
}
.wac-quote-notice__progress-bar {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(1);
    background: rgba(255, 255, 255, 0.32);
}
.wac-quote-notice.is-timed .wac-quote-notice__progress-bar {
    animation: wac-quote-notice-progress var(--wac-notice-duration, 9s) linear forwards;
}
@keyframes wac-quote-notice-progress {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}
.wac-quote-notice--error {
    border-color: rgba(255, 130, 110, 0.28);
}
.wac-quote-notice--error .wac-quote-notice__body {
    color: rgba(255, 255, 255, 0.52);
}
.wac-quote-notice--error .wac-quote-notice__progress-bar {
    background: rgba(255, 130, 110, 0.45);
}
.wac-quote-notice--success .wac-quote-notice__edge {
    background: rgba(255, 255, 255, 0.18);
}
.wac-quote-notice--success .wac-quote-notice__progress-bar {
    background: rgba(220, 225, 245, 0.38);
}
@media (max-width: 768px) {
    .wac-quote-notice {
        top: 0.25rem;
        right: 0.25rem;
        left: 0.25rem;
        width: auto;
        max-width: none;
    }
}
@media (max-width: 768px) {
    .quote-request-layout {
        grid-template-columns: 1fr;
    }
    .quote-request-intro {
        text-align: left;
        justify-self: stretch;
        max-width: none;
    }
    .quote-request-panel .form-container {
        max-width: none;
    }
    .quote-request-form {
        display: block !important;
        flex: none !important;
        height: auto !important;
    }
    .wac-form-grid,
    .wac-form-grid--single,
    .wac-check-grid {
        grid-template-columns: 1fr;
    }
    .linear-quote-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .linear-quote-footer .linear-quote-mail-hint {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .quote-request-section .linear-quote-footer .btn-get-started {
        width: 100%;
    }
}

@media (min-width: 961px) {
    .roadmap-bar-stack {
        left: 12.5%;
        right: 12.5%;
        width: auto;
    }
}
@media (max-width: 960px) {
    .roadmap-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .roadmap-bar-stack {
        display: block;
        left: calc(1.5rem + var(--roadmap-point) / 2);
        top: 0.6rem;
        bottom: 3.2rem;
        right: auto;
        width: var(--roadmap-bar-h);
        height: auto;
        transform: translateX(-50%);
    }
    .roadmap-bar-base {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.09) 50%,
            rgba(255, 255, 255, 0.04)
        ) !important;
    }
    .roadmap-bar-fill {
        transform-origin: center top !important;
        transform: scaleY(var(--roadmap-fill, 0)) !important;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.35),
            rgba(255, 255, 255, 0.82) 45%,
            rgba(255, 255, 255, 0.55) 100%
        ) !important;
    }
    .roadmap-stages {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: relative;
    }
    .roadmap-milestone {
        display: contents;
    }
    .roadmap-num {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        text-align: center;
        z-index: 1;
    }
    .roadmap-point {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        z-index: 1;
    }
    .roadmap-stage {
        flex: none;
        width: 100%;
        display: grid;
        grid-template-columns: 1rem var(--roadmap-point) 1fr;
        grid-template-rows: auto auto;
        align-items: start;
        column-gap: 0.5rem;
        row-gap: 0.35rem;
        padding: 0 0 1.25rem 0;
        text-align: left;
    }
    .roadmap-stage:last-child {
        padding-bottom: 0;
    }
    .roadmap-stage strong {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    }
    .roadmap-stage-desc {
        grid-column: 3;
        grid-row: 2;
    }
}

.about-words-inner {
    position: relative;
}
.about-words-copy {
    position: relative;
    z-index: 2;
}
.about-words-body-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.about-words-visual {
    flex-shrink: 0;
    width: 100%;
    max-width: 400px;
    margin: 2.25rem auto 0;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    overflow: hidden;
}
@media (min-width: 901px) {
    .about-words-body-wrap {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(1.75rem, 4vw, 3.25rem);
    }
    .about-words-body {
        flex: 1 1 auto;
        min-width: 0;
    }
    .about-words-visual {
        width: min(36vw, 380px);
        max-width: min(36vw, 380px);
        margin: 0;
        transform: translateY(-0.7rem);
    }
}
.about-rtc360-glow {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 125%;
    height: 125%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 48%, rgba(8, 8, 9, 0.55) 0%, rgba(8, 8, 9, 0.12) 42%, transparent 68%);
    filter: blur(38px);
    opacity: 0.5;
}
.about-rtc360-figure {
    position: relative;
    z-index: 1;
    margin: 0;
}
.about-rtc360-figure::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to top,
            rgba(8, 8, 9, 0.98) 0%,
            rgba(8, 8, 9, 0.75) 14%,
            rgba(8, 8, 9, 0.3) 32%,
            transparent 55%
        ),
        radial-gradient(ellipse 95% 72% at 50% 36%,
            transparent 20%,
            rgba(8, 8, 9, 0.24) 62%,
            rgba(8, 8, 9, 0.58) 100%
        );
}
.about-rtc360-img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(1) contrast(1.05) brightness(0.86);
}

/* ═══════════════════════════════════════════════════════════════
   Sticky mobile CTA - bottom bar that appears after the user
   scrolls past the hero, hides when the quote form enters view.
   Desktop keeps the floating header's "Book a call" button.
   ═══════════════════════════════════════════════════════════════ */
.wac-sticky-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding:
        0.6rem
        max(1rem, env(safe-area-inset-right, 0px))
        max(0.75rem, env(safe-area-inset-bottom, 0px))
        max(1rem, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--color-canvas) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    transform: translateY(110%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
@media (max-width: 991.98px) {
    .wac-sticky-cta { display: block; }
}
.wac-sticky-cta.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}
.wac-sticky-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    height: 52px;
    padding: 0 1.25rem;
    background: #fff;
    color: var(--color-canvas);
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.wac-sticky-cta-btn:hover,
.wac-sticky-cta-btn:focus-visible {
    color: var(--color-canvas);
    background: #f0f0f0;
}
.wac-sticky-cta-btn:active {
    transform: scale(0.985);
    background: #e6e6e6;
}
.wac-sticky-cta-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
    .wac-sticky-cta {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Cookie consent banner (GA4 Consent Mode v2). First-visit opt-in;
   decision persisted in localStorage under `wac_consent_v1`.
   ═══════════════════════════════════════════════════════════════ */
.wac-consent {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1100;
    max-width: 22rem;
    width: calc(100% - 2rem);
    padding: 1rem 1.1rem 1.05rem;
    font-family: 'Manrope', sans-serif;
    background: rgba(8, 8, 9, 0.94);
    background: color-mix(in srgb, var(--color-canvas) 94%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Fade-out: opacity animates over 0.35s, visibility flips after (0.35s delay) */
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.wac-consent.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Fade-in: visibility flips instantly so the opacity transition can render */
    transition: opacity 0.35s ease, visibility 0s linear 0s;
}
.wac-consent-text {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.62);
}
.wac-consent-text #wac-consent-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}
.wac-consent-text a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.wac-consent-text a:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.55);
}
.wac-consent-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
.wac-consent-btn {
    padding: 0.46rem 0.95rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.wac-consent-btn--secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.78);
}
.wac-consent-btn--secondary:hover,
.wac-consent-btn--secondary:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    outline: none;
}
.wac-consent-btn--primary {
    background: #fff;
    border: 1px solid #fff;
    color: var(--color-canvas);
}
.wac-consent-btn--primary:hover,
.wac-consent-btn--primary:focus-visible {
    opacity: 0.9;
    outline: none;
}

@media (max-width: 767.98px) {
    .wac-consent-btn {
        min-height: 2.5rem;
        padding: 0.58rem 1rem;
    }
}
body.wac-consent-active .wac-sticky-cta {
    display: none;
}
@media (max-width: 991.98px) {
    .wac-consent {
        left: max(0.75rem, env(safe-area-inset-left, 0px));
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
        max-width: none;
        width: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .wac-consent {
        transition: opacity 0.15s ease, visibility 0s linear 0.15s;
    }
    .wac-consent.is-visible {
        transition: opacity 0.15s ease, visibility 0s linear 0s;
    }
}

/* ─── Auth-aware nav CTAs ─────────────────────────────────────────
   Two text alternates inside #login-btn / #login-btn-mobile pick
   between "Log In" and "Open dashboard" based on the
   data-wac-authed attribute set on <html> by the synchronous shim
   script in <head> (which reads the wac_seen_authed localStorage
   marker). The signup CTAs (#get-started-btn, #signup-btn-mobile)
   hide entirely when authed.
   Doing this in CSS - not JS - eliminates the F5 flicker for
   repeat authed visitors: the shim sets the attribute BEFORE the
   browser paints, so the buttons render with the right labels on
   first frame. main.js confirms via /api/auth/hint and rewrites
   the attribute if the optimistic guess was wrong. */
.auth-authed { display: none; }
html[data-wac-authed="1"] .auth-default { display: none; }
html[data-wac-authed="1"] .auth-authed { display: inline; }
html[data-wac-authed="1"] #get-started-btn,
html[data-wac-authed="1"] #signup-btn-mobile { display: none; }