/*********/

   .main-nav .main-nav-columns a {
    margin-bottom: -5px;
}

@media screen and (min-width: 1024px) {
    .main-nav .drop-menu-list p {
        font-size: 12px !important;
        line-height: 24px;
        padding-top: 2px;
        color: #000;
    }
    .main-nav .main-menu-drop {
        padding: 20px 0;
        left: 0;
    }

    .main-nav .main-nav-columns li {
        margin-bottom: 20px;
        position: relative;
        padding-left: 20px;
    }
}


.header-featured-content .read-more svg{
    vertical-align: baseline;
    left: 10px;
}
.header-featured-blocks{
    justify-content: flex-start;
}
 div.drop-menu-list > div > div > ul > li{
     font-family: Inter;
 }

.main-nav .main-nav-columns img {
    filter: none;
    position: absolute;
    left: -10px;
}

   
   .main-header {
       background-color: #121212 !important;
       border-bottom: 1px solid #1f1f1f !important;
       font-family: 'Inter', 'Manrope', sans-serif;
   }
   .main-nav .main-nav-columns img{
    height: 25px;
   }
   
   .main-header.sticky,
   .main-header.transparent,
   .main-header.gray-50 {
       background-color: #121212 !important;
   }
   
   /* Logo — recolor blue brand mark to white */
   .main-header .main-logo svg path,
   .main-header .main-logo svg g path {
       fill: #ffffff !important;
   }
   
   /* =====================================================
      2. PRIMARY NAV LINKS  (Products / Solutions / etc.)
      ===================================================== */
   
   .main-header .main-nav > ul > li > a{
       color: #ffffff;
   }

.main-header .item{
    border-right: 1px solid #d8d8d8;
    padding-right: 24px;
}
   
   .main-header .main-nav a {
       font-family: 'Inter', 'Manrope', sans-serif;
       font-weight: 500;
       font-size: 16px;
       line-height: 1.2;
   }

.header-featured-content .header-featured-content-item .read-more a{
    font-size: 12px;
    color: #121221;
}
   
   /* Hover / active background pill — soft white wash on dark bg */
   @media screen and (min-width: 1024px) {
       .main-header .main-nav .menu-item.active > a,
       .no-touch .main-header .main-nav .menu-item:hover > a {
           background-color: rgba(255, 255, 255, 0.08) !important;
           color: #ffffff !important;
       }
   
       .main-header .main-nav .current-menu-item > a {
           color: #ffffff;
       }
   
       /* Caret on items with children */
       .main-header .main-nav .menu-item.menu-item-has-children > a:after {
           color: rgba(255, 255, 255, 0.85);
       }
   }
   
   /* =====================================================
      3. RIGHT-SIDE LINKS  (Log In + Build Now)
      ===================================================== */
   
   .main-header .main-header-links {
       color: #ffffff;
   }
   
   .main-header .main-header-links a:not(.button-link) {
       color: #ffffff;
       font-family: 'Inter', 'Manrope', sans-serif;
       font-weight: 500;
       font-size: 16px;
   }
   
   .no-touch .main-header .main-header-links a:not(.button-link):hover {
       color: rgba(255, 255, 255, 0.7);
   }
   
   /* "Log in" — markup is `<li class="button-link transparent">` wrapping
      an `<a>`. Per Figma the Log In is plain white text (NOT a button), so
      strip the button styling for the .transparent variant and let the
      inner anchor render as a normal link. */
   .main-header .main-header-links .button-link.transparent,
   .main-header .main-header-links li.button-link.transparent {
       background: transparent !important;
       border: none !important;
       padding: 0 !important;
       border-radius: 0 !important;
   }
   
   .main-header .main-header-links .button-link.transparent > a,
   .main-header .main-header-links li.button-link.transparent > a {
       color: #ffffff !important;
       background: transparent !important;
       font-family: 'Inter', 'Manrope', sans-serif;
       font-weight: 500;
       font-size: 16px;
       padding: 10px 0 !important;
   }
   
   .no-touch .main-header .main-header-links .button-link.transparent > a:hover,
   .no-touch .main-header .main-header-links li.button-link.transparent > a:hover {
       color: rgba(255, 255, 255, 0.7) !important;
   }
   
   /* "Build Now / Build for free" pill button — white bg, black text,
      fully rounded. Applies to the solid (non-transparent) `.button-link`
      and `.btn` variants whether the class lives on the `<a>` itself or
      on a wrapping `<li>`/container. */
   .main-header .main-header-links a.button-link:not(.transparent),
   .main-header .main-header-links a.btn:not(.transparent) {
       background-color: #ffffff !important;
       color: #000000 !important;
       border: none !important;
       border-radius: 55px !important;
       padding: 12px 28px !important;
       font-family: 'Inter', 'Manrope', sans-serif !important;
       font-weight: 500 !important;
       font-size: 16px !important;
       line-height: 1 !important;
       transition: background-color .2s ease, color .2s ease;
   }
   
   /* If `button-link`/`btn` is on a wrapping element, style the inner anchor
      instead so the actual clickable text is the pill. */
   .main-header .main-header-links li.button-link:not(.transparent) > a,
   .main-header .main-header-links li.btn:not(.transparent) > a {
       background-color: #ffffff !important;
       color: #000000 !important;
       border: none !important;
       border-radius: 55px !important;
       padding: 12px 28px !important;
       font-family: 'Inter', 'Manrope', sans-serif !important;
       font-weight: 500 !important;
       font-size: 16px !important;
       line-height: 1 !important;
       display: inline-block;
       transition: background-color .2s ease, color .2s ease;
   }
   
   .no-touch .main-header .main-header-links a.button-link:not(.transparent):hover,
   .no-touch .main-header .main-header-links a.btn:not(.transparent):hover,
   .no-touch .main-header .main-header-links li.button-link:not(.transparent) > a:hover,
   .no-touch .main-header .main-header-links li.btn:not(.transparent) > a:hover {
       background-color: rgba(255, 255, 255, 0.85) !important;
       color: #000000 !important;
   }


@media screen and (min-width: 1024px) {

    .main-nav .main-nav-columns .item {
        min-width: 200px!important;
    }

    #menu-main_menu .menu-item-has-children:nth-child(1) .main-nav-columns .item {
        min-width: 412px!important;
    }
}

   #menu-main_menu .menu-item-has-children:nth-child(1) .subtitle,
#menu-main_menu .menu-item-has-children:nth-child(2) .subtitle{
    display:none!important;
   }



   #menu-main_menu > li{
    position: relative;
   }

@media screen and (min-width: 1024px) {
    .main-nav .main-nav-columns {
        padding-right: 5px; 
        height: 100%;
    }
    .main-nav .main-nav-columns .item + .item{
        padding-left: 20px;
    }


    .main-nav .subtitle {
        color: #000;
        font-family: Inter;
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        border-bottom: 0;
        padding-bottom: 0;
    }
    .main-nav .subtitle:after{
        content: none;
    }
    .header-featured-content .image{
        margin-top: 0;
    }
    .main-menu-drop {
        border: 1px solid #d8d8d8;
        border-radius: 2px;
    }
    #menu-main_menu .menu-item-has-children:nth-child(3) .main-menu-drop{
        padding-bottom: 80px;
    }
    #menu-main_menu .menu-item-has-children:nth-child(3) .quick-links{
        position: absolute;
        left: 0;
        margin: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        gap: 0;
        padding-right:70px;
    }
    /* Products & Solutions dropdowns — full-width integrations CTA footer.
       Keyed off the CTA's presence (not menu position) so it applies to any
       dropdown that renders it. Mirrors the developers quick-links footer. */
    #menu-main_menu .main-menu-drop:has(.products-menu-cta){
        padding-bottom: 72px;
    }
    #menu-main_menu .main-menu-drop .products-menu-cta{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
    }
}


}

.header-featured-content .image{
    border-radius: 2px;
    margin-top: 0;
    height: 142px;
}


    .header-featured-content {
        width: 265px;
    }



@media only screen and (min-width: 1024px) {
    .header-featured-content .h5, .header-featured-content h5 {
        font-size: 14px;
        color: #000;
    }


    .main-nav .main-menu-drop .main-menu-drop-container {
        padding: 0 30px;
    }

}



   @media screen and (max-width: 1023px) {
      .main-nav .drop-menu-list > .quick-links,
      .main-nav .drop-menu-list > .products-menu-cta {
          display: none !important;
      }
}

       .main-header .main-menu-drop .drop-menu-list > .link-add,
       .main-header .main-menu-drop .drop-menu-list > .quick-links {
           background-color: #fafafa;
           margin: 20px -20px -20px;
           padding: 20px;
           border-radius: 0 0 2px 2px;
           display: flex;
           gap: 30px;
       }

/* Products dropdown — integrations CTA footer bar */
.main-header .main-menu-drop .drop-menu-list > .products-menu-cta {
    background-color: #fafafa;
    margin: 20px -20px -20px;
    padding: 16px 30px;
    border-radius: 0 0 2px 2px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.products-menu-cta__text {
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
}

.products-menu-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0b9b8a;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.products-menu-cta__link svg {
    width: 16px;
    height: 14px;
}

.products-menu-cta__link:hover {
    opacity: .85;
}



@media screen and (min-width: 1024px) {
    .main-nav .subtitle {
        color: #000;
        font-family: Inter;
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        border-bottom: 0;
        padding-bottom: 0;
    }
    .main-nav .subtitle:after{
        content: none;
    }
}




   .site-footer:not(.secondary):not(.white) {
       background-color: #000000 !important;
       color: #ffffff;
       font-family: 'Manrope', sans-serif;
   }
   
   /* Footer logo */
   .site-footer:not(.secondary):not(.white) .footer-logo svg path {
       fill: #ffffff !important;
   }
   
   /* Section headings (Contact / Products / Solutions / Developers / Company) */
   .site-footer:not(.secondary):not(.white) .footer-menu > li > h6,
   .site-footer:not(.secondary):not(.white) .footer-menu > li > .h6 {
       color: #ffffff !important;
       font-family: 'Manrope', sans-serif;
       font-weight: 800;
       font-size: 18px;
       line-height: 1.2;
       letter-spacing: -0.01em;
       margin-bottom: 24px;
   }
   
   /* Menu link items */
   .site-footer:not(.secondary):not(.white) .footer-menu a {
       color: #ffffff !important;
       font-family: 'Manrope', sans-serif;
       font-weight: 400;
       font-size: 16px;
       line-height: 1.4;
       letter-spacing: -0.01em;
       opacity: 0.9;
       transition: opacity .2s ease;
   }
   
   .site-footer:not(.secondary):not(.white) .footer-menu a:hover {
       color: #ffffff !important;
       opacity: 1;
   }
   
   /* Social icons row */
   .site-footer:not(.secondary):not(.white) .social ul a path {
       fill: #ffffff !important;
   }
   
   .site-footer:not(.secondary):not(.white) .social ul a {
       opacity: 0.85;
       transition: opacity .2s ease;
   }
   
   .site-footer:not(.secondary):not(.white) .social ul a:hover {
       opacity: 1;
   }
   
   /* Bottom bar — copyright + legal links */
   .site-footer:not(.secondary):not(.white) .footer-bottom .wrap p,
   .site-footer:not(.secondary):not(.white) .footer-bottom .wrap a,
   .site-footer:not(.secondary):not(.white) .footer-bottom .add-nav a {
       color: #ffffff !important;
       font-family: 'Manrope', sans-serif;
       font-weight: 400;
       font-size: 16px;
       opacity: 0.9;
   }
   
   .site-footer:not(.secondary):not(.white) .footer-bottom .wrap a:hover,
   .site-footer:not(.secondary):not(.white) .footer-bottom .add-nav a:hover {
       opacity: 1;
   }
   

   /* ============================================
   2025 FOOTER STYLES
   Used on Homepage 2024 and Integrations pages
   
   This file is imported by:
   - homepage-2025.css
   - integrations-2025.css
   ============================================ */

.site-footer--2025 {
    background-color: #000000 !important;
    padding-bottom: 15px;
}


.site-footer--2025 .footer-menu {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    flex-wrap: wrap;
}

.site-footer--2025 .footer-menu__info-item {
    min-width: 230px;
    flex-shrink: 0;
}

.site-footer--2025 .footer-menu__info-item .footer-info {
    display: flex;
    flex-direction: column;
}

.site-footer--2025 .footer-menu__info-item .footer-logo {
    display: block;
}

.site-footer--2025 .footer-menu__info-item .footer-logo svg {
    width: 120px;
    height: auto;
}

.site-footer--2025 .footer-menu__info-item .social ul {
    display: flex !important;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
}

.site-footer--2025 .footer-menu__info-item .social a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.site-footer--2025 .footer-menu__info-item .social a:hover {
    opacity: 1;
}

.site-footer--2025 .social ul a path {
    fill: #d8d8d8;
}

.site-footer--2025 .footer-menu > li {
    list-style: none;
}

.site-footer--2025 .footer-menu > li h6 {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #ffffff;
    margin: 0 0 16px 0;
    letter-spacing: 0.5px;
}

.site-footer--2025 .footer-menu > li ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer--2025 .footer-menu > li ul li {
    margin-bottom: 12px;
}

.site-footer--2025 .footer-menu > li ul li a {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer--2025 .footer-menu > li ul li a:hover {
    color: #ffffff;
}

.site-footer--2025 .footer-nav {
    width: 100%;
}


/* Footer Bottom - Copyright and Links */
.site-footer--2025 .footer-bottom .wrap p {
    font-family: 'Manrope', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    margin: 0;
}

.site-footer--2025 .footer-bottom .wrap #menu-copyright,
.site-footer--2025 .footer-bottom .wrap .add-nav {
    font-family: 'Manrope', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 65px;
    display: flex;
    align-items: center;
    letter-spacing: -0.01em;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 24px;
}

.site-footer--2025 .footer-bottom .wrap #menu-copyright li a,
.site-footer--2025 .footer-bottom .wrap .add-nav li a {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.site-footer--2025 .footer-bottom .wrap #menu-copyright li a:hover,
.site-footer--2025 .footer-bottom .wrap .add-nav li a:hover {
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 1024px) {
    .site-footer--2025 .footer-menu {
        gap: 32px;
    }
    
    .site-footer--2025 .footer-menu__info-item {
        min-width: 100%;
        order: -1;
        margin-bottom: 24px;
    }
}



.quick-links a {
    display: flex;
    gap: 10px;
    align-items: center;
}

.quick-links a svg {
    background: white;
    border: 1px solid #d8d8d8;
    padding: 3px;
    width: 20px;
    height: 20px;
}


.main-header-box + main{
    padding-top: 65px!important;
}
.header-banner-info-new{
    top: 0!important;
}

/* When the WP admin bar is shown, WordPress adds html{margin-top:32px} and
   shifts the page down, but the out-of-flow header stays put and a gap opens
   before <main>. Nudge the header down by the admin-bar height so it sits
   directly under the toolbar again. (Admin bar is 32px, 46px <=782px.) */
body.admin-bar .main-header-box {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .main-header-box {
        top: 46px;
    }
}

/* =====================================================
   MOBILE NAV — dark theme to match Figma design
   Scoped to <=1023px so desktop dropdowns are untouched.
   ===================================================== */
@media screen and (max-width: 1023px) {

    /* --- Toggle: white icon inside a bordered circle ("=" closed, "X" open) --- */
    .main-header .mobile-menu-opener {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.25);
        background-color: rgba(255, 255, 255, 0.06);
    }

    .main-header .mobile-menu-opener:before,
    .main-header .mobile-menu-opener:after {
        width: 16px;
        background-color: #ffffff;
        left: 50%;
    }

    .main-header .mobile-menu-opener:before {
        top: 16px;
        transform: translate(-50%, 0);
    }

    .main-header .mobile-menu-opener:after {
        top: 22px;
        transform: translate(-50%, 0);
    }

    /* Middle bar of the original hamburger isn't used in the "=" mark */
    .main-header .mobile-menu-opener i {
        display: none;
    }

    .menu-opened .main-header .mobile-menu-opener:before {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .menu-opened .main-header .mobile-menu-opener:after {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* --- Slide-in panel: solid black --- */
    .main-nav-holder {
        background-color: #000000 !important;
        background-image: none !important;
    }

    /* --- Primary links: white text + hairline dividers --- */
    .main-header .main-nav .menu-item > a {
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    .main-header .main-nav .menu-item.active > a {
        color: #ffffff !important;
    }

    /* --- Drop chevrons (Products / Solutions): white --- */
    .main-header .main-nav .mobile-drop-opener svg path {
        fill: #ffffff !important;
    }

    /* Accordion model: the drill-down close/back "x" is redundant (the
       circular toggle closes the whole menu), so hide it. */
    .main-header .main-nav .mobile-drop-closer {
        display: none !important;
    }

    /* --- Expanded submenu (e.g. Products) --- */
    .main-header .main-nav .subtitle {
        color: #ffffff !important;
    }

    /* Expanded submenu sits in one subtle rounded container; flatten the
       per-column boxes and drop the desktop column divider so every item
       lines up in a single list. */
    .main-header .main-nav .menu-item.active > .main-menu-drop {
        background-color: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px;
        margin: 6px 0 4px;
        padding: 8px 16px 14px !important;
    }

    .main-header .main-nav-columns > .item.active {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-top: 0 !important;
    }

    .main-header .main-nav-columns > .item {
        border-right: none !important;
        padding-right: 0 !important;
    }

    .main-header .main-nav .drop-menu-list a {
        color: #ffffff !important;
    }

    .main-header .main-nav .drop-menu-list p {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Submenu icons are dark line-art SVGs — invert to white so they're
       visible on the black panel instead of reading as empty boxes. */
    .main-header .main-nav .main-nav-columns li a img {
        filter: brightness(0) invert(1) !important;
    }

    /* The icons are absolutely positioned; without a positioned ancestor
       inside the dropdown they resolve against the top-level menu item and
       escape the slideUp/slideDown clip, so they hang in place during the
       toggle animation. Anchoring them to the dropdown lets jQuery's
       temporary overflow:hidden clip them while it animates. */
    .main-header .main-nav .main-menu-drop {
        position: relative;
    }

    /* Promotional feature card isn't part of the mobile menu design and its
       dark "Learn more" link is unreadable on black — hide it on mobile. */
    .main-header .main-nav .header-featured-blocks,
    .main-header .main-nav .header-featured-content {
        display: none !important;
    }

    /* --- Bottom links (Log In) stay white text --- */
    .main-header .main-header-links a:not(.button-link) {
        color: #ffffff !important;
    }

    /* =====================================================
       Accordion behaviour (replaces the drill-down). The JS already
       toggles `.active` + slides the dropdown; these rules stop the
       drill-down CSS from hiding the rest of the menu, so a submenu
       expands in place while the logo, sibling items and footer stay
       visible — matching the Figma design.
       ===================================================== */
    .main-header-box:has(#menu-main_menu > .menu-item-has-children.active) .mobile-menu-opener,
    .main-header-box:has(#menu-main_menu > .menu-item-has-children.active) .main-logo {
        display: block !important;
    }

    .main-header-box:has(#menu-main_menu > .menu-item-has-children.active) #menu-main_menu > .menu-item:not(.active) {
        display: block !important;
    }

    .main-header-box:has(#menu-main_menu > .menu-item-has-children.active) .main-header-links {
        display: block !important;
    }

    .main-header-box:has(#menu-main_menu > .menu-item-has-children.active) .main-nav-holder {
        padding-top: 74px !important;
    }

    /* Active parent row stays a normal in-place row (revert the drill-down
       full-bleed width and the "back" chevron). */
    .main-header .main-nav .menu-item.active > a {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .main-header .main-nav .menu-item.active > a::before {
        content: none !important;
    }

    /* Chevron points down when collapsed, up when expanded (top level + the
       nested Developers sub-headers). */
    #menu-main_menu > .menu-item > a .mobile-drop-opener,
    .main-header .main-nav .main-nav-columns .item .subtitle .mobile-drop-opener {
        transform: none !important;
    }

    #menu-main_menu > .menu-item.active > a .mobile-drop-opener {
        display: flex !important;
        transform: rotate(180deg) !important;
    }

    .main-header .main-nav .main-nav-columns .item.active .subtitle .mobile-drop-opener {
        transform: rotate(180deg) !important;
    }

    /* Products & Solutions have hidden column sub-headers, so reveal all
       their columns (otherwise half of Solutions is unreachable on mobile). */
    #menu-main_menu .menu-item-has-children:nth-child(1) .main-nav-columns > .item > ul,
    #menu-main_menu .menu-item-has-children:nth-child(2) .main-nav-columns > .item > ul {
        display: block !important;
    }
}


/* =====================================================
   404 PAGE — Figma redesign (Marketing Site Layout)
   Scoped to body.error404 so it only affects the 404 page.
   CSS-only: the "Connectivity" eyebrow and the large outlined
   "404" are injected via ::before / ::after on .wrap and
   reordered with flexbox; existing markup (h1, p, button) is
   restyled in place.
   ===================================================== */

body.error404 main,
body.error404 main.main--bg {
    background-color: #ffffff !important;
}

body.error404 .error-block-section {
    background-color: #ffffff !important;
    background-image: none;
    color: #000000;
    min-height: calc(100vh - 69px);
    font-family: 'Inter', 'Manrope', sans-serif;
}

/* Decorative comet SVG injected by JS isn't part of this design. */
body.error404 .error-block-section .comets {
    display: none !important;
}

/* Stack the content vertically and centre it. */
body.error404 .error-block-section .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    width: auto;
    max-width: 1037px;
    margin: 0 auto;
    padding: 60px 20px;
}

/* "CONNECTIVITY" eyebrow */
body.error404 .error-block-section .wrap::before {
    content: "Connectivity";
    order: -2;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 26px;
    text-transform: uppercase;
    color: #8e8e8e;
}

/* Large outlined "404" */
body.error404 .error-block-section .wrap::after {
    content: "404";
    order: -1;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(110px, 26vw, 250px);
    line-height: 1;
    letter-spacing: -0.08em;
    color: transparent;
    -webkit-text-stroke: 2px #d8d8d8;
    margin: 0;
}

body.error404 .error-block-section h1,
body.error404 .error-block-section .h1 {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.15;
    letter-spacing: -2px;
    color: #000000;
    margin: 0;
}

body.error404 .error-block-section p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 2.5vw, 20px);
    line-height: 26px;
    color: #000000;
    opacity: 1;
    margin: 0;
}

/* "Back to homepage" — black pill button with a trailing arrow. */
body.error404 .error-block-section .button-link,
body.error404 .error-block-section .button-link.white {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 14px 34px;
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 55px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500 !important;
    font-size: 16px;
    line-height: 1;
}

body.error404 .error-block-section .button-link::after {
    content: "";
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

body.error404 .error-block-section .button-link:hover,
body.error404 .error-block-section .button-link.white:hover {
    background: #1f1f1f;
    color: #ffffff;
    border: none;
}

/* Decorative grid frame — two vertical guides ~100px from each
   edge and a horizontal band bounding the centred content. Desktop
   only; on smaller screens the layout stays clean white. */
@media screen and (min-width: 1024px) {
    body.error404 .error-block-section {
        position: relative;
        background-color: #ffffff;
        background-image:
            linear-gradient(#d8d8d8, #d8d8d8),
            linear-gradient(#d8d8d8, #d8d8d8),
            linear-gradient(#d8d8d8, #d8d8d8),
            linear-gradient(#d8d8d8, #d8d8d8);
        background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
        background-position:
            100px 0,
            calc(100% - 100px) 0,
            0 calc(50% - 372px),
            0 calc(50% + 372px);
        background-repeat: no-repeat;
    }

    body.error404 .error-block-section .wrap {
        padding: 120px 0;
    }
}