/*
Theme Name: SqlDBM Gutenberg
Theme URI: https://pluginslab.com/pl-sqldbm-gutenberg
Author: Pluginslab
Author URI: https://pluginslab.com
Description: Custom Gutenberg block theme for sqldbm.com built on Antonio's UI Kit design system. Pairs with the pl-sqldbm-helper plugin for custom mega-menu / footer blocks.
Version: 0.64.0
Requires at least: 6.7
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pl-sqldbm-gutenberg
Tags: full-site-editing, block-styles, custom-colors, custom-typography, one-column
*/

/* Layout — no horizontal scroll */

html,
body {
    overflow-x: clip;
}

/* Accessibility — global focus rings + reduced motion */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--wp--preset--color--blue-300);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Hover transitions — links and buttons ease their */
a,
button,
.wp-element-button,
.wp-block-button__link,
.wp-block-navigation-item__content,
[role="button"] {
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}

/* Body text line-heights — per Antonio's UI Kit */
p.has-xxs-font-size,
li.has-xxs-font-size {
    line-height: 1.4;
}
p.has-xs-font-size,
li.has-xs-font-size {
    line-height: 1.4;
}
p.has-sm-font-size,
li.has-sm-font-size {
    line-height: 1.6;
}
p.has-md-font-size,
li.has-md-font-size {
    line-height: 1.75;
}
p.has-lg-font-size,
li.has-lg-font-size {
    line-height: 1.6;
}

.has-h-1-font-size {
    line-height: 1.5;
}
.has-h-2-font-size,
.has-h-3-font-size {
    line-height: 1.44;
}
.has-h-4-font-size,
.has-h-5-font-size {
    line-height: 1.54;
}

@media (max-width: 767px) {
    h1,
    .has-h-1-font-size {
        font-size: var(--wp--preset--font-size--h-3) !important;
        line-height: 1.44;
    }
    h2,
    .has-h-2-font-size {
        font-size: var(--wp--preset--font-size--h-4) !important;
        line-height: 1.44;
    }
    h3,
    .has-h-3-font-size {
        font-size: var(--wp--preset--font-size--h-5) !important;
        line-height: 1.44;
    }
    h4,
    .has-h-4-font-size {
        font-size: 18px !important;
        line-height: 1.54;
    }
    h5,
    .has-h-5-font-size {
        font-size: var(--wp--preset--font-size--md) !important;
        line-height: 1.54;
    }
}

/* Hero pattern */

/* Two-layer hero backdrop */
.pl-hero {
    position: relative;
    background-color: #0b0c0f;
    background-image: url("assets/backgrounds/bg_hero_home_split_1.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    overflow: hidden;
}

.pl-hero__media {
    position: relative;
}

.pl-hero__media::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 110px;
    background-image: url("assets/backgrounds/bg_hero_home_split_2.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    pointer-events: none;
}

@media (max-width: 767px) {
    .pl-hero__media::after {
        display: none;
    }
}

/* Hero product animation — a self-contained scene lazy-loaded in an iframe.
   aspect-ratio reserves the box so there's no layout shift while it loads; the
   standalone HTML paints its own still frame before the JS scene starts. */
.pl-hero__animation {
    display: block;
    width: 100%;
    aspect-ratio: 1200 / 634;
    border: 0;
    border-radius: 16px;
    background: #16181d;
}

.pl-hero.alignfull,
.pl-section.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Kill the root blockGap */
.pl-hero.alignfull + .pl-section.alignfull,
.pl-section.alignfull + .pl-section.alignfull {
    margin-block-start: 0;
}

/* Per-section decorative backgrounds */
.pl-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.pl-section > * {
    position: relative;
    z-index: 1;
}
.pl-section::before {
    content: "";
    position: absolute;
    inset: 0;

    top: 5%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 0;
}

.pl-section--data-challenges::before {
    background-image: url("assets/backgrounds/section-data-challenges-bg.png");
    opacity: 0.76;
}

.pl-section__subhead {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.pl-section--one-platform::before {
    background-image: url("assets/backgrounds/bg_section_3_lights.svg");
    background-size: min(100%, 1600px) auto;
    background-position: center 400px;
}

.pl-section--intelligent-modeling {
    overflow: visible;
}
.pl-section--intelligent-modeling::before {
    background-image: url("assets/backgrounds/bg_section_4_lines.svg");
    background-size: 100% 1400px;
    background-position: center 0;
    top: -320px;
}

.pl-section--trusted-by {
    background-image: radial-gradient(
        ellipse 63% 47% at 50% 50%,
        rgba(45, 47, 56, 0.16) 0%,
        rgba(45, 47, 56, 0) 70%
    );
}

/* Trust & Partners */
.pl-section--trust-partners {
    overflow: visible;
}
.pl-section--trust-partners::before {
    top: 0;
    background-image:
        url("assets/backgrounds/square_lines1.svg"),
        url("assets/backgrounds/square_lines2.svg");
    background-position:
        left 2vw top 200px,
        right 2vw top 200px;
    background-size:
        auto auto,
        auto auto;
    background-repeat: no-repeat, no-repeat;
}

/* Shared section chrome */
@media (max-width: 767px) {
    /* Kill WP's root global padding */
    .has-global-padding {
        --wp--style--root--padding-left: 0;
        --wp--style--root--padding-right: 0;
    }
    .pl-section {
        padding-left: var(--wp--custom--grid--padding-mobile) !important;
        padding-right: var(--wp--custom--grid--padding-mobile) !important;
    }
    /* Drop the 5% top inset on the decorative ::before so the section graphics
       start at the section top on mobile (reverts to the inset:0 origin). */
    .pl-section::before {
        top: 0;
    }
}

.pl-hero__logo img {
    display: block;
    height: 28px;
    width: auto;
    max-width: 100%;
    opacity: 0.7;
}

/* Integration card */
.pl-integration-card {
    width: 100%;
    max-width: 368px;
    border: 1px solid var(--wp--preset--color--slate-800);
    transition: border-color 0.2s ease;
    position: relative;
}

/* Whole card clickable */
.pl-integration-card__actions .wp-block-button__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Hover */
.pl-integration-card:hover {
    border-color: var(--wp--preset--color--slate-700);
}

@media (max-width: 767px) {
    /* Mobile */
    .pl-integration-card {
        /* Mobile padding */
        padding-top: var(--wp--preset--spacing--8-x) !important;
        padding-right: var(--wp--preset--spacing--6-x) !important;
        padding-bottom: var(--wp--preset--spacing--8-x) !important;
        padding-left: var(--wp--preset--spacing--6-x) !important;
        max-width: 100%;
        gap: var(--wp--preset--spacing--6-x);
    }
    .pl-integration-card__icon img {
        width: var(--wp--preset--spacing--12-x) !important;
        height: var(--wp--preset--spacing--12-x) !important;
    }
}

/* Badge — block-style variants on core/paragraph */

/* Common chrome */
p[class*="is-style-pl-badge-"] {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    gap: var(--wp--preset--spacing--1-x);
    margin: 0;
    padding: var(--wp--preset--spacing--2-x) var(--wp--preset--spacing--4-x)
        var(--wp--preset--spacing--2-x) var(--wp--preset--spacing--3-x);
    border-radius: var(--wp--custom--border-radius--pill);
    font-family: var(--wp--preset--font-family--open-sans);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 400;
    line-height: 1.4;
    color: var(--wp--preset--color--slate-100);
    white-space: nowrap;
}

p[class*="is-style-pl-badge-blue"]::before,
p[class*="is-style-pl-badge-ai"]::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

/* Blue */
p[class*="is-style-pl-badge-blue"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235090FF' stroke-width='1.2' stroke-linejoin='round'><path d='M8 2 L13.5 5 V11 L8 14 L2.5 11 V5 Z'/><path d='M2.5 5 L8 8 L13.5 5'/><path d='M8 8 V14'/></svg>");
}

p.pl-badge--icon-global-standards::before {
    background-image: url("assets/icons/Icon_Global_Standards.svg");
}
p.pl-badge--icon-semantic-model::before {
    background-image: url("assets/icons/Icon_Semantic_Model.svg");
}
p.pl-badge--icon-model-governance::before {
    background-image: url("assets/icons/Icon_Model_Governance.svg");
}

/* AI */
p[class*="is-style-pl-badge-ai"]::before {
    background-image: url("assets/icons/Icon_AI_Color.svg");
}

/* Type variants */

.is-style-pl-badge-gray-m,
.is-style-pl-badge-gray-l {
    background-color: var(--wp--preset--color--slate-900);
    border: 1px solid var(--wp--preset--color--slate-700);
}

/* Blue + AI */
.is-style-pl-badge-blue-m,
.is-style-pl-badge-blue-l {
    border: 1px solid transparent;
    background-image:
        linear-gradient(
            var(--wp--preset--color--gray-900),
            var(--wp--preset--color--gray-900)
        ),
        linear-gradient(
            90deg,
            var(--wp--preset--color--blue-600) 0%,
            var(--wp--preset--color--blue-400) 100%
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.is-style-pl-badge-ai-m,
.is-style-pl-badge-ai-l {
    border: 1px solid transparent;
    background-image:
        linear-gradient(
            var(--wp--preset--color--gray-900),
            var(--wp--preset--color--gray-900)
        ),
        /* exact AI-badge border gradient */
        linear-gradient(147deg, #e49628 6.61%, #ef18d6 54.58%, #9f38e0 103.98%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Size variants */

.is-style-pl-badge-gray-m,
.is-style-pl-badge-blue-m,
.is-style-pl-badge-ai-m {
    height: var(--wp--preset--spacing--8-x);
}

.is-style-pl-badge-gray-l,
.is-style-pl-badge-blue-l,
.is-style-pl-badge-ai-l {
    height: var(--wp--preset--spacing--10-x);
    font-size: var(--wp--preset--font-size--sm);
}

/* AI badge sizing */
p.is-style-pl-badge-ai-m,
p.is-style-pl-badge-ai-l {
    font-size: var(--wp--preset--font-size--sm);
}
p.is-style-pl-badge-ai-m::before,
p.is-style-pl-badge-ai-l::before {
    width: 24px;
    height: 24px;
}

/* Customer Story card */
.pl-customer-story {
    position: relative;
    width: 100%;
    max-width: 482px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.pl-customer-story:hover {
    border-color: var(--wp--preset--color--slate-700);
}

/* Whole card is a link */
.pl-customer-story__actions .wp-block-button__link::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Above the media logo */
    z-index: 3;
}

/* Media */
.pl-customer-story__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 900;
    border-bottom: 1px solid var(--wp--preset--color--slate-800);
    /* Dark fallback so the white customer logo stays legible if a story has no
       featured-image photo (otherwise the logo washes out on an empty media). */
    background-color: var(--wp--preset--color--gray-900);
}
.pl-customer-story__media .pl-customer-story__photo {
    position: absolute;
    inset: 0;
    margin: 0;
}
.pl-customer-story__media .pl-customer-story__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No photo overlay (A4): the dark gradient ::after created a two-tone look over
   the customer photos; removed per design. Logos sit directly on the photo. */
.pl-customer-story__media .pl-customer-story__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 2;
}

/* Decorative quote mark */
.pl-customer-story__quote-mark {
    margin: 0;
    line-height: 0;
    flex-shrink: 0;
}

/* Header */
.pl-customer-story__header {
    position: relative;
    width: 100%;
}

.pl-customer-story__body {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    /* Kit mobile */
    .pl-customer-story {
        max-width: 100%;
    }
    .pl-customer-story__body {
        padding: var(--wp--preset--spacing--5-x) var(--wp--preset--spacing--5-x)
            var(--wp--preset--spacing--5-x) var(--wp--preset--spacing--5-x) !important;
    }
}

/* Customer Story Highlight
   Band styling (border, radius, background, padding, flex layout) lives on block
   attributes in patterns/customer-story-highlight-sophos.php — not on a class.
   The band width is the constrained content column (its .pl-cs-index parent), and
   it stacks on mobile via flexWrap. Only the exception-list rules below need a
   class hook (circular avatar mask, the ::before quote mark, responsive tweaks). */

/* Avatar */
.pl-customer-story-highlight__avatar {
    flex-shrink: 0;
    margin: 0;
}
.pl-customer-story-highlight__avatar img {
    width: var(--wp--preset--spacing--60-x);
    height: var(--wp--preset--spacing--60-x);
    border-radius: 50%;
    object-fit: cover;
    /* The portrait is a transparent cutout; this fills the circle behind it
       (matches the Figma avatar background). Swap the token to match the exact
       Figma fill if needed. */
    background-color: var(--wp--preset--color--slate-800);
    display: block;
}

/* Content */
.pl-customer-story-highlight__content {
    flex: 1 1 0;
    min-width: 0;
}

/* Quote mark */
.pl-customer-story-highlight__texts {
    position: relative;
    padding-left: calc(
        var(--wp--preset--spacing--12-x) + var(--wp--preset--spacing--6-x)
    );
}
.pl-customer-story-highlight__texts::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--wp--preset--spacing--12-x);
    height: var(--wp--preset--spacing--8-x);
    font-family: var(--wp--preset--font-family--gilmer);
    font-size: var(--wp--preset--font-size--h-1);
    line-height: 0.85;
    color: var(--wp--preset--color--blue-400);
}

/* Customer logo */
.pl-customer-story-highlight__logo {
    margin: 0;
}
.pl-customer-story-highlight__logo img {
    width: var(--wp--preset--spacing--30-x);
    height: auto;
    display: block;
}

@media (max-width: 767px) {
    /* Mobile — stack the band (photo over text) and tighten the gap. The band
       carries flexWrap as a block attribute, but its fixed-width avatar keeps
       both on one line until very narrow widths, so force the column here. The
       band has no styling class of its own, so it is matched structurally. */
    .pl-cs-index .wp-block-group:has(> .pl-customer-story-highlight__content) {
        flex-direction: column;
        align-items: stretch;
        gap: var(--wp--preset--spacing--8-x);
    }
    .pl-customer-story-highlight__avatar img {
        width: var(--wp--preset--spacing--80-x);
        height: var(--wp--preset--spacing--80-x);
        margin: 0 auto;
    }
    .pl-customer-story-highlight__texts {
        padding-left: 0;
    }
    .pl-customer-story-highlight__texts::before {
        position: static;
        display: block;
        margin-bottom: var(--wp--preset--spacing--3-x);
    }
    /* Figma mobile spec */
    .pl-customer-story-highlight__actions,
    .pl-customer-story-highlight__actions .wp-block-button,
    .pl-customer-story-highlight__actions .wp-block-button__link {
        width: 100%;
    }
}

/* Customer Story — Single page */

/* Customer logo in the header */
.pl-cs__logo {
    margin: 0;
}
.pl-cs__logo img {
    height: var(--wp--preset--spacing--12-x);
    width: auto;
    max-width: 240px;
    display: block;
    object-fit: contain;
}

/* Location row */
.pl-cs__location {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--2-x);
    margin: 0;
}
.pl-cs__location::before {
    content: "";
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E1E4E8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11Z'/><circle cx='12' cy='10' r='2.5'/></svg>");
}

/* Integration brand marks */
.pl-cs__integration {
    margin: 0;
}
.pl-cs__integration img {
    height: 36px;
    width: auto;
    max-width: 160px;
    display: block;
    object-fit: contain;
}

/* Two-column body */
/* Body rhythm */
.pl-cs__body > * {
    margin-block: revert;
}

.pl-cs__sidebar {
    position: sticky;
    top: var(--wp--preset--spacing--6-x);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--12-x);
}

/* Sidebar testimonial card */
.pl-cs__quote-card {
    position: relative;
}
.pl-cs__quote-card::before {
    content: "\201C";
    display: block;
    font-family: var(--wp--preset--font-family--gilmer);
    font-size: var(--wp--preset--font-size--h-1);
    line-height: 0.6;
    color: var(--wp--preset--color--blue-400);
}
.pl-cs__quote,
.pl-cs__quote-author {
    margin: 0;
}

/* SqlDBM CTA card */
.pl-cs__cta-title {
    margin: 0;
    text-align: center;
}
.pl-cs__cta-logo {
    margin: 0;
}
.pl-cs__cta-logo img {
    height: 20px;
    width: auto;
    display: block;
}

@media (max-width: 781px) {
    .pl-cs__sidebar {
        position: static;
        flex-basis: auto !important;
    }
}

/* Section: Data Challenges */

/* Compare card outer */
.pl-compare-card {
    border: 1px solid var(--wp--preset--color--blue-800);
    background-color: rgba(11, 12, 15, 0.01);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 -40px 80px 0 rgba(31, 77, 158, 0.16);
    overflow: hidden;
}

/* Brand bar */
.pl-compare-card__brand {
    width: 100%;
    border-bottom: 1px solid var(--wp--preset--color--blue-800);
}
.pl-compare-card__logo {
    margin: 0;
}
.pl-compare-card__logo img {
    width: 104px;
    height: auto;
    display: block;
}

/* Two-column body */
.pl-compare-card__body {
    width: 100%;
}
.pl-compare-col {
    flex: 1 1 0;
    max-width: 408px;
    min-width: 0;
}

/* Row card */
.pl-compare-row {
    width: 100%;
    box-sizing: border-box;
}
.pl-compare-row__icon {
    margin: 0;
}

/* Block style */
.is-style-pl-compare-row-challenge {
    background-color: var(--wp--preset--color--gray-900);
    border: 1px solid var(--wp--preset--color--slate-900);
    border-radius: 12px;
}
/* Card icons render white */
.pl-compare-row__icon img {
    filter: brightness(0) invert(1);
}

/* Block style */
.is-style-pl-compare-row-benefit {
    background-color: var(--wp--preset--color--gray-900);
    border: 1px solid var(--wp--preset--color--blue-800);
    border-radius: 12px;
}

/* Text-card base layout primitives */
.pl-compare-row__text {
    width: 90%;
    box-sizing: border-box;
}

/* Block style */
.is-style-pl-compare-row-text-challenge {
    background-image: linear-gradient(
        185deg,
        var(--wp--preset--color--slate-900) 41.17%,
        var(--wp--preset--color--gray-900) 287.31%
    );
    border: 1px solid var(--wp--preset--color--slate-800);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    margin: 0;
    padding: var(--wp--preset--spacing--4-x);
    max-width: calc(100% - var(--wp--preset--spacing--8-x));
}

/* Block style */
.is-style-pl-compare-row-text-benefit {
    background-image: linear-gradient(335deg, #0f1d35 -81.87%, #2257b5 111.12%);
    border: 1px solid var(--wp--preset--color--blue-800);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    margin: 0;
    padding: var(--wp--preset--spacing--4-x);
    max-width: calc(100% - var(--wp--preset--spacing--8-x));
}

/* Equal card height */
.pl-compare-row__text {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile */
@media (max-width: 767px) {
    .pl-compare-card__body {
        flex-direction: column !important;
        justify-content: flex-start;
        /* Trim the 48px (12x) inner gutter to the section's mobile gutter so the
           compare card isn't over-padded on small screens. !important beats the
           inline padding the block attribute emits (desktop value stays 12x). */
        padding-left: var(--wp--custom--grid--padding-mobile) !important;
        padding-right: var(--wp--custom--grid--padding-mobile) !important;
    }
    .pl-compare-col {
        max-width: none;
        flex-basis: auto;
        /* Stacked columns size to content otherwise (cross-axis isn't stretched),
           leaving the right half blank; force each to fill the card width. */
        width: 100%;
    }
    .pl-compare-row__text {
        max-width: 100%;
    }
    /* The wide data-flow graphic collapses to a sliver at mobile width; scale
       it up and pull it up so the lines read at a usable size on small screens. */
    .pl-section--data-challenges::before {
        background-size: 320% 100%;
        background-position: center -400px;
    }
    /* Fixed-columnCount grids have no responsive attribute, so they stay multi-up
       and overflow / clip on phones. Force a single column. Plugins & Integrations
       (3-up) and the changelog entry cards (2-up). */
    .pl-integration-grid,
    .pl-changelog-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Section: One Platform */

/* Outer chrome card */
.pl-platform-card {
    background-color: var(--wp--preset--color--gray-900);
    border: 1px solid var(--wp--preset--color--blue-800);
    border-radius: var(--wp--custom--border-radius--6-x);
    overflow: hidden;
    box-shadow: 0 -14px 134px 0 var(--wp--preset--color--gray-900);
}

/* Head region */
.pl-platform-card__head {
    border-bottom: 1px dotted var(--wp--preset--color--blue-800);
}
.pl-platform-card__footer {
    border-top: 1px dotted var(--wp--preset--color--blue-800);
}

.pl-platform-card__title {
    padding-left: max(0px, calc((100% - 468px) / 2));
    padding-right: max(0px, calc((100% - 468px) / 2));
}
.pl-platform-card__subhead {
    padding-left: max(0px, calc((100% - 690px) / 2));
    padding-right: max(0px, calc((100% - 690px) / 2));
}
.pl-platform-card__footer-title {
    padding-left: max(0px, calc((100% - 880px) / 2));
    padding-right: max(0px, calc((100% - 880px) / 2));
}

.pl-feature-card {
    border-right: 1px dotted var(--wp--preset--color--blue-800);
    border-bottom: 1px dotted var(--wp--preset--color--blue-800);
}

.pl-feature-card__heading {
    max-width: 260px;
}
/* Last column → no right border */
.pl-feature-card:nth-child(even) {
    border-right: 0;
}
/* Bottom row */
.pl-feature-card:nth-child(n + 3) {
    border-bottom: 0;
}

@media (max-width: 767px) {
    .pl-platform-card__grid {
        grid-template-columns: 1fr !important;
    }
    .pl-feature-card,
    .pl-feature-card:nth-child(even) {
        border-right: 0;
    }

    .pl-feature-card {
        border-bottom: 1px dotted var(--wp--preset--color--blue-800);
    }
    .pl-feature-card:last-child {
        border-bottom: 0;
    }
}

/* Section: Intelligent Modeling */

/* AI demo card outer */
.pl-modeling-card {
    background-color: rgba(11, 12, 15, 0.01);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    overflow: hidden;
}
.pl-modeling-card__left {
    flex: 0 0 420px;
    max-width: 420px;
}
.pl-modeling-card__demo {
    flex: 1 1 0;
    min-width: 0;
}

/* Product cards grid */
.pl-product-card__media {
    overflow: hidden;
}
.pl-product-card__mockup-img img {
    display: block;
    width: 100%;
    height: auto;
    border-top-left-radius: var(--wp--custom--border-radius--3-x);
}

@media (max-width: 1023px) {
    /* Tablet+ */
    .pl-modeling-card {
        flex-direction: column !important;
        gap: var(--wp--preset--spacing--12-x) !important;
    }
    .pl-modeling-card__left {
        flex: 1 1 100%;
        max-width: none;
        padding-right: var(--wp--preset--spacing--16-x) !important;
    }

    .pl-modeling-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {
    /* Stacked on mobile, the AI demo pane sits flush to the card's left border,
       while the product mockup panes are inset 8x (via .pl-product-card__media's
       padding). Match that inset here. !important beats WP's flex-layout reset
       `.is-layout-flex > :is(*, div) { margin: 0 }`, which out-specifies a plain
       class selector. */
    .pl-modeling-card__demo {
        margin-left: var(--wp--preset--spacing--16-x) !important;
    }
}

/* Section: Trusted By */

/* Header row layout */

@media (max-width: 767px) {
    /* Stack the header at mobile, centred: title text + the CTA button both
       centre (desktop keeps title-left / button-right via the 50/50 columns). */
    .pl-trusted-by__head {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .pl-trusted-by__head .pl-trusted-by__title {
        text-align: center;
    }
    .pl-trusted-by__head .pl-trusted-by__actions {
        justify-content: center;
    }
}

/* Section: Keep Data Aligned */

.pl-aligned__head .pl-aligned__title {
    flex: 1 1 0;
    min-width: 0;
}

/* Body row */
.pl-aligned__body .pl-aligned__features {
    flex: 0 0 360px;
    max-width: 360px;
}
/* Stretch every card to the column width. WP's vertical flex defaults to
   align-items:flex-start (cards size to content, so the collapsed ones go
   ragged); there's no "stretch" justifyContent option to express this as a
   block attribute. */
.pl-feature-list {
    align-items: stretch;
}
.pl-aligned__body .pl-aligned__mockup {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

/* Keep Data Aligned */
.pl-feature-item__header {
    cursor: pointer;
}
.pl-js .pl-feature-item:not(.is-active) .pl-feature-item__panel {
    display: none;
}
.pl-js .pl-kda__media-item:not(.is-active) {
    display: none;
}

.pl-kda__media-item {
    overflow: hidden;
}
.pl-kda__media-item img {
    display: block;
    width: 100%;
    height: auto;
}
/* Match the intelligent-modeling mockup treatment: the screenshot sits on a blue
   gradient panel, inset from the top-left and bleeding off the bottom-right. The
   screenshot SVGs carry their own blue window border on all four sides; the panel
   is bounded shorter/narrower than the image and clips it, so the bottom + right
   border bleed off and only the framed top-left reads. (overflow clip and the
   intentional overflow bleed aren't block attributes — exception trigger #4.) */
.pl-kda__media-mockup {
    overflow: hidden;
    aspect-ratio: 3 / 2;
}
.pl-kda__media-mockup img {
    width: calc(100% + 1px);
    max-width: none;
}

@media (max-width: 1023px) {
    /* Tablet + mobile */
    .pl-aligned__head,
    .pl-aligned__body {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .pl-aligned__body .pl-aligned__features {
        flex: 1 1 auto;
        max-width: none;
    }
}

@media (max-width: 767px) {
    /* Stacked header centred on mobile: title + subhead both centre (inherited),
       matching the desktop-left layout only when side-by-side. */
    .pl-aligned__head {
        text-align: center;
    }
}

/* Section: Data Ecosystem */

/* Section backdrop */
.pl-section--data-ecosystem {
    background-image: linear-gradient(177.33deg, #0b0c0f 63.56%, #0c1320 93.7%);
}

/* Features section */
.pl-section--intelligent-modeling > * + * {
    margin-block-start: 64px !important;
}

/* Changelog release card */
.pl-changelog-card__body {
    padding-top: var(--wp--preset--spacing--9-x) !important;
    padding-bottom: 52px !important;
    gap: var(--wp--preset--spacing--8-x) !important;
}
.pl-changelog-card .wp-block-heading {
    font-size: var(--wp--preset--font-size--h-5) !important;
}

p.pl-changelog-card__month,
.pl-changelog-card p.is-style-pl-badge-gray-m {
    padding-left: 16px;
    padding-right: 16px;
}

/* Plugins & Integrations */
.pl-integrations-index > p {
    margin-block-start: var(--wp--preset--spacing--4-x);
}
.pl-integrations-index > .wp-block-group.is-layout-grid {
    margin-block-start: var(--wp--preset--spacing--6-x);
}

/* Changelog */
.pl-changelog-index > .wp-block-group.is-layout-grid {
    margin-block-start: var(--wp--preset--spacing--6-x);
}

/* Header eyebrow icon */
.pl-ecosystem__icon {
    margin: 0 auto;
}

.pl-ecosystem__dots {
    margin: 0 auto;
}

.pl-ecosystem__chrome img,
.pl-ecosystem__base img {
    display: block;
    width: 100%;
    height: auto;
}

.pl-ecosystem__grid,
.pl-ecosystem__footer {
    width: 100%;
}

/* 3-4-3 tile rows */
.pl-ecosystem__row {
    width: 100%;
}

.pl-ecosystem__panel {
    background-image: radial-gradient(
        ellipse 60% 42% at 50% 46%,
        rgba(45, 47, 56, 0.36) 0%,
        rgba(45, 47, 56, 0) 72%
    );
}

.pl-ecosystem__connect {
    padding-left: max(0px, calc((100% - 640px) / 2));
    padding-right: max(0px, calc((100% - 640px) / 2));
}

/* Title is wide-centered */
.pl-ecosystem__title {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.pl-ecosystem__subhead {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Partner-logo tiles */
.pl-partner-tile {
    /* Border */
    width: 100%;
    max-width: 240px;
    margin-inline: auto;
}
.pl-partner-tile__logo {
    margin: 0;
}
.pl-partner-tile__logo img {
    display: block;
    margin: 0 auto;
    max-width: 80%;
    max-height: var(--wp--preset--spacing--12-x);
    height: auto;
}

/* Connector icon row pill */
.pl-connector-row {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.pl-connector-icon {
    margin: 0;
}

/* Section: Trust & Partners */

/* Subsection A */
.pl-trust__card {
    width: 100%;
    /* Border */
    background:
        linear-gradient(
            98deg,
            rgba(11, 12, 15, 0.24) -0.68%,
            rgba(146, 179, 255, 0.24) 39%,
            rgba(11, 12, 15, 0.24) 78.68%
        ),
        linear-gradient(104deg, #283ee4 6.72%, #185cef 45.65%, #19289b 85.74%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    position: relative;
}

.pl-trust__badge {
    margin-left: auto;
    margin-right: auto;
}

.pl-trust {
    position: relative;
}
.pl-trust::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -197px;
    transform: translateX(-50%);
    width: min(1152px, 100%);
    aspect-ratio: 1152 / 197;
    background-image: url("assets/backgrounds/section_6_shadow_security.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
}

/* Subsection B */
.pl-brand-card {
    overflow: hidden;
    width: 100%;
}
.pl-brand-card--dark {
    background-color: var(--wp--preset--color--gray-900);
}
.pl-brand-card--light {
    background-image: linear-gradient(
        14deg,
        #e9e9e9 21%,
        #ffffff 47%,
        #f5f6f9 74%
    );
}
/* Branded card backgrounds */
.pl-brand-card--snowflake,
.pl-brand-card--google {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.pl-brand-card--snowflake {
    background-image: url(assets/images/card-bg-snowflake.jpg);
}
.pl-brand-card--google {
    background-image: url(assets/images/card-bg-google.jpg);
}
.pl-partners__head {
    width: 100%;
}
.pl-trust__title {
    width: 100%;
}
.pl-brand-card__top {
    width: 100%;
}
.pl-brand-card__badge {
    margin: 0;
}
/* Wide partner badge */
.pl-brand-card__badge--wide img {
    height: auto;
}
.pl-brand-card__body {
    width: 100%;
    border-top-left-radius: var(--wp--custom--border-radius--4-x);
}

@media (max-width: 767px) {
    /* (No __top override — the brand logo + partner badge stay on one row via the
       group's own flex/space-between block layout, same as desktop.) */
    .pl-brand-card__body {
        padding: var(--wp--preset--spacing--6-x) var(--wp--preset--spacing--6-x)
            var(--wp--preset--spacing--6-x) var(--wp--preset--spacing--6-x) !important;
    }
}

/* Header navigation — wp:navigation block with 5 */

.pl-header .wp-block-navigation-item__content[href="#why-sqldbm"]::after,
.pl-header .wp-block-navigation-item__content[href="#solutions"]::after,
.pl-header .wp-block-navigation-item__content[href="#resources"]::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    vertical-align: -3px;
    transition: transform 120ms ease;
}

.pl-header
    .wp-block-navigation-item.is-mm-open
    .wp-block-navigation-item__content::after {
    transform: rotate(180deg);
}

/* Hover state on nav items */
.pl-header .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--slate-100);
}

/* Logo block */
.pl-header__logo {
    margin: 0;
    line-height: 0;
}

.pl-header__logo img {
    display: block;
}

/* Mega menu */

.pl-megamenu {
    position: relative;
    z-index: 50;
}

html:has(body.pl-megamenu-open) {
    overflow: hidden;
}

.pl-mm-panel {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    background: var(--wp--preset--color--gray-900);
    border-bottom: 1px solid var(--wp--preset--color--slate-800);
    box-shadow: 0 34px 74px 0 rgba(0, 0, 0, 0.25);
    z-index: 50;
}

.pl-mm-panel {
    display: none;
}

.pl-mm-panel.is-mm-open {
    display: block;
}

.pl-mm-panel__layout {
    width: 100%;
}

.pl-mm-panel__main {
    flex: 1 1 0;
    min-width: 0;
}

.pl-mm-panel__sidebar {
    width: 400px;
    flex: 0 0 400px;
}

.pl-mm-panel__section-title {
    margin: 0;
}

.pl-mm-panel__grid {
    width: 100%;
}

.pl-mm-panel__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pl-mm-panel__links li {
    margin: 0;
}

.pl-mm-panel__links a {
    color: inherit;
    text-decoration: none;
    transition: color 120ms ease;
}

.pl-mm-panel__links a:hover {
    color: var(--wp--preset--color--slate-100);
}

.pl-mm-panel__link-external::after {
    content: " ↗";
    color: var(--wp--preset--color--slate-500);
    font-size: 0.85em;
}

/* Card visual chrome */
.pl-mm-icon-card,
.pl-mm-text-card {
    position: relative;
    min-height: 62px;
    box-sizing: border-box;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

/* Whole-card click target */
.pl-mm-card-link {
    color: inherit;
    text-decoration: none;
}

.pl-mm-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.pl-mm-icon-card:hover,
.pl-mm-text-card:hover {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--wp--preset--color--slate-700) !important;
    cursor: pointer;
}

/* Sidebar header row */
.pl-mm-panel__sidebar > .wp-block-group:first-child {
    width: 100%;
}

.pl-mm-icon-card__icon {
    display: inline-flex;
    color: var(--wp--preset--color--slate-400);
    flex-shrink: 0;
    margin: 0;
    width: 32px;
    height: 32px;
}

.pl-mm-icon-card__icon img {
    display: block;
    width: 32px;
    height: 32px;
}

/* Mobile drawer: the integration strip now wraps (flexWrap block attr) so the
   brand icons can grow from 32px to a legible 40px instead of being crammed
   into one row. !important beats the inline 32px the image block emits. */
@media (max-width: 767px) {
    .pl-mm-integrations__icons img {
        width: 40px !important;
        height: 40px !important;
    }
    /* Keep "See all →" on one line beside the wrapping icon grid (don't let it
       get squeezed to "See / all"). */
    .pl-mm-integrations > .wp-block-buttons {
        flex-shrink: 0;
    }
    .pl-mm-integrations .wp-block-button__link {
        white-space: nowrap;
    }
}

.pl-mm-cta-card {
    text-align: center;
}

.pl-mm-advisor-card__avatar {
    flex-shrink: 0;
    line-height: 0;
    margin: 0;
    width: 40px;
    height: 40px;
}

.pl-mm-advisor-card__avatar img {
    display: block;
    width: 40px;
    height: 40px;
}

.pl-mm-advisor-card__name {
    margin: 0;
}

/* Blog article body (single.html post-content */
.pl-article-body > * {
    margin-block: revert;
}

.pl-article-body {
    --pl-reading-width: 768px;
}

.pl-article-body > :not(figure):not(img) {
    max-width: var(--pl-reading-width);
}

.pl-article-body > figure,
.pl-article-body > img {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0;
}

.pl-article-body figure img,
.pl-article-body > img {
    display: block;
    width: 100%;
    height: auto;
}

.pl-meta-pill {
    line-height: 1;
    white-space: nowrap;
}

.pl-meta-pill a {
    color: var(--wp--preset--color--slate-300);
    text-decoration: none;
}

/* Blog index card (templates/blog.html post-template) */
.pl-blog-card {
    overflow: hidden;
}

.pl-blog-card .wp-block-post-featured-image,
.pl-blog-card .wp-block-post-featured-image img {
    width: 100%;
}

.pl-blog-card .wp-block-post-featured-image img {
    object-fit: cover;
}

.pl-blog-card__title a {
    color: var(--wp--preset--color--white);
    text-decoration: none;
}

.pl-blog-card__titlerow > .wp-block-post-title {
    flex: 1 1 auto;
    min-width: 0;
}

.pl-blog-card__pill {
    flex: 0 0 auto;
    white-space: nowrap;
    line-height: 1;
}

.pl-blog-card__excerpt p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.pl-blog-card__more {
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

/* Marketing — Hero + provider logos */
.pl-mkt-hero__logos {
    align-items: center;
}
.pl-mkt-hero__logo {
    margin: 0;
}
.pl-mkt-hero__logo img {
    height: 40px;
    width: auto;
    display: block;
}

/* Marketing — Feature grid */
.pl-mkt-feature__grid {
    margin-top: var(--wp--preset--spacing--12-x);
}
.pl-mkt-card {
    min-height: 240px;
}
/* Icon tile */
.pl-mkt-card__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--wp--custom--border-radius--2-x);
    background-color: var(--wp--preset--color--blue-900);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 26px;
}
.pl-mkt-card__icon--grid {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235090FF' stroke-width='1.6'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M3 9h18M3 15h18M9 3v18M15 3v18'/></svg>");
}
.pl-mkt-card__icon--nodes {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235090FF' stroke-width='1.6'><circle cx='12' cy='5' r='2.5'/><circle cx='5.5' cy='17' r='2.5'/><circle cx='18.5' cy='17' r='2.5'/><path d='M10.5 7L6.8 14.8M13.5 7l3.7 7.8M7.8 17h8.4'/></svg>");
}
.pl-mkt-card__icon--search {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235090FF' stroke-width='1.6'><rect x='3' y='4' width='18' height='13' rx='2'/><circle cx='11' cy='10' r='3'/><path d='M13.5 12.5L16 15'/></svg>");
}
.pl-mkt-card__icon--curve {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235090FF' stroke-width='1.6'><rect x='3' y='4' width='18' height='16' rx='2'/><path d='M6 14c2 0 2.5-4 4.5-4s2.5 4 4.5 4 2.5-3 2.5-3' stroke-linecap='round'/></svg>");
}
.pl-mkt-card__icon--person {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235090FF' stroke-width='1.6'><circle cx='12' cy='8' r='3.2'/><path d='M5.5 19a6.5 6.5 0 0 1 13 0' stroke-linecap='round'/></svg>");
}
.pl-mkt-card__icon--book {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235090FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6.5C10.5 5.5 8 5 5 5v12c3 0 5.5.5 7 1.5'/><path d='M12 6.5C13.5 5.5 16 5 19 5v12c-3 0-5.5.5-7 1.5'/><path d='M12 6.5v12'/></svg>");
}
.pl-mkt-card__icon--file-plus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235090FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5'/><path d='M12 12.5v4M10 14.5h4'/></svg>");
}
.pl-mkt-card__label {
    margin: 0;
}
@media (max-width: 1023px) {
    .pl-mkt-feature__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .pl-mkt-feature__grid {
        grid-template-columns: 1fr !important;
    }
}

/* Marketing — Related materials */
.pl-mkt-related-card {
    flex: 1 1 0;
    max-width: 368px;
}
@media (max-width: 600px) {
    .pl-mkt-related-card {
        max-width: none;
        flex-basis: 100%;
    }
}

/* Marketing — Trusted by + Enterprise CTA */
.pl-mkt-close {
    border-top: 2px solid var(--wp--preset--color--blue-600);
    border-bottom: 2px solid var(--wp--preset--color--blue-600);
}
/* Logo wall */
.pl-mkt-trusted__logo {
    width: 200px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pl-mkt-trusted__logo img {
    max-height: 44px;
    width: auto;
    max-width: 100%;
}
/* CTA card */
.pl-mkt-cta {
    background-image: linear-gradient(
        138deg,
        #2d2f38 3%,
        #1c1d20 35%,
        #1c1e24 67%
    );
}
@media (max-width: 600px) {
    .pl-mkt-trusted__logo {
        width: 140px;
    }
}

/* Marketing — Feature showcase */
/* Natural size, capped to the column, centred. These graphics are small PNGs
   (e.g. ~111px); width:100% upscaled them ~6x and blurred them on every width.
   width:auto never upscales (stays sharp); max-width:100% still lets a genuinely
   large mockup fill the column. */
.pl-mkt-showcase__media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 16px;
}

/* Marketing — SqlDBM AI hero */
.pl-ai-hero__card {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

.pl-ai-hero__card > .pl-ai-hero__prompt {
    width: 100%;
}

.pl-ai-hero__prompt > .wp-block-paragraph {
    flex: 1 1 auto;
}
/* Keep the Send button from being squeezed by the prompt text (which would wrap
   its label to S/e/n/d on narrow screens): hold its width and its single line. */
.pl-ai-hero__prompt > .wp-block-buttons {
    flex-shrink: 0;
}
.pl-ai-hero__prompt .wp-block-button__link {
    white-space: nowrap;
}
/* Pricing */
.pl-db-logo {
    margin: 0;
    flex: 0 0 auto;
}
.pl-db-logo img {
    display: block;
    height: 24px;
    width: auto;
    max-width: 28px;
    object-fit: contain;
}
/* Multimedia */
.pl-video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--wp--preset--color--gray-900, #0b0c0f);
}
.pl-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Competitor "vs" comparison table */
.pl-compare-table {
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.pl-compare-table table {
    width: 100%;
    border-collapse: collapse;
}
.pl-compare-table th,
.pl-compare-table td {
    border: 1px solid var(--wp--preset--color--slate-800);
    padding: 14px 18px;
    text-align: left;
    vertical-align: top;
}
.pl-compare-table thead th {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-weight: 600;
}
.pl-compare-table tbody td {
    color: var(--wp--preset--color--slate-300);
}
.pl-compare-table tbody td:first-child {
    color: var(--wp--preset--color--slate-100);
    font-weight: 600;
}
.pl-compare-table tbody td:nth-child(2) {
    color: var(--wp--preset--color--slate-100);
    background: rgba(43, 122, 255, 0.06);
}
/* Wide multi-tool comparison */
.pl-cmp-wide {
    overflow-x: auto;
}
.pl-cmp-wide table {
    min-width: 820px;
}
.pl-compare-table .pl-cmp-cat td {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.pl-cmp-mark {
    font-weight: 700;
    margin-right: 4px;
}
.pl-cmp-mark.is-yes {
    color: #34d399;
}
.pl-cmp-mark.is-no {
    color: #f87171;
}
.pl-cmp-mark.is-partial {
    color: var(--wp--preset--color--slate-400);
}
/* Competitor "vs" pull quote */
.pl-vs-quote {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-left: 0;
    padding: 0;
}
.pl-vs-quote cite {
    display: block;
    margin-top: 12px;
    color: var(--wp--preset--color--slate-400);
    font-style: normal;
}
/* Feature-card icon */
.pl-ai-card__icon {
    margin: 0;
}
.pl-ai-card__icon img {
    height: 48px;
    width: auto;
}
/* Centred product mockup */
.pl-ai-mockup {
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.pl-ai-mockup img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}
/* Security */
.pl-sec-cert img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Strategic advisors */
.pl-advisor__photo {
    margin: 0;
}
.pl-advisor__photo img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

/* Competitor-comparison pages */
.pl-sqldbm-plus .wp-block-table {
    overflow-x: auto;
}
.pl-sqldbm-plus .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    color: var(--wp--preset--color--slate-200);
}
.pl-sqldbm-plus .wp-block-table th,
.pl-sqldbm-plus .wp-block-table td {
    border: 1px solid var(--wp--preset--color--slate-800);
    padding: 12px 16px;
    text-align: left;
}
.pl-sqldbm-plus .wp-block-table thead th,
.pl-sqldbm-plus .wp-block-table tr:first-child th {
    background: var(--wp--preset--color--gray-800);
    color: var(--wp--preset--color--slate-100);
    font-weight: 600;
}

/* Marketing Page (simple) — */
.pl-marketing .wp-block-post-content > * {
    margin-block-start: var(--wp--preset--spacing--6-x);
}
.pl-marketing .wp-block-post-content > *:first-child {
    margin-block-start: 0;
}

.pl-marketing .wp-block-post-content > h2 {
    margin-block-start: var(--wp--preset--spacing--20-x);
    font-family: var(--wp--preset--font-family--gilmer);
    font-size: var(--wp--preset--font-size--h-2);
    font-weight: 700;
    color: var(--wp--preset--color--white);
}
.pl-marketing .wp-block-post-content > h3 {
    margin-block-start: var(--wp--preset--spacing--12-x);
    font-family: var(--wp--preset--font-family--gilmer);
    font-size: var(--wp--preset--font-size--h-4);
    font-weight: 700;
    color: var(--wp--preset--color--slate-100);
}

/* Lead heading */
.pl-marketing .wp-block-post-content > h2:first-of-type {
    margin-block-start: 0;
    font-size: var(--wp--preset--font-size--h-1);
}

.pl-marketing .wp-block-post-content :where(p, li) {
    color: var(--wp--preset--color--slate-300);
    max-width: 760px;
}

/* Media */
.pl-marketing .wp-block-post-content :where(figure, img) {
    margin-inline: 0;
}
.pl-marketing .wp-block-post-content :where(figure.wp-block-image img, img) {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Buttons — Antonio's UI Kit */

.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--2-x);
    min-height: 40px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

/* Primary M Default */
.wp-block-button > .wp-block-button__link[aria-disabled="true"],
.wp-block-button > .wp-block-button__link:disabled {
    opacity: 0.64;
    pointer-events: none;
}

.is-style-pl-primary-l > .wp-block-button__link,
.is-style-pl-secondary-l > .wp-block-button__link {
    min-height: 48px;
    padding-left: var(--wp--preset--spacing--6-x) !important;
    padding-right: var(--wp--preset--spacing--6-x) !important;
    font-size: var(--wp--preset--font-size--md) !important;
    font-weight: 500 !important;
    line-height: 1.75 !important;
}

.is-style-pl-primary-s > .wp-block-button__link,
.is-style-pl-secondary-s > .wp-block-button__link {
    min-height: 32px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: var(--wp--preset--spacing--3-x) !important;
    padding-right: var(--wp--preset--spacing--3-x) !important;
}

/* Secondary variants */
.is-style-pl-secondary-s > .wp-block-button__link,
.is-style-pl-secondary-m > .wp-block-button__link,
.is-style-pl-secondary-l > .wp-block-button__link {
    background-color: rgba(11, 12, 15, 0.24) !important;
    color: var(--wp--preset--color--slate-100) !important;
    border: 1px solid var(--wp--preset--color--slate-600) !important;
}
.is-style-pl-secondary-s > .wp-block-button__link:hover,
.is-style-pl-secondary-m > .wp-block-button__link:hover,
.is-style-pl-secondary-l > .wp-block-button__link:hover {
    background-color: rgba(11, 12, 15, 0.48) !important;
    border-color: var(--wp--preset--color--slate-500) !important;
}
.is-style-pl-secondary-s > .wp-block-button__link:active,
.is-style-pl-secondary-m > .wp-block-button__link:active,
.is-style-pl-secondary-l > .wp-block-button__link:active {
    background-color: var(--wp--preset--color--gray-800) !important;
    border-color: var(--wp--preset--color--slate-600) !important;
}

/* Link variants */
.is-style-pl-link-m > .wp-block-button__link,
.is-style-pl-link-s > .wp-block-button__link {
    background-color: transparent !important;
    color: var(--wp--preset--color--blue-500) !important;
    padding: 0 !important;
    min-height: 0;
    border-radius: 0 !important;
    gap: 4px;
}
.is-style-pl-link-m > .wp-block-button__link:hover,
.is-style-pl-link-s > .wp-block-button__link:hover {
    background-color: transparent !important;
    color: var(--wp--preset--color--blue-300) !important;
}
.is-style-pl-link-m > .wp-block-button__link {
    font-size: var(--wp--preset--font-size--md) !important;
    line-height: 1.75 !important;
}
.is-style-pl-link-s > .wp-block-button__link {
    font-size: var(--wp--preset--font-size--sm) !important;
    line-height: 1.6 !important;
}

/* Header (parts/header.html) — Desktop/Dark/Default */

/* Sticky chrome */
.pl-chrome {
    position: sticky;
    top: 0;
    z-index: 60;
}

.pl-chrome > header.wp-block-template-part {
    background-color: rgba(11, 12, 15, 0.48);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.pl-header {
    min-height: 100px;
    position: relative;
    z-index: 60;

    background-color: transparent !important;
}

.pl-chrome > header.wp-block-template-part > .wp-block-group {
    padding-left: 0;
    padding-right: 0;
}

.pl-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Desktop only */
@media (min-width: 1024px) {
    .pl-header {
        max-width: min(
            var(--wp--style--global--content-size, 1280px) - 2 *
                var(--wp--custom--grid--padding-desktop),
            100% - 2 * var(--wp--preset--spacing--16-x)
        );
        margin-left: auto;
        margin-right: auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Align the mega-menu dropdown content to the header's left/right edges.
       .pl-mm-panel__inner already carries the header's min-gutter as padding
       (--wp--preset--spacing--16-x) but has no max-width, so on wide screens its
       content spreads far wider than the header's 1152 box. Cap it at that box
       PLUS its own padding and centre it: the content inside the padding then
       equals the header content box at every width. (1152 = 1280 content size
       minus the 2×64px desktop grid padding the header subtracts.) */
    .pl-mm-panel__inner {
        max-width: calc(
            var(--wp--style--global--content-size, 1280px) - 128px + 2 *
                var(--wp--preset--spacing--16-x)
        );
        margin-left: auto;
        margin-right: auto;
    }
}

.pl-header__logo {
    display: inline-flex;
    color: var(--wp--preset--color--slate-100);
    line-height: 0;
}

.pl-header__logo:hover {
    color: var(--wp--preset--color--white);
}

.wp-block-navigation
    .wp-block-navigation-item__content[href="#why-sqldbm"]::after,
.wp-block-navigation
    .wp-block-navigation-item__content[href="#solutions"]::after,
.wp-block-navigation
    .wp-block-navigation-item__content[href="#resources"]::after,
.wp-block-navigation
    .wp-block-navigation-item.is-dropdown
    > .wp-block-navigation-item__content::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    vertical-align: -3px;
}

/* Footer (parts/footer.html) */

.pl-footer {
    border-top: 1px solid var(--wp--preset--color--slate-800);
}

/* Six equal-width columns */
@media (max-width: 1023px) {
    .pl-footer .pl-footer__cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .pl-footer .pl-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pl-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pl-footer__list a {
    color: inherit;
    text-decoration: none;
}
.pl-footer__list a:hover,
.pl-footer__list a:focus-visible {
    color: var(--wp--preset--color--slate-300);
    text-decoration: underline;
}

/* Competitor / alternative pages (pl-vs) */
.pl-vs .wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    color: var(--wp--preset--color--slate-100);
}
.pl-vs .wp-block-table thead {
    border-bottom: 1px solid var(--wp--preset--color--slate-700);
}
.pl-vs .wp-block-table th {
    text-align: left;
    font-weight: 700;
    padding: var(--wp--preset--spacing--3-x) var(--wp--preset--spacing--4-x);
    color: var(--wp--preset--color--white);
}
.pl-vs .wp-block-table td {
    padding: var(--wp--preset--spacing--3-x) var(--wp--preset--spacing--4-x);
    border-top: 1px solid var(--wp--preset--color--slate-800);
    vertical-align: top;
}

/* Mega menu — desktop-only chrome that's HIDDEN at */

/* Desktop view */
@media (min-width: 1024px) {
    .pl-mm-mobile-links,
    .pl-mm-mobile-ctas {
        display: none !important;
    }
}

/* Responsive overrides */

/* Below desktop */
/* Antonio's Tablet header */
@media (max-width: 1023px) {
    /* Hide desktop nav + CTAs */
    .pl-header .wp-block-navigation,
    header.wp-block-template-part .wp-block-buttons {
        display: none !important;
    }

    .pl-megamenu {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 100%;
        background: var(--wp--preset--color--gray-900);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 240ms ease;
        z-index: 80;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .pl-megamenu.is-mobile-open {
        transform: translateX(0);
    }

    /* Mobile flat links */
    .pl-mm-mobile-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .pl-mm-mobile-links li {
        padding: 0;
    }
    .pl-mm-mobile-links li::marker {
        content: "";
    }
    .pl-mm-mobile-links a {
        display: block;
        padding: 16px 0;
        border-top: 1px solid var(--wp--preset--color--slate-800);
        color: var(--wp--preset--color--slate-100);
        font-family: var(--wp--preset--font-family--gilmer);
        font-size: var(--wp--preset--font-size--md);
        font-weight: 500;
        text-decoration: none;
    }

    .pl-mm-mobile-ctas {
        margin-top: 24px;
        gap: 12px;
    }
    .pl-mm-mobile-ctas .wp-block-button {
        width: 100%;
    }
    .pl-mm-mobile-ctas .wp-block-button__link {
        width: 100%;
        justify-content: center;
    }

    .pl-mm-panel {
        position: static;
        background: transparent;
        border: 0;
        box-shadow: none;
        width: 100%;
    }

    .pl-mm-panel__inner {
        padding: 16px 0 24px !important;
        max-width: none !important;
    }

    .pl-mm-panel__layout {
        flex-direction: column !important;
        gap: 24px !important;
    }

    .pl-mm-panel__main,
    .pl-mm-panel__sidebar {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Header */
    .pl-header {
        min-height: 72px;
    }

    .pl-chrome > header.wp-block-template-part > .wp-block-group {
        padding-left: var(--wp--preset--spacing--16-x);
        padding-right: var(--wp--preset--spacing--16-x);
    }

    /* Hero */
    .pl-hero {
        padding-left: var(--wp--custom--grid--padding-tablet) !important;
        padding-right: var(--wp--custom--grid--padding-tablet) !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    /* Header */
    .pl-header {
        min-height: 64px;
    }
    .pl-chrome > header.wp-block-template-part > .wp-block-group {
        padding-left: var(--wp--custom--grid--padding-mobile);
        padding-right: var(--wp--custom--grid--padding-mobile);
    }

    /* Hero */
    .pl-hero {
        padding-left: var(--wp--custom--grid--padding-mobile) !important;
        padding-right: var(--wp--custom--grid--padding-mobile) !important;
        /* No split backdrops on mobile */
        background-image: radial-gradient(
            ellipse 120% 45% at 50% 68%,
            rgba(59, 131, 255, 0.24) 0%,
            rgba(59, 131, 255, 0.09) 50%,
            transparent 85%
        );
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .pl-hero .wp-block-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .pl-hero .wp-block-buttons .wp-block-button,
    .pl-hero .wp-block-buttons .wp-block-button__link {
        width: 100%;
    }
}