/*
Theme Name: HappenBoard
Theme URI: https://happenboard.com
Author: SEOPress
Author URI: https://seopress.org
Description: Minimal first-party block theme for happenboard.com. A bare Full-Site-Editing shell — all design, templates and styles are built in the WordPress Site Editor.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.2
Version: 0.44.2
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: happen-theme
Tags: full-site-editing, block-styles, custom-colors, editor-style, wide-blocks

Intentionally minimal: no bundled fonts, CSS, JS or patterns. theme.json only
provides the design tokens the site's blocks and companion plugins read back
(colour palette, spacing 20–80, font sizes, radii, shadows), plus the
header/footer template parts its event templates reference. Everything else
lives in the Site Editor.

Nothing outside theme.json should hard-code a brand colour, a radius or a
shadow: rebranding the site has to stay a change of tokens. The only
deliberate exceptions are documented where they sit — masks and shading in
the globe block, and the Gravity Forms accent, which is fed the palette
colour from functions.php because the plugin needs a literal hex.
*/
/* Logo size */
.wp-block-site-logo.is-default-size img {
    height: auto;
    width: 180px;
}

/* Brand text selection. */
::selection {
    background-color: var(--wp--preset--color--primary, #16181D);
    color: var(--wp--preset--color--base, #fff);
}

/* Poster hero: left-set type, the key phrase in true Fraunces italic
   vermilion, and two oversized logo-glyph shapes cropped at the edges as
   a brand backdrop. */
.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-section > * {
    position: relative;
}

.hero-section h1 em {
    font-style: italic;
    color: var(--wp--preset--color--primary, #16181D);
}

.hero-section .has-large-font-size {
    max-width: 44rem;
}

/* Event-vocabulary marquee: two identical tracks looping seamlessly,
   frozen for reduced-motion visitors. */
.hb-marquee {
    display: flex;
    overflow: hidden;
    padding: 1.1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
}

.hb-marquee p {
    flex: none;
    margin: 0;
    padding-right: 0.5em;
    white-space: nowrap;
    font-family: var(--wp--preset--font-family--system, sans-serif);
    font-style: italic;
    font-size: 1.625rem;
    animation: hb-marquee 50s linear infinite;
}

.hb-marquee strong {
    color: var(--wp--preset--color--primary, #16181D);
    font-weight: 400;
}

@keyframes hb-marquee {
    to {
        transform: translateX(-100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hb-marquee p {
        animation: none;
    }
}

/* Any disclosure widget is a control: it takes the pointer and answers
   the hover like the other interactive text on the page. */
summary {
    cursor: pointer;
    transition: color 0.15s ease;
}

summary:hover,
.docs-nav__group > summary:hover {
    color: var(--wp--preset--color--primary, #16181D);
}

/* Details block (FAQ accordions): replace the native triangle with a
   modern chevron, right-aligned, rotating between closed and open. */
.wp-block-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.wp-block-details > summary::marker {
    content: "";
}

/* Legacy Safari uses its own pseudo-element for the marker. */
.wp-block-details > summary::-webkit-details-marker {
    display: none;
}

.wp-block-details > summary::after {
    content: "";
    flex: none;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.25s ease;
}

.wp-block-details[open] > summary::after {
    transform: translateY(25%) rotate(-135deg);
}

/* Animate the content reveal between closed and open states.
   Uses the ::details-content pseudo-element and keyword interpolation;
   browsers without support simply open instantly (no breakage). */
:root {
    interpolate-size: allow-keywords;
}

.wp-block-details::details-content {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    transition:
        block-size 0.3s ease,
        opacity 0.3s ease,
        content-visibility 0.3s allow-discrete;
}

.wp-block-details[open]::details-content {
    block-size: auto;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-details > summary::after,
    .wp-block-details::details-content {
        transition: none;
    }
}

/* Header language menu: the Polylang switcher list is hidden until the
   visitor hovers (or keyboard-focuses) the globe icon. Apply the
   "header-lang-switcher" class to the Group wrapping icon + switcher. */
.header-lang-switcher {
    position: relative;
}

.header-lang-switcher ul {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 110;
    min-width: 14rem;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background-color: var(--wp--preset--color--base, #fff);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(16, 16, 19, 0.12);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.header-lang-switcher:hover ul,
.header-lang-switcher:focus-within ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-lang-switcher ul::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.header-lang-switcher ul li {
    margin: 0;
}

/* Same pill-shaped entries as the navigation dropdowns. */
.header-lang-switcher ul a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.header-lang-switcher ul a:hover,
.header-lang-switcher ul a:focus-visible {
    background-color: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--base, #fff));
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .header-lang-switcher ul {
        transition: none;
    }
}

/* Sticky header: always visible on scroll, slightly translucent with a
   frosted-glass blur. Targets the <header> template part only. The
   admin-bar variable keeps it below the toolbar when logged in. */
header.wp-block-template-part {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 100;
    background-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 92%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Logo tooltip: a small dark "Homepage" bubble under the header logo on
   hover or keyboard focus, Meetup-style. Pure CSS, localized per lang. */
header.wp-block-template-part .wp-block-site-logo {
    position: relative;
}

header.wp-block-template-part .wp-block-site-logo a::after {
    content: "Homepage";
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 120;
    padding: 0.35rem 0.65rem;
    border-radius: 2px;
    background-color: var(--wp--preset--color--contrast, #16181D);
    color: var(--wp--preset--color--base, #fff);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(16, 16, 19, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

html[lang^="fr"] header.wp-block-template-part .wp-block-site-logo a::after {
    content: "Page d'accueil";
}

header.wp-block-template-part .wp-block-site-logo a:hover::after,
header.wp-block-template-part .wp-block-site-logo a:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
    header.wp-block-template-part .wp-block-site-logo a::after {
        transition: none;
    }
}

/* Main navigation dropdown: on desktop the panel is anchored to its own
   parent item and sized to its content, a single column of grouped links.
   Scoped to the closed responsive container so the mobile overlay keeps its
   native accordion. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child {
    position: relative;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    right: auto;
    width: max-content;
    min-width: 12rem;
    max-width: min(20rem, calc(100vw - 3rem));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-content: start;
    padding: 1rem 1.25rem;
    border: none;
    border-radius: 0;
    background-color: var(--wp--preset--color--base, #FFFFFF);
    box-shadow: 0 24px 48px -12px rgba(16, 16, 19, 0.28);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    height: auto;
    overflow: visible;
    transform: translateX(-50%) translateY(6px);
    /* Close-intent delay: the panel stays fully visible 0.35s after hover
       loss (then fades), so even a slow pointer travel from the parent item
       reaches it. Opening cancels the delay via transition-delay: 0s. */
    transition: opacity 0.2s ease 0.35s, transform 0.2s ease 0.35s, visibility 0s linear 0.55s;
}

/* Level-2 groups: always expanded, one column each, with an uppercase
   title; their own chevrons and dropdown chrome are stripped. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container .wp-block-navigation-submenu {
    /* Core lays nav items out as flex rows; block stacks each group's
       title above its list instead of beside it. */
    display: block;
    position: static;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    position: static;
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    overflow: visible;
    opacity: 1;
    /* Must inherit, not force: a forced "visible" would keep these lists
       hit-testable while the panel is closed, so pointing anywhere in the
       panel's area would hover the parent item and open the menu. */
    visibility: inherit;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
}

/* Group titles double as the separators between groups, now that they are
   stacked. The first one opens the panel, so it carries no rule. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .has-child:first-child > .wp-block-navigation-item__content {
    border-top: none;
    padding-top: 0;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-item__content {
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    border-radius: 0;
    margin-bottom: 0.25rem;
    padding: 0.75rem 0.75rem 0.5rem;
    color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 62%, var(--wp--preset--color--base, #FFFFFF));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
    display: none;
}


/* Parent items: hover feedback is the color swap alone (the global
   underline-on-hover rule is meant for in-content links, not menus). */
.wp-block-navigation .wp-block-navigation-item__content {
    transition: color 0.15s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--primary, #16181D);
    text-decoration: none;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container:not(.wp-block-navigation__submenu-container *),
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:not(.open-on-click):focus-within > .wp-block-navigation__submenu-container:not(.wp-block-navigation__submenu-container *),
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child.open-on-click:focus-within > .wp-block-navigation__submenu-container:not(.wp-block-navigation__submenu-container *) {
    width: max-content;
    min-width: 12rem;
    max-width: min(20rem, calc(100vw - 3rem));
    z-index: 3;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}

.wp-block-navigation .has-child > .wp-block-navigation__submenu-icon {
    transition: transform 0.2s ease, color 0.15s ease;
}

.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-icon,
.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-icon {
    color: var(--wp--preset--color--primary, #16181D);
    transform: rotate(180deg);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    background-color: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--base, #fff));
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container,
    .wp-block-navigation .has-child > .wp-block-navigation__submenu-icon,
    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        transition: none;
        transform: none;
    }
}

/* Features section: balanced 50/50 rows, tinted media stages, eyebrow
   kickers and animated arrow links. Tints are mixed from the palette so
   they follow any future color change. */
.features-section > .wp-block-group.alignwide > * {
    flex: 1 1 0;
    min-width: 0;
}

/* Exhibition-style numbering: each feature row indexes its kicker 01-07.
   Pure CSS counters, nothing added to the content. */
.features-section {
    counter-reset: feature;
}

.features-section > .wp-block-group.alignwide {
    counter-increment: feature;
}

@media (max-width: 781px) {
    .features-section > .wp-block-group.alignwide {
        flex-wrap: wrap;
    }

    .features-section > .wp-block-group.alignwide > * {
        flex-basis: 100%;
    }
}

/* Kickers carry their section by colour and tracking alone. They used to sit
   on a rule spanning the whole container, which stacked seven hairlines down
   the page and fought the section backgrounds now doing that work. */
.feature-eyebrow {
    margin-bottom: 0.75rem;
    color: var(--wp--preset--color--primary, #16181D);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Section headers read as one unit — kicker, title, standfirst — then a clear
   break before the section's content. */
.feature-eyebrow + h2 {
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.feature-eyebrow + h2 + p {
    margin-bottom: var(--wp--preset--spacing--50, 2rem);
}

/* Inside a feature row the kicker sits in a tight flex stack that already
   owns the gap, so it keeps its own rhythm. */
.features-section .feature-eyebrow {
    margin-bottom: 0;
}

/* FAQ accordions read as an index: ruled rows instead of floating cards.
   The blocks were authored with a bottom rule of their own, which stacked a
   second line under this one. Worse, its colour came from core's default
   palette, which this theme disables, so it resolved to currentColor and
   painted near-black. !important is the only thing that beats the inline
   style the editor writes; clearing the border on the block in the editor
   would let this line go. */
.wp-block-details {
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    border-bottom: 0 !important;
    padding-top: var(--wp--preset--spacing--30, 1rem);
}

/* Inner pages: display-size post titles and an editorial reading column.
   Wide/full children (framed media, CTA panels) keep their width. */
h1.wp-block-post-title {
    font-size: clamp(2.375rem, 1.8rem + 2.9vw, 3.625rem);
}

/* Dark full-bleed section, used to break the page rhythm. Accents switch to
   the light vermilion tint, which clears AA on ink. The proof band that
   lives inside it — five numbers, then the integration marks — is set as
   one system further down the file. */
.section-dark {
    background-color: var(--wp--preset--color--contrast, #16181D);
    color: var(--wp--preset--color--base, #fff);
}

.section-dark .hb-integrations strong {
    color: var(--wp--preset--color--accent, #9CA3AF);
}

.section-dark .hb-integrations {
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 70%, transparent);
}

/* Bento: one lead cell twice the size, the rest filling around it. Cells
   are outlined rather than filled, in keeping with the ruled system. */
.hb-bento.is-layout-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
}

/* The 1px gap is the rule: cells paint over it with their own background. */
.hb-bento > .wp-block-group {
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background-color: var(--wp--preset--color--base, #fff);
    transition: background-color 0.2s ease;
}

.hb-bento > .wp-block-group:hover {
    background-color: color-mix(in srgb, var(--wp--preset--color--primary, #16181D) 5%, var(--wp--preset--color--base, #fff));
}

.hb-bento > .wp-block-group:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.hb-bento > .wp-block-group:nth-child(2) {
    grid-column: span 2;
}

.hb-bento > .wp-block-group:first-child h2 {
    font-size: var(--wp--preset--font-size--x-large);
}

@media (max-width: 781px) {
    .hb-bento.is-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hb-bento > .wp-block-group:first-child,
    .hb-bento > .wp-block-group:nth-child(2) {
        grid-column: span 2;
    }

    .hb-bento > .wp-block-group:first-child {
        grid-row: auto;
    }
}

/* Tabs: editorial underline tabs on a hairline baseline. Without
   JavaScript the panels simply stack, each under its own heading. */
/* Core layout classes set their own display, which would defeat the
   hidden attribute the tabs script toggles. */
.hb-tab-panel[hidden] {
    display: none !important;
}

/* Five long labels never fit a centred row at every width, and wrapping left
   a lone tab stranded under the others. The strip stays on one line and
   scrolls sideways instead; "safe center" centres it while it fits and falls
   back to the start edge once it does not, so nothing is cut off the left. */
.hb-tablist {
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;
    gap: 0.25rem;
    margin-bottom: 2.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.hb-tablist::-webkit-scrollbar {
    display: none;
}

.hb-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border: none;
    border-radius: var(--wp--custom--radius--sm, 6px);
    background: none;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    /* Constant weight: bolding the selected tab would rewidth it and shift
       the whole strip on every click. */
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.hb-tab:hover {
    color: var(--wp--preset--color--contrast, #16181D);
}

/* The selected tab is marked by a neutral tint rather than a rule, so it
   reads the same on the white sections and on the grey bands. */
.hb-tab[aria-selected="true"] {
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 8%, transparent);
    color: var(--wp--preset--color--contrast, #16181D);
}

/* The travelling rule is gone. The plugin's script still builds and measures
   the element, so it is hidden here rather than ripped out of the JS. */
.hb-tab-indicator {
    display: none;
}

/* Switching tabs is a staggered reveal rather than a jump cut: the icon
   leads, the copy follows, the screenshot settles last. Toggling the
   hidden attribute re-runs the animations each time a panel comes back. */
/* --hb-dir is set by the script to 1 or -1, so a panel enters from the
   side the visitor is moving towards. */
@keyframes hb-tab-rise {
    from {
        opacity: 0;
        transform: translate(calc(var(--hb-dir, 0) * 20px), 10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hb-tab-settle {
    from {
        opacity: 0;
        transform: translate(calc(var(--hb-dir, 0) * 26px), 16px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Checklist rows arrive one after the other rather than as a slab. */
@keyframes hb-tab-row {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.hb-tabs--enhanced .hb-tab-panel:not([hidden]) ul.guide-index li {
    animation: hb-tab-row 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hb-tabs--enhanced .hb-tab-panel:not([hidden]) ul.guide-index li:nth-child(1) {
    animation-delay: 0.12s;
}

.hb-tabs--enhanced .hb-tab-panel:not([hidden]) ul.guide-index li:nth-child(2) {
    animation-delay: 0.17s;
}

.hb-tabs--enhanced .hb-tab-panel:not([hidden]) ul.guide-index li:nth-child(3) {
    animation-delay: 0.22s;
}

.hb-tabs--enhanced .hb-tab-panel:not([hidden]) .feature-link {
    animation: hb-tab-row 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: 0.28s;
}

.hb-tabs--enhanced .hb-tab-panel:not([hidden]) > .wp-block-outermost-icon-block,
.hb-tabs--enhanced .hb-tab-panel:not([hidden]) .usecase-grid > .wp-block-group:first-child {
    animation: hb-tab-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hb-tabs--enhanced .hb-tab-panel:not([hidden]) .usecase-grid > .wp-block-group:first-child {
    animation-delay: 0.06s;
}

@media (prefers-reduced-motion: reduce) {
    .hb-tabs--enhanced .hb-tab-panel:not([hidden]) > .wp-block-outermost-icon-block,
    .hb-tabs--enhanced .hb-tab-panel:not([hidden]) .usecase-grid > .wp-block-group:first-child,
    .hb-tabs--enhanced .hb-tab-panel:not([hidden]) ul.guide-index li,
    .hb-tabs--enhanced .hb-tab-panel:not([hidden]) .feature-link {
        animation: none;
    }

    .hb-tab-indicator {
        transition: none;
    }
}

/* The panel is a constrained group, so its grid was being pinned to the
   content width and centred inside the wide tab strip. */
.hb-tab-panel.is-layout-constrained > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.hb-tab-panel.has-global-padding {
    padding-left: 0;
    padding-right: 0;
}

/* Inside a tab the two columns are not a ruled grid of cells: the rule
   above each one only added noise under the icon. */
.hb-tab-panel .usecase-grid {
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.hb-tab-panel .usecase-grid > .wp-block-group {
    border-top: none;
    padding-top: 0;
}

.hb-tab-panel > .wp-block-outermost-icon-block {
    margin-bottom: 1.75rem;
}

.hb-tab-panel .usecase-grid p:first-child {
    margin-top: 0;
    margin-bottom: 1.75rem;
    color: var(--wp--preset--color--contrast, #16181D);
}

.hb-tab-panel ul.guide-index {
    margin-bottom: 1.75rem;
}

/* The tab strip already carries the category, so the label it was built from
   is hidden once enhanced. The panel keeps its own headline. */
.hb-tabs--enhanced .hb-tab-panel > :is(h2, h3, h4):not(.hb-tab-headline),
.hb-tabs--enhanced .hb-tab-panel > .hb-tab-label {
    display: none;
}

/* Without JavaScript the panels stack, so each one keeps a visible category
   label. It is an eyebrow rather than a heading: the panel's own headline is
   the only heading in the outline. */
.hb-tab-label {
    margin: 0 0 0.5rem;
    color: var(--wp--preset--color--primary, #16181D);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hb-tab-headline {
    margin: 0 0 1.75rem;
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.2;
}

.hb-tabs--enhanced .hb-tab-panel:not([hidden]) .hb-tab-headline {
    animation: hb-tab-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: 0.04s;
}

@media (prefers-reduced-motion: reduce) {
    .hb-tabs--enhanced .hb-tab-panel:not([hidden]) .hb-tab-headline {
        animation: none;
    }
}

/* Slider: scroll-snap track that already works on touch with no script;
   the arrows are an enhancement layered on top. */
.hb-slider.is-layout-grid,
.hb-slider.is-layout-flex {
    display: flex;
    grid-template-columns: none;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
}

.hb-slider::-webkit-scrollbar {
    display: none;
}

.hb-slider > .wp-block-group {
    flex: 0 0 clamp(15rem, 24vw, 19rem);
    scroll-snap-align: start;
}

.hb-slider-nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.hb-slider-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 20%, var(--wp--preset--color--base, #fff));
    border-radius: 9999px;
    background: none;
    color: var(--wp--preset--color--contrast, #16181D);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hb-slider-arrow:hover:not(:disabled) {
    border-color: var(--wp--preset--color--primary, #16181D);
    background-color: var(--wp--preset--color--primary, #16181D);
    color: var(--wp--preset--color--base, #fff);
}

.hb-slider-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ===================================================== documentation === */
/* Doc type archive. The wrapper is a constrained group, which would pin
   its children to the content width; the index needs the wide one. */
.docs-archive.is-layout-constrained > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.docs-archive .wp-block-wpseopress-breadcrumbs {
    margin-bottom: 2rem;
}

.docs-archive__head {
    max-width: 46rem;
    margin-bottom: 3.5rem;
}

/* The head is a constrained group of its own: without this its children
   would be centred on the content width, and its global padding would be
   added on top of the wrapper's. */
.docs-archive__head.is-layout-constrained > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.docs-archive__head.has-global-padding {
    padding-left: 0;
    padding-right: 0;
}

.docs-archive__head h1 {
    margin: 0.25rem 0 0.75rem;
}

.docs-archive__head p {
    margin: 0;
    color: var(--wp--preset--color--secondary, #6B7280);
}

.docs-archive .wp-block-search {
    position: relative;
    max-width: 34rem;
    margin-top: 2rem;
}

/* The field is printed by the docs-intro block, not by core/search, so core's
   search stylesheet is never enqueued on this archive and the few rules the
   pill genuinely needs from it are restated here. */
.docs-archive .wp-block-search__inside-wrapper {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 18%, var(--wp--preset--color--base, #fff));
    border-radius: 9999px;
    padding: 0.3rem 0.3rem 0.3rem 1.25rem;
}

/* Without this the submit inherits the site's pill button padding and
   grows into an oval wider than the field it sits in. */
.docs-archive .wp-block-search__button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: 9999px;
}

.docs-archive .wp-block-search__button svg {
    width: 18px;
    height: 18px;
    /* The path carries no fill of its own, so without this it falls back to
       the SVG default of black and disappears into the dark button. */
    fill: currentColor;
}

.docs-archive .wp-block-search__input {
    /* Fill the pill. Left to itself the input keeps the intrinsic width of its
       size attribute, which clipped the placeholder and left the round submit
       stranded in the middle of the field. */
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    appearance: none;
    border: none;
    background: none;
    /* Room for the shortcut badge and the submit button. */
    padding: 0.5rem 6rem 0.5rem 0;
}

.docs-archive .wp-block-search__input:focus {
    outline: none;
}

.docs-archive .wp-block-search:focus-within .wp-block-search__inside-wrapper {
    border-color: var(--wp--preset--color--primary, #16181D);
}

/* Shortcut badge, hidden as soon as suggestions take its place. */
.docs-search__shortcut {
    position: absolute;
    top: 50%;
    /* Clear of the round submit button sitting inside the field. */
    right: 3.6rem;
    z-index: 2;
    transform: translateY(-50%);
    padding: 0.15rem 0.45rem;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 18%, var(--wp--preset--color--base, #fff));
    border-radius: 4px;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-family: inherit;
    font-size: 0.6875rem;
    line-height: 1.4;
    pointer-events: none;
}

/* Suggestions, in the same panel language as the mega menu. */
.docs-search__results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    padding: 0.5rem;
    background-color: var(--wp--preset--color--base, #fff);
    box-shadow: 0 24px 48px -12px rgba(16, 16, 19, 0.28);
}

.docs-search__result,
.docs-search__all {
    display: block;
    padding: 0.55rem 0.75rem;
    color: var(--wp--preset--color--contrast, #16181D);
    font-size: var(--wp--preset--font-size--medium, 1rem);
    text-decoration: none;
}

.docs-search__result:hover,
.docs-search__result.is-active {
    background-color: color-mix(in srgb, var(--wp--preset--color--primary, #16181D) 8%, var(--wp--preset--color--base, #fff));
    color: var(--wp--preset--color--primary, #16181D);
    text-decoration: none;
}

.docs-search__all {
    margin-top: 0.25rem;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 10%, var(--wp--preset--color--base, #fff));
    color: var(--wp--preset--color--secondary, #6B7280);
    font-weight: 600;
}

.docs-search__empty {
    margin: 0;
    padding: 0.75rem;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* Doc type archive: a switcher across sections, then the whole section as
   a two-column ruled index. */
.docs-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
}

.docs-types__link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: -1px;
    padding: 0.75rem 0;
    border-bottom: 2px solid transparent;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.docs-types__link:hover {
    color: var(--wp--preset--color--contrast, #16181D);
    text-decoration: none;
}

.docs-types__link.is-current {
    border-bottom-color: var(--wp--preset--color--primary, #16181D);
    color: var(--wp--preset--color--primary, #16181D);
}

.docs-types__count,
.docs-index__count {
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: 0.75rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.docs-index {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.docs-index__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
    font-size: 1.125rem;
    line-height: 1.3;
}

/* Entry titles are the content of this page, not a caption on it: they read
   at body size, like every other list of documentation entries on the site. */
.docs-index__list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--wp--preset--font-size--medium, 1rem);
}

.docs-index__list li {
    margin: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 8%, var(--wp--preset--color--base, #fff));
}

.docs-index__list a {
    display: block;
    padding: 0.6rem 0;
    color: var(--wp--preset--color--contrast, #16181D);
    text-decoration: none;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.docs-index__list a:hover {
    padding-left: 0.5rem;
    color: var(--wp--preset--color--primary, #16181D);
    text-decoration: none;
}

@media (max-width: 781px) {
    .docs-index {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Three rails: the entry tree, the entry itself, and the on-this-page
   index the script builds from the headings. */
.docs-layout {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr) 13rem;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    /* This main is a top-level template block, so it gets neither the wide
       constraint nor the global padding that constrained groups carry. */
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-inline: auto;
    padding-inline: var(--wp--style--root--padding-right, 1rem);
}

/* Support hub: one card per section. Each card is a door, so it says where it
   leads first, what is behind it second, and carries an arrow that moves on
   hover — a counter alone never reads as something you can click. */
.docs-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin-bottom: 4rem;
}

.docs-sections__card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
    border-radius: 12px;
    background-color: var(--wp--preset--color--base, #fff);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.docs-sections__card:hover {
    border-color: var(--wp--preset--color--primary, #16181D);
    background-color: color-mix(in srgb, var(--wp--preset--color--primary, #16181D) 4%, var(--wp--preset--color--base, #fff));
    transform: translateY(-2px);
    text-decoration: none;
}

.docs-sections__card:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, #16181D);
    outline-offset: 3px;
}

.docs-sections__name {
    display: block;
    color: var(--wp--preset--color--contrast, #16181D);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.docs-sections__card:hover .docs-sections__name {
    color: var(--wp--preset--color--primary, #16181D);
}

.docs-sections__lede {
    display: block;
    margin: 0;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    line-height: 1.5;
}

/* The footer of the card: what is inside it, and the affordance. */
.docs-sections__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.25rem;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
}

.docs-sections__count {
    font-variant-numeric: tabular-nums;
}

.docs-sections__arrow {
    color: var(--wp--preset--color--primary, #16181D);
    transition: transform 0.15s ease;
}

.docs-sections__card:hover .docs-sections__arrow {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .docs-sections__card,
    .docs-sections__arrow {
        transition: none;
    }

    .docs-sections__card:hover {
        transform: none;
    }
}

/* The sidebar help card is a notice: see the Notices section. */

.docs-nav,
.docs-aside {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    scrollbar-width: thin;
}

.docs-nav__title,
.docs-toc__title {
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    color: var(--wp--preset--color--contrast, #16181D);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.docs-nav__group {
    border: none;
    padding: 0;
    margin-bottom: 0.25rem;
}

.docs-nav__group > summary {
    padding: 0.4rem 0;
    color: var(--wp--preset--color--contrast, #16181D);
    font-weight: 600;
}

.docs-nav__list {
    margin: 0 0 1rem;
    padding: 0 0 0 0.25rem;
    list-style: none;
}

.docs-nav__list li {
    margin: 0;
}

.docs-nav__link {
    display: block;
    padding: 0.35rem 0.75rem;
    border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 10%, var(--wp--preset--color--base, #fff));
    color: var(--wp--preset--color--secondary, #6B7280);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.docs-nav__link:hover {
    color: var(--wp--preset--color--contrast, #16181D);
    text-decoration: none;
}

.docs-nav__link.is-current {
    border-left-color: var(--wp--preset--color--primary, #16181D);
    color: var(--wp--preset--color--primary, #16181D);
    font-weight: 600;
}

/* On-this-page index: SEOPress's table-of-contents block, restyled into
   the same ruled vocabulary as the sidebar. Its label is set here so it
   follows the page language without duplicating the template. */
/* An entry with no headings produces an empty block: no label either. */
.docs-toc:not(:has(a)) {
    display: none;
}

/* The aside is a plain block; only its inner rails stick. */
.docs-aside > * {
    min-width: 0;
}

.docs-toc::before {
    content: "On this page";
    display: block;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    color: var(--wp--preset--color--contrast, #16181D);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html[lang^="fr"] .docs-toc::before {
    content: "Sur cette page";
}

.docs-toc :is(ol, ul) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-toc li {
    margin: 0;
}

.docs-toc li a {
    display: block;
    padding: 0.3rem 0.75rem;
    border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 10%, var(--wp--preset--color--base, #fff));
    color: var(--wp--preset--color--secondary, #6B7280);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

/* Nested levels step in, keeping the same rule as their parent. */
.docs-toc li li a {
    padding-left: 1.5rem;
}

.docs-toc li a:hover {
    color: var(--wp--preset--color--contrast, #16181D);
    text-decoration: none;
}

.docs-toc li a.is-current {
    border-left-color: var(--wp--preset--color--primary, #16181D);
    color: var(--wp--preset--color--primary, #16181D);
}

/* Breadcrumb comes from SEOPress Pro's block, restyled to the docs system. */
.docs-main .wp-block-wpseopress-breadcrumbs {
    margin-bottom: 1.5rem;
}

.docs-main .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.docs-main .breadcrumb-item {
    margin: 0;
}

.docs-main .breadcrumb-item a {
    color: inherit;
    text-decoration: none;
}

.docs-main .breadcrumb-item a:hover {
    color: var(--wp--preset--color--primary, #16181D);
    text-decoration: none;
}

.docs-main .breadcrumb-item.active {
    color: var(--wp--preset--color--contrast, #16181D);
}

/* Headings get scroll margin so anchor jumps clear the sticky header. */
.docs-main :is(h2, h3) {
    scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
}

.docs-main .entry-content > * {
    max-width: 44rem;
}

/* One monospace stack for every kind of code, so an inline snippet and a
   block quote the same letterforms. */
.docs-main code,
.docs-main pre.wp-block-code,
.docs-main pre.wp-block-preformatted {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Long inline snippets (CLI calls, URLs) wrap instead of overflowing. */
.docs-main :not(pre) > code {
    overflow-wrap: anywhere;
}

/* A preformatted block is the same plate as a code block. */
.docs-main pre.wp-block-preformatted {
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    background-color: var(--wp--preset--color--contrast, #16181D);
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 92%, transparent);
    font-size: 0.8125rem;
    line-height: 1.7;
}

/* Code inside a table cell keeps the inline treatment, not the plate. */
.docs-main table code {
    white-space: nowrap;
}

/* An entry title is not a hero: cap it well below the display scale and
   let long questions break rather than run past the column. */
.docs-main h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.75rem);
    line-height: 1.15;
    overflow-wrap: break-word;
}

/* Last updated line under the title. */
.docs-updated {
    margin: 0.9rem 0 2.5rem;
    color: var(--wp--preset--color--secondary, #6B7280);
}

.docs-updated::before {
    content: "Last updated ";
}

html[lang^="fr"] .docs-updated::before {
    content: "Mis à jour le ";
}

/* Code: dark plate, monospace, with a copy control in the corner. */
.docs-code {
    position: relative;
    max-width: 44rem;
}

.docs-main pre.wp-block-code {
    padding: 1.25rem 1.5rem;
    border: none;
    border-radius: 0;
    overflow-x: auto;
    background-color: var(--wp--preset--color--contrast, #16181D);
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 92%, transparent);
    font-size: 0.8125rem;
    line-height: 1.7;
    tab-size: 4;
}

.docs-main :not(pre) > code {
    padding: 0.15em 0.4em;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 4%, var(--wp--preset--color--base, #fff));
    font-size: 0.875em;
}

.docs-code__copy {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--base, #fff) 25%, transparent);
    border-radius: 9999px;
    background: none;
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 75%, transparent);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.docs-code:hover .docs-code__copy,
.docs-code__copy:focus-visible {
    opacity: 1;
}

.docs-code__copy:hover,
.docs-code__copy.is-done {
    border-color: var(--wp--preset--color--accent, #9CA3AF);
    color: var(--wp--preset--color--accent, #9CA3AF);
}

/* Previous / next, as two ruled halves. */
.docs-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    max-width: 44rem;
    margin-top: 4rem;
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
}

.docs-pager__link {
    display: block;
    padding: 1.25rem 1.5rem;
    background-color: var(--wp--preset--color--base, #fff);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.docs-pager__link:hover {
    background-color: color-mix(in srgb, var(--wp--preset--color--primary, #16181D) 5%, var(--wp--preset--color--base, #fff));
    text-decoration: none;
}

.docs-pager__link--next {
    text-align: right;
}

.docs-pager__label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.docs-pager__title {
    display: block;
    color: var(--wp--preset--color--contrast, #16181D);
    font-weight: 600;
}

.docs-pager__link:hover .docs-pager__title {
    color: var(--wp--preset--color--primary, #16181D);
}

@media (max-width: 1200px) {
    .docs-layout {
        grid-template-columns: 14rem minmax(0, 1fr);
    }

    .docs-aside {
        display: none;
    }
}

@media (max-width: 900px) {
    .docs-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .docs-nav {
        position: static;
        max-height: none;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    }
}

/* Pictograms: line icons sit above the text they label, and the tab strip
   repeats each panel's own icon. */
.usecase-grid .wp-block-outermost-icon-block,
.hb-tab-panel > .wp-block-outermost-icon-block {
    margin-bottom: 1rem;
}

.hb-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Numbered steps: the counter prefixes the step title, so the sequence is
   readable at a glance without a second stack of big digits. */
.hb-steps {
    counter-reset: step;
}

.hb-steps > .wp-block-group {
    counter-increment: step;
}

.hb-steps h3::before {
    content: counter(step, decimal-leading-zero);
    margin-right: 0.6em;
    color: var(--wp--preset--color--primary, #16181D);
    font-variant-numeric: tabular-nums;
}

/* Ruled index entries that are plain statements rather than links read as
   a checklist; entries that link keep their arrow. */
.guide-index li:not(:has(a))::before {
    content: "";
    display: inline-block;
    width: 0.75em;
    height: 0.4em;
    margin-right: 0.75em;
    border-left: 1.5px solid var(--wp--preset--color--primary, #16181D);
    border-bottom: 1.5px solid var(--wp--preset--color--primary, #16181D);
    transform: translateY(-0.15em) rotate(-45deg);
}

/* Display numbers for stat tiles and how-it-works steps. Figures of one
   width, so a row of them keeps its rhythm whatever the digits are. */
.stat-number {
    font-family: var(--wp--preset--font-family--system, sans-serif);
    font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4.25rem);
    font-weight: 560;
    line-height: 1;
    letter-spacing: -0.015em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--wp--preset--color--primary, #16181D);
}

/* ── The proof band ──────────────────────────────────────────────────────
   One dark panel carrying two unrelated claims: what ships in the box, and
   what it plugs into. They are set as two movements rather than one list.

   What it replaces: the eyebrow's rule sat directly on top of five more,
   one per cell — six hairlines inside a hundred pixels, which read as a
   table nobody asked for, with the marks crowded underneath as a sixth row
   of the same block. Only one rule survives here, and it does structural
   work: it closes the numbers and opens the marks. The cells are held
   apart by space and a vermilion tick instead of by borders. */

/* No rule over the kicker: on a full-bleed panel the edge already does
   that job, and a second line only competes with the numbers below. */
.section-dark .feature-eyebrow {
    border-top: 0;
    padding-top: 0;
    margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
    color: var(--wp--preset--color--accent, #9CA3AF);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
}

.section-dark .usecase-grid {
    gap: 2.75rem clamp(1.25rem, 3vw, 2.75rem);
    align-items: start;
}

.section-dark .usecase-grid > .wp-block-group {
    border-top: 0;
    padding: 0;
    text-align: center;
}

/* The tick that replaces the cell's old border: short, brand-coloured, and
   growing under the cursor, so it reads as a mark rather than a table rule. */
.section-dark .usecase-grid > .wp-block-group::before {
    content: "";
    display: block;
    width: 1.75rem;
    height: 2px;
    margin: 0 auto 1.25rem;
    background-color: var(--wp--preset--color--accent, #9CA3AF);
    transition: width 0.25s ease;
}

.section-dark .stat-number {
    margin-bottom: 0.5rem;
    color: var(--wp--preset--color--accent, #9CA3AF);
}

/* The label is read after the figure, never with it: one line, one weight,
   and bright enough on ink to be read at 14px. */
.section-dark .usecase-grid p:not(.stat-number) {
    margin: 0;
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 82%, transparent);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    line-height: 1.4;
    transition: color 0.2s ease;
}

/* The one rule that earns its place. A grid item spanning every column, so
   it tracks the same wide measure the cells are set on — which a rule on
   the "Works with" line below could not, that line being content-width. */
.section-dark .usecase-grid::after {
    content: "";
    grid-column: 1 / -1;
    height: 1px;
    background-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 16%, transparent);
    transform-origin: left center;
}

@media (max-width: 900px) {
    .section-dark .usecase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.25rem 1.5rem;
    }

    /* Five cells in two columns leave an orphan; give it the whole row so
       the shape stays deliberate rather than accidental. */
    .section-dark .usecase-grid > .wp-block-group:nth-child(5) {
        grid-column: 1 / -1;
    }
}

/* Third-party marks, set in one colour so a row of unrelated brands still
   reads as one strip. */
.hb-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.75rem clamp(1.75rem, 4vw, 3.25rem);
    margin-top: 1.75rem;
}

.hb-logos__lead {
    margin-bottom: 0;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Its own movement, not a sixth stat: the space above it is what separates
   the two claims, and the label steps back so the marks carry the line. */
.section-dark .hb-logos__lead {
    margin-top: clamp(2.25rem, 4vw, 3.25rem);
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 55%, transparent);
}

.hb-logos .wp-block-outermost-icon-block {
    margin: 0;
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 62%, transparent);
    transition: color 0.2s ease, transform 0.2s ease;
}

.hb-logos .wp-block-outermost-icon-block:hover {
    color: var(--wp--preset--color--base, #fff);
}

/* Marks are sized by height, never width: their viewBoxes are trimmed to
   the artwork, so a wide wordmark and a square glyph both fill the strip. */
.hb-logos .icon-container {
    display: flex;
    width: auto !important;
}

.hb-logos .icon-container svg {
    width: auto;
    height: 26px;
}

/* One height for every mark is the wrong rule once wordmarks join glyphs:
   a viewBox trimmed to "WooCommerce" is four times wider than a trimmed
   square, so matching their heights makes the wordmark shout and the rest
   of the row look like an afterthought. The wide ones step down until the
   strip weighs the same from end to end. */
.hb-logos__mark--woocommerce .icon-container svg {
    height: 17px;
}

.hb-logos__mark--n8n .icon-container svg {
    height: 22px;
}

.hb-logos__mark--make .icon-container svg {
    height: 24px;
}

/* A mark is only recognisable to those who already know it, so each one
   names itself on hover. The name is already on the svg for assistive
   technology; this is its visible counterpart. */
.hb-logos__mark {
    position: relative;
}

.hb-logos__mark::after {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 3;
    transform: translateX(-50%) translateY(4px);
    padding: 0.3rem 0.55rem;
    border-radius: 4px;
    background-color: var(--wp--preset--color--base, #fff);
    color: var(--wp--preset--color--contrast, #16181D);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.hb-logos__mark:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.hb-logos__mark--stripe::after {
    content: "Stripe";
}

.hb-logos__mark--woocommerce::after {
    content: "WooCommerce";
}

.hb-logos__mark--googlecalendar::after {
    content: "Google Calendar";
}

.hb-logos__mark--zapier::after {
    content: "Zapier";
}

.hb-logos__mark--make::after {
    content: "Make";
}

.hb-logos__mark--n8n::after {
    content: "n8n";
}

.hb-logos__mark--whatsapp::after {
    content: "WhatsApp";
}

.hb-logos__mark--mailerpress::after {
    content: "MailerPress";
}

.hb-logos__mark--elementor::after {
    content: "Elementor";
}

/* No hover on a touch screen: the names sit under the marks instead. */
@media (hover: none), (max-width: 781px) {
    .hb-logos {
        row-gap: 2.25rem;
    }

    .hb-logos__mark::after {
        position: static;
        display: block;
        margin-top: 0.5rem;
        padding: 0;
        transform: none;
        background: none;
        color: inherit;
        font-size: 0.6875rem;
        font-weight: 500;
        opacity: 1;
        visibility: visible;
        text-align: center;
    }

    .hb-logos .icon-container {
        justify-content: center;
    }
}

.hb-logos__name {
    margin: 0;
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 62%, transparent);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.2s ease, transform 0.2s ease;
}

.hb-logos__name:hover {
    color: var(--wp--preset--color--base, #fff);
}

/* ── Reveals for the proof band ──────────────────────────────────────────
   Scroll-driven, so nothing depends on a script and nothing has already
   played by the time the section is reached. Browsers without view()
   timelines get the band as it is: visible, in place, unanimated. */
@keyframes hb-band-rise {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hb-band-draw {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* Brightening a label is not motion, so it is offered whatever the
   visitor's preference: it is how a cell says it is being pointed at. */
.section-dark .usecase-grid > .wp-block-group:hover p:not(.stat-number) {
    color: var(--wp--preset--color--base, #fff);
}

@media (prefers-reduced-motion: no-preference) {
    .section-dark .usecase-grid > .wp-block-group:hover::before {
        width: 3rem;
    }

    .hb-logos .wp-block-outermost-icon-block:hover,
    .hb-logos__name:hover {
        transform: translateY(-2px);
    }

    @supports (animation-timeline: view()) {
        /* One timeline for the whole band, declared on the panel and picked
           up by every part of it. Two reasons over a per-element view():
           the panel is tall enough to give the choreography a real runway,
           where a 17px kicker measured against itself would flick; and
           every offset below is a share of the same scroll, so the order
           is written once and holds. Every range closes before the panel
           has finished entering, so nothing depends on scroll that may not
           exist — a band near the foot of a page still resolves. */
        .section-dark {
            view-timeline-name: --hb-band;
            view-timeline-axis: block;
        }

        /* Front end only. add_editor_style() serves this same file to the
           canvas, where a block that fades out as you scroll away from it
           reads as a block that has gone missing; the editor's own body
           carries the wrapper class, so this simply never matches there. */
        body:not(.editor-styles-wrapper) .section-dark .feature-eyebrow,
        body:not(.editor-styles-wrapper) .section-dark .usecase-grid > .wp-block-group,
        body:not(.editor-styles-wrapper) .section-dark .usecase-grid::after,
        body:not(.editor-styles-wrapper) .section-dark .hb-logos__lead,
        body:not(.editor-styles-wrapper) .section-dark .hb-logos {
            animation-name: hb-band-rise;
            animation-fill-mode: both;
            animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
            animation-timeline: --hb-band;
        }

        .section-dark .feature-eyebrow {
            animation-range: entry 6% entry 28%;
        }

        /* The five cells share a row, so they share an entry point too:
           the stagger has to be written in, four points of scroll apart. */
        .section-dark .usecase-grid > .wp-block-group:nth-child(1) {
            animation-range: entry 18% entry 42%;
        }

        .section-dark .usecase-grid > .wp-block-group:nth-child(2) {
            animation-range: entry 22% entry 46%;
        }

        .section-dark .usecase-grid > .wp-block-group:nth-child(3) {
            animation-range: entry 26% entry 50%;
        }

        .section-dark .usecase-grid > .wp-block-group:nth-child(4) {
            animation-range: entry 30% entry 54%;
        }

        .section-dark .usecase-grid > .wp-block-group:nth-child(5) {
            animation-range: entry 34% entry 58%;
        }

        /* The closing rule is drawn rather than faded: it is the gesture
           that hands the panel over to the marks. */
        body:not(.editor-styles-wrapper) .section-dark .usecase-grid::after {
            animation-name: hb-band-draw;
            animation-range: entry 52% entry 72%;
        }

        .section-dark .hb-logos__lead {
            animation-range: entry 58% entry 76%;
        }

        /* The strip arrives as one object, not eleven: it is read as
           texture, and staggering it would only ask to be counted. */
        .section-dark .hb-logos {
            animation-range: entry 64% entry 84%;
        }
    }
}

/* A view() timeline has no scrollport on paper, which would hold every
   reveal at its opening frame. Print the band, not its first frame. */
@media print {
    .section-dark .feature-eyebrow,
    .section-dark .usecase-grid > .wp-block-group,
    .section-dark .usecase-grid::after,
    .section-dark .hb-logos__lead,
    .section-dark .hb-logos {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Integrations name strip: static sibling of the marquee. */
.hb-integrations {
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
}

.hb-integrations strong {
    color: var(--wp--preset--color--primary, #16181D);
    font-weight: 400;
}

/* Pricing: two framed cards on a narrower measure, the paid one carried by
   the brand colour. */
.pricing-grid {
    max-width: 58rem;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
    background-color: var(--wp--preset--color--base, #fff);
}

.pricing-card--pro {
    border-color: var(--wp--preset--color--primary, #16181D);
    box-shadow: 0 16px 40px -20px rgba(16, 16, 19, 0.35);
}

.pricing-card h3 {
    margin: 0 0 0.5rem;
    font-size: var(--wp--preset--font-size--large);
}

.pricing-card__lede {
    margin: 0 0 1.75rem;
    color: var(--wp--preset--color--secondary, #6B7280);
}

/* The card owns the rhythm here, so the shared index rules step back. */
.pricing-card .guide-index {
    margin: 0 0 2rem;
}

.pricing-card .guide-index li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    line-height: 1.5;
}

.pricing-card .guide-index li::before {
    flex: none;
    margin: 0.45em 0 0;
}

/* Buttons sit on the same line whatever the lists above them do. */
.pricing-card .wp-block-buttons {
    margin-top: auto;
}

.pricing-card .wp-block-button,
.pricing-card .wp-block-button__link {
    width: 100%;
    text-align: center;
}

@media (max-width: 781px) {
    .pricing-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Third-party plugin marks in the migration cards, sized like the icons
   they replace. */
.hb-logo {
    margin: 0 0 1rem;
}

.hb-logo img {
    width: 32px;
    height: auto;
}

/* Use-case grid: ruled cells, Mollie's industry row in Getty clothes. */
.usecase-grid > .wp-block-group {
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    padding-top: 1rem;
}

.usecase-grid p {
    color: var(--wp--preset--color--secondary, #6B7280);
}

@media (max-width: 781px) {
    .usecase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Guide lists, Getty's list-of-links. */
ul.guide-index {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

ul.guide-index li {
    margin: 0;
    padding: 0.65rem 0;
}

ul.guide-index a {
    font-weight: 600;
    text-decoration: none;
}

ul.guide-index a::after {
    content: "\2192";
    display: inline-block;
    margin-left: 0.35em;
    transition: transform 0.2s ease;
}

ul.guide-index a:hover {
    text-decoration: none;
}

ul.guide-index a:hover::after {
    transform: translateX(4px);
}

/* Plain links inside the dark CTA panel: inherit the light text and keep
   an underline (vermilion alone would sit below 4.5:1 on ink). */
.cta-panel a:where(:not(.wp-element-button)) {
    color: inherit;
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    ul.guide-index a::after {
        transition: none;
    }
}

/* Museum-style caption under screenshots and photos. */
.wp-block-image figcaption {
    margin-top: 0.75rem;
    margin-bottom: 0;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: 0.8125rem;
    text-align: left;
}

.feature-link a {
    font-weight: 600;
    text-decoration: none;
}

.feature-link a::after {
    content: "\2192";
    display: inline-block;
    margin-left: 0.35em;
    transition: transform 0.2s ease;
}

.feature-link a:hover {
    text-decoration: none;
}

.feature-link a:hover::after {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .feature-link a::after {
        transition: none;
    }
}

/* Conversion CTA panel: a flat dark stage, one dominant primary action,
   a ghost secondary and a reassurance row. */
.cta-panel {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
    background-color: var(--wp--preset--color--contrast, #16181D);
    box-shadow: 0 24px 60px rgba(16, 16, 19, 0.35);
    color: var(--wp--preset--color--base, #fff);
}

.cta-panel h2 {
    color: inherit;
    font-size: var(--wp--preset--font-size--x-large);
    line-height: 1.15;
}

.cta-panel .feature-eyebrow {
    color: var(--wp--preset--color--accent, #9CA3AF);
}

.cta-sub {
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 82%, transparent);
}

.cta-trust-item {
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 72%, transparent);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.cta-trust-item::before {
    content: "\2713";
    margin-right: 0.5em;
    color: var(--wp--preset--color--accent, #9CA3AF);
    font-weight: 700;
}

/* On the dark panel the primary button hovers to cyan (indigo would sink
   into the background), and the ghost button is a light outline. */
.cta-panel .wp-block-button:not(.cta-ghost) .wp-block-button__link:hover,
.cta-panel .wp-block-button:not(.cta-ghost) .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--base, #FFFFFF);
    color: var(--wp--preset--color--contrast, #16181D);
    outline-color: var(--wp--preset--color--base, #FFFFFF);
}

.cta-ghost .wp-block-button__link {
    background-color: transparent;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--base, #fff) 40%, transparent);
    color: var(--wp--preset--color--base, #fff);
}

.cta-ghost .wp-block-button__link:hover,
.cta-ghost .wp-block-button__link:focus-visible {
    background-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 14%, transparent);
    border-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 70%, transparent);
    color: var(--wp--preset--color--base, #fff);
}

/* Footer: solid navy shell, small muted link columns under uppercase
   labels, logos-only socials and a separated, dimmed legal row. */
.footer-label {
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base, #fff) 18%, transparent);
    padding-top: 1rem;
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 55%, transparent);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

footer.wp-block-template-part .is-layout-grid .wp-block-post-title {
    margin: 0;
    font-family: var(--wp--preset--font-family--system, sans-serif);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 400;
    line-height: 1.6;
}

footer.wp-block-template-part .is-layout-grid a,
footer.wp-block-template-part .is-layout-grid .wp-block-navigation-item__content {
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 78%, transparent);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    transition: color 0.15s ease;
}

footer.wp-block-template-part .is-layout-grid a:hover,
footer.wp-block-template-part .is-layout-grid .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--base, #fff);
    text-decoration: none;
}

@media (max-width: 1023px) {
    footer.wp-block-template-part .is-layout-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 679px) {
    footer.wp-block-template-part .is-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

footer.wp-block-template-part .wp-block-site-tagline {
    max-width: 30rem;
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 70%, transparent);
    font-size: 0.9375rem;
}

footer.wp-block-template-part .wp-block-social-links .wp-block-social-link {
    transition: transform 0.2s ease;
}

footer.wp-block-template-part .wp-block-social-links .wp-block-social-link:hover {
    transform: translateY(-2px);
}

footer.wp-block-template-part .has-contrast-background-color > .wp-block-group.alignfull > .wp-block-group.alignwide:last-child {
    color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 65%, transparent);
}

footer.wp-block-template-part .has-contrast-background-color > .wp-block-group.alignfull > .wp-block-group.alignwide:last-child a {
    color: inherit;
}

footer.wp-block-template-part .has-contrast-background-color > .wp-block-group.alignfull > .wp-block-group.alignwide:last-child a:hover {
    color: var(--wp--preset--color--base, #fff);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    footer.wp-block-template-part .is-layout-grid a,
    footer.wp-block-template-part .wp-block-social-links .wp-block-social-link {
        transition: none;
    }
}

/* Button states: theme.json handles the resting look (primary background,
   contrast text) but not hover/focus/active, so they live here. Preset
   (!important) and inline per-block colors still win over these rules. */
.wp-element-button,
.wp-block-button__link {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        outline-color 0.2s ease,
        box-shadow 0.2s ease;
}

.wp-element-button:hover:not(:disabled),
.wp-block-button__link:hover:not(:disabled) {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
}

/* Keyboard focus mirrors hover, plus a visible ring; the offset keeps the
   ring readable on any background the button sits on. */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    outline: 2px solid var(--wp--preset--color--contrast);
    outline-offset: 2px;
}

.wp-element-button:active:not(:disabled),
.wp-block-button__link:active:not(:disabled) {
    background-color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--contrast));
    color: var(--wp--preset--color--base);
}

.wp-element-button:disabled,
.wp-element-button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .wp-element-button,
    .wp-block-button__link {
        transition: none;
    }
}
/* Support hub: the ticket form sits in its own framed panel. */
.docs-ticket {
    max-width: 46rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
}

.docs-ticket h2 {
    margin: 0.25rem 0 0.5rem;
}

.docs-ticket.is-layout-constrained > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.docs-ticket.has-global-padding {
    padding-left: clamp(1.75rem, 3vw, 2.5rem);
    padding-right: clamp(1.75rem, 3vw, 2.5rem);
}

/* ====================================================== integrations === */
/* Directory: a filter bar over a grid of ruled cards, in the same
   vocabulary as the rest of the site. */
.int-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.int-filter__btn {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 16%, var(--wp--preset--color--base, #fff));
    border-radius: 9999px;
    background: none;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.int-filter__btn:hover {
    border-color: var(--wp--preset--color--contrast, #16181D);
    color: var(--wp--preset--color--contrast, #16181D);
}

.int-filter__btn.is-current {
    border-color: var(--wp--preset--color--primary, #16181D);
    background-color: var(--wp--preset--color--primary, #16181D);
    color: var(--wp--preset--color--base, #fff);
}

.int-filter__count {
    font-size: 0.75rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

/* The 1px gap is the rule, as in the bento. */
.int-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1px;
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
}

.int-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background-color: var(--wp--preset--color--base, #fff);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.int-card:hover {
    background-color: color-mix(in srgb, var(--wp--preset--color--primary, #16181D) 5%, var(--wp--preset--color--base, #fff));
    text-decoration: none;
}

.int-card[hidden] {
    display: none;
}

/* Logos are sized by height so a wordmark and a glyph weigh the same. */
.int-card__logo img,
.int-single__logo img {
    width: auto;
    height: 34px;
    max-width: 140px;
    object-fit: contain;
    object-position: left center;
}

.int-single__logo img {
    height: 52px;
    max-width: 200px;
}

.int-card__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.35rem;
}

.int-card__name {
    color: var(--wp--preset--color--contrast, #16181D);
    font-weight: 600;
}

.int-card__plan {
    padding: 0.1rem 0.45rem;
    border: 1px solid currentColor;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.int-card__plan--free {
    color: var(--wp--preset--color--secondary, #6B7280);
}

.int-card__plan--pro {
    color: var(--wp--preset--color--primary, #16181D);
}

.int-card__lede {
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    line-height: 1.5;
}

.int-card__cat {
    margin-top: auto;
    padding-top: 0.75rem;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* A single entry: logo and badges above the title. */
.int-single__head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.int-single__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.int-single__cat {
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.int-single__cat:hover {
    color: var(--wp--preset--color--primary, #16181D);
    text-decoration: none;
}

.int-related {
    margin-top: 4rem;
}

.int-related .feature-eyebrow {
    margin-bottom: 1.25rem;
}

/* Both "talk to us" panels are notices: see the Notices section. */

/* A single integration is an announcement, not a dashboard: one narrow column
   on the centre line, logo, badges, title and promise all stacked on that
   axis. The checklist is the exception — it is centred as a block but still
   reads from a left margin, because centred list items are unreadable. */
.int-single {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.int-single .entry-content > * {
    margin-inline: auto;
}

.int-single__head {
    align-items: center;
}

.int-single__meta {
    justify-content: center;
}

.int-single__logo img {
    object-position: center;
}

.int-single .has-large-font-size {
    margin-bottom: 2rem;
    line-height: 1.4;
}

.int-single ul.guide-index {
    display: inline-block;
    margin: 0 auto 2rem;
    text-align: left;
}

.int-single ul.guide-index li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 0;
    line-height: 1.5;
}

.int-single ul.guide-index li::before {
    flex: none;
    margin-top: 0.15em;
    font-size: 1.05em;
}

/* The plan note closes the entry, so it steps back from the list above. */
.int-single .has-small-font-size {
    margin-top: 0;
    color: var(--wp--preset--color--secondary, #6B7280);
}

.int-single .cta-panel {
    margin-top: 3rem;
}

/* Cards keep their own reading direction inside the centred column. */
.int-single .int-related {
    text-align: left;
}

/* The contact panel under an entry is a notice: see the Notices section. */

/* ---------------------------------------------------------------------------
   Release notes

   A sticky version rail beside a stream of releases, each one led by its
   version number in the gutter and separated by a single hairline. The page
   is generated from the Free plugin's readme.txt, so the rhythm has to hold
   whatever a release turns out to contain.
   ------------------------------------------------------------------------ */
.changelog {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.changelog-rail {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    scrollbar-width: thin;
}

.changelog-rail__title {
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    color: var(--wp--preset--color--contrast, #16181D);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.changelog-rail__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.changelog-rail__item {
    margin: 0;
}

.changelog-rail__link {
    display: block;
    padding: 0.45rem 0.75rem;
    border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 10%, var(--wp--preset--color--base, #fff));
    color: var(--wp--preset--color--secondary, #6B7280);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.changelog-rail__link:hover {
    color: var(--wp--preset--color--contrast, #16181D);
    text-decoration: none;
}

.changelog-rail__link.is-current {
    border-left-color: var(--wp--preset--color--primary, #16181D);
    color: var(--wp--preset--color--contrast, #16181D);
}

.changelog-rail__version {
    display: block;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.changelog-rail__note {
    display: block;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: 0.75rem;
}

.changelog-stream {
    min-width: 0;
}

/* One band per release. The hairline belongs to the entry below it, so the
   newest release opens the page without a rule above it. */
.changelog-entry {
    display: grid;
    grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
}

.changelog-entry:first-child {
    padding-top: 0;
    border-top: none;
}

.changelog-entry__version {
    margin: 0;
    color: var(--wp--preset--color--contrast, #16181D);
    font-family: var(--wp--preset--font-family--system, sans-serif);
    font-size: 1.5rem;
    font-weight: 560;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.changelog-entry__date,
.changelog-entry__count {
    margin: 0.45rem 0 0;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: 0.8125rem;
}

.changelog-entry__badge {
    display: inline-block;
    margin: 0.7rem 0 0;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    background-color: color-mix(in srgb, var(--wp--preset--color--primary, #16181D) 10%, var(--wp--preset--color--base, #fff));
    color: var(--wp--preset--color--primary, #16181D);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.changelog-entry__body {
    min-width: 0;
    max-width: 44rem;
}

.changelog-entry__title {
    margin: 0 0 0.85rem;
    font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* The permalink beside a headline: out of the way until the release is
   hovered, always there for touch and keyboard. */
.changelog-entry__anchor {
    margin-left: 0.4rem;
    color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 35%, var(--wp--preset--color--base, #fff));
    font-size: 0.7em;
    font-weight: 400;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.changelog-entry:hover .changelog-entry__anchor,
.changelog-entry__anchor:focus-visible,
.changelog-entry__anchor.is-done {
    opacity: 1;
}

.changelog-entry__anchor:hover,
.changelog-entry__anchor.is-done {
    color: var(--wp--preset--color--primary, #16181D);
    text-decoration: none;
}

.changelog-entry__lede {
    margin: 0 0 1rem;
    font-size: var(--wp--preset--font-size--large, 1.125rem);
    line-height: 1.55;
}

.changelog-entry__lede:last-child {
    margin-bottom: 0;
}

/* The upgrade notice on a release is a notice: see the Notices section. */

.changelog-group {
    margin-top: 2.25rem;
}

/* A group title is a whole sentence often enough that the uppercase eyebrow
   treatment used elsewhere would shout. It stays sentence case, and the rule
   under it does the separating. */
.changelog-group__title {
    margin: 0 0 0.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 10%, var(--wp--preset--color--base, #fff));
    color: var(--wp--preset--color--contrast, #16181D);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
}

.changelog-group__title strong {
    font-weight: inherit;
}

.changelog-group__lede {
    margin: 0.75rem 0 0;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.changelog-group__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.changelog-group__list li {
    position: relative;
    margin: 0;
    padding: 0.55rem 0 0.55rem 1.4rem;
    line-height: 1.65;
}

.changelog-group__list li::before {
    content: "";
    position: absolute;
    top: 1.15em;
    left: 0.2rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--wp--preset--color--primary, #16181D) 55%, var(--wp--preset--color--base, #fff));
}

.changelog code {
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 6%, var(--wp--preset--color--base, #fff));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
    overflow-wrap: anywhere;
}

@media (hover: none) {
    .changelog-entry__anchor {
        opacity: 1;
    }
}

/* Under the wide layout the rail stops being a column and becomes the row of
   version chips above the stream. */
@media (max-width: 1023px) {
    .changelog {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .changelog-rail {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .changelog-rail__list {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        scrollbar-width: thin;
    }

    .changelog-rail__link {
        padding: 0.35rem 0.9rem;
        border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
        border-radius: 9999px;
        white-space: nowrap;
    }

    .changelog-rail__link.is-current {
        border-color: var(--wp--preset--color--primary, #16181D);
        color: var(--wp--preset--color--primary, #16181D);
    }

    .changelog-rail__note {
        display: none;
    }
}

@media (max-width: 781px) {
    .changelog-entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .changelog-entry__aside {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.4rem 0.9rem;
    }

    .changelog-entry__version {
        font-size: 1.25rem;
    }

    .changelog-entry__date,
    .changelog-entry__count,
    .changelog-entry__badge {
        margin: 0;
    }
}

/* ---------------------------------------------------------------------------
   Notices

   Three places stop the reader and hand them something to act on: the help
   card in the documentation sidebar, and the two "talk to us" panels of the
   integration directory. They share one plate — same hairline, radius,
   padding scale and type — and differ only in layout and in how loud their
   call to action is.

   Alerts are a different family and are not defined here: they are the
   notice-info / success / warning / error style variations registered on the
   paragraph block in functions.php, editable in the Site Editor. Anything
   that warns borrows those (see .changelog-notice) rather than restating
   them.
   ------------------------------------------------------------------------ */
.docs-help,
.int-suggest,
.int-help {
    --hb-notice-padding: clamp(1.25rem, 3vw, 2rem);

    padding: var(--hb-notice-padding);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 14%, var(--wp--preset--color--base, #fff));
    border-radius: 12px;
}

.docs-help__title,
.int-suggest__title,
.int-help__title {
    margin: 0 0 0.4rem;
    color: var(--wp--preset--color--contrast, #16181D);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.docs-help__lede,
.int-suggest__lede,
.int-help__lede {
    margin: 0 0 1.25rem;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    line-height: 1.6;
}

/* The sidebar card is 13rem wide: it keeps the plate, not the padding. */
.docs-help {
    --hb-notice-padding: 1.25rem;

    margin-top: 2rem;
}

.docs-help__lede {
    margin-bottom: 1rem;
}

/* Directory panel: text and action side by side, so the lede closes nothing. */
.int-suggest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 3rem;
    background-color: color-mix(in srgb, var(--wp--preset--color--primary, #16181D) 4%, var(--wp--preset--color--base, #fff));
}

.int-suggest__text {
    flex: 1 1 22rem;
}

.int-suggest__lede {
    max-width: 42rem;
    margin-bottom: 0;
}

/* Entry panel: stacked on the centre line of the column it closes. */
.int-help {
    margin-top: 2.5rem;
    text-align: center;
}

.int-help__lede {
    max-width: 34rem;
    margin-inline: auto;
    margin-bottom: 1.5rem;
}

/* The upgrade notice on a release is a paragraph carrying the warning style
   variation, so it arrives fully dressed: this only gives it room. */
.changelog-notice {
    margin: 1.5rem 0;
}

.changelog-notice p {
    margin: 0;
}

/* One call-to-action shape: filled where the panel is the point, outlined
   where a stronger button already sits above it. */
.int-suggest__cta,
.int-help__cta {
    display: inline-block;
    flex: none;
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
    border: 1px solid var(--wp--preset--color--primary, #16181D);
    border-radius: 9999px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.int-suggest__cta {
    background-color: var(--wp--preset--color--primary, #16181D);
    color: var(--wp--preset--color--base, #fff);
}

.int-suggest__cta:hover,
.int-suggest__cta:focus-visible {
    border-color: var(--wp--preset--color--contrast, #16181D);
    background-color: var(--wp--preset--color--contrast, #16181D);
    color: var(--wp--preset--color--base, #fff);
    text-decoration: none;
}

.int-help__cta {
    background-color: transparent;
    color: var(--wp--preset--color--primary, #16181D);
}

.int-help__cta:hover,
.int-help__cta:focus-visible {
    background-color: var(--wp--preset--color--primary, #16181D);
    color: var(--wp--preset--color--base, #fff);
    text-decoration: none;
}

/* The sidebar card is too narrow for a button, so its action is a text link
   carrying the same arrow the rest of the site uses. */
.docs-help__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--wp--preset--color--primary, #16181D);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
    text-decoration: none;
}

.docs-help__link::after {
    content: "→";
    transition: transform 0.15s ease;
}

.docs-help__link:hover {
    text-decoration: none;
}

.docs-help__link:hover::after {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .int-suggest__cta,
    .int-help__cta,
    .docs-help__link::after {
        transition: none;
    }

    .docs-help__link:hover::after {
        transform: none;
    }
}

/* ======================================================== newsletter === */
/* Footer sign-up: a vermilion band carrying the same cropped glyph motif as
   the hero, an editorial intro on one side and the form on the other. The
   Gravity Forms field grid is re-laid so the field and the submit share a
   row as two pills, with the consent line running under them. Selectors are
   deliberately deep: the Gravity Forms theme framework styles its controls
   from `.gform-theme--foundation .gform_wrapper`, so anything shallower
   loses the cascade. */
.newsletter-panel {
    position: relative;
    overflow: hidden;
}

.newsletter-panel > * {
    position: relative;
    z-index: 1;
}

.newsletter-panel > .wp-block-group.alignwide {
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.newsletter-panel__intro {
    flex: 1 1 21rem;
    min-width: 0;
}

.newsletter-panel__form {
    flex: 1 1 25rem;
    min-width: 0;
    max-width: 34rem;
}

/* The band is vermilion, so the eyebrow's usual vermilion-on-white rule and
   colour would both disappear into it: both go to ink. */
.newsletter-panel .feature-eyebrow {
    margin: 0;
    border-top-color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 25%, transparent);
    color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 70%, transparent);
}

.newsletter-panel h2 {
    margin: 1.5rem 0 0;
    line-height: 1.08;
}

.newsletter-panel h2 em {
    font-family: var(--wp--preset--font-family--system, sans-serif);
    font-style: italic;
    font-weight: 500;
}

.newsletter-panel__lede {
    max-width: 25rem;
    margin: 1rem 0 0;
    color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 72%, transparent);
    font-size: 1.0625rem;
    line-height: 1.55;
}

/* Field row: the input takes the space left by the submit, and the consent
   line sits under the pair. The challenge, when Cloudflare asks for one,
   opens on its own row below. */
.newsletter-panel .gform_wrapper {
    margin: 0;
}

.newsletter-panel .gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0 0.5rem;
}

.newsletter-panel .gform_wrapper .gfield--type-email {
    grid-column: 1;
    grid-row: 1;
}

.newsletter-panel .gform_wrapper #field_submit {
    grid-column: 2;
    grid-row: 1;
}

.newsletter-panel .gform_wrapper .gfield--type-turnstile {
    grid-column: 1 / -1;
    grid-row: 2;
    line-height: 0;
}

.newsletter-panel .gform_wrapper .gform_footer {
    margin: 0;
    padding: 0;
}

.newsletter-panel .gform_wrapper .ginput_container_email input[type="email"] {
    width: 100%;
    height: 3.375rem;
    padding: 0 1.5rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    background-color: var(--wp--preset--color--base, #fff);
    color: var(--wp--preset--color--contrast, #16181D);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    line-height: 1.2;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.newsletter-panel .gform_wrapper .ginput_container_email input[type="email"]::placeholder {
    color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 45%, transparent);
    opacity: 1;
}

.newsletter-panel .gform_wrapper .ginput_container_email input[type="email"]:focus {
    outline: none;
    border-color: var(--wp--preset--color--contrast, #16181D);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 20%, transparent);
}

/* Ink pill against the white one, inverting to white on hover: on a
   vermilion band an invert reads as a press, where a darker fill would not.
   Gravity Forms sizes an inline submit with an !important rule, so the pill
   has to claim its own width the same way. */
.newsletter-panel .gform_wrapper #field_submit .gform-button {
    display: inline-block;
    inline-size: auto !important;
    min-width: 0;
    height: 3.375rem;
    margin: 0;
    padding: 0 2rem;
    border: 1px solid var(--wp--preset--color--contrast, #16181D);
    border-radius: 9999px;
    background-color: var(--wp--preset--color--contrast, #16181D);
    color: var(--wp--preset--color--base, #fff);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.newsletter-panel .gform_wrapper #field_submit .gform-button:hover,
.newsletter-panel .gform_wrapper #field_submit .gform-button:focus-visible {
    background-color: var(--wp--preset--color--base, #fff);
    border-color: var(--wp--preset--color--base, #fff);
    color: var(--wp--preset--color--contrast, #16181D);
}

.newsletter-panel .gform_wrapper #field_submit .gform-button:focus-visible {
    outline: 2px solid var(--wp--preset--color--contrast, #16181D);
    outline-offset: 2px;
}

/* Consent line: small print, indented to the field's text so it hangs off
   the same edge rather than the pill's. */
.newsletter-panel .gform_wrapper .gfield_description {
    margin: 0;
    padding: 0.85rem 1.5rem 0;
    color: color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 68%, transparent);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.newsletter-panel .gform_wrapper .gfield_description a {
    color: var(--wp--preset--color--contrast, #16181D);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.newsletter-panel .gform_wrapper .gfield_description a:hover {
    color: var(--wp--preset--color--contrast, #16181D);
    text-decoration-thickness: 2px;
}

.newsletter-panel .gform_wrapper .cf-turnstile {
    margin-top: 0.85rem;
}

/* Errors and the confirmation both land on vermilion, where Gravity Forms'
   own light-on-light states would vanish. */
.newsletter-panel .gform_wrapper .gform_validation_errors,
.newsletter-panel .gform_wrapper .gfield_validation_message {
    margin: 0 0 0.85rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--wp--preset--color--contrast, #16181D);
    border-radius: 12px;
    background-color: transparent;
    box-shadow: none;
    color: var(--wp--preset--color--contrast, #16181D);
    font-size: 0.8125rem;
}

.newsletter-panel .gform_wrapper .gfield_validation_message {
    margin: 0.6rem 0 0;
}

.newsletter-panel .gform_confirmation_message {
    margin: 0;
    padding: 1.1rem 1.75rem;
    border-radius: 9999px;
    background-color: var(--wp--preset--color--base, #fff);
    color: var(--wp--preset--color--contrast, #16181D);
    font-weight: 500;
}

@media (max-width: 781px) {
    .newsletter-panel .gform_wrapper .gform_fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem 0;
    }

    .newsletter-panel .gform_wrapper #field_submit {
        grid-column: 1;
        grid-row: 2;
    }

    .newsletter-panel .gform_wrapper .gfield--type-turnstile {
        grid-row: 3;
    }

    .newsletter-panel .gform_wrapper #field_submit .gform-button {
        inline-size: 100% !important;
    }

    .newsletter-panel .gform_wrapper .cf-turnstile {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .newsletter-panel .gform_wrapper .ginput_container_email input[type="email"],
    .newsletter-panel .gform_wrapper #field_submit .gform-button {
        transition: none;
    }
}

/* ==================================================== feature pages === */
/* A feature page is long by design: the hero states the promise, then six
   numbered sections walk through it. These components carry that walk. */

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* The standfirst is the only paragraph on the page allowed to run at
   display size, so it is not held to the 46rem reading measure. */
.wp-block-post-content.alignwide > p.feature-lede {
    max-width: 52rem;
}

/* One line of reassurance under the hero buttons: what it costs, what it
   needs. Small, muted, never a second call to action. */
.feature-reassure {
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* ── On-this-page strip ───────────────────────────────────────────────── */
/* Section links as one ruled row, so a reader who came for the Pro views
   does not have to scroll past four sections to find them. */
.hb-jump {
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    padding: 0.85rem 0;
}

.hb-jump ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: jump;
}

.hb-jump li {
    counter-increment: jump;
    margin: 0;
}

.hb-jump a {
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
    text-decoration: none;
}

/* The index numbers the sections exactly as the section kickers do, so the
   two read as one sequence. */
.hb-jump a::before {
    content: counter(jump, decimal-leading-zero);
    margin-right: 0.5em;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

.hb-jump a:hover {
    text-decoration: underline;
}

/* Anchored headings clear the sticky header when jumped to. */
.wp-block-post-content :is(h2, h3)[id] {
    scroll-margin-top: 6rem;
}

/* ── Specimen grid ────────────────────────────────────────────────────── */
/* One framed screenshot per cell, captioned by a kicker, a title and a line
   on when to reach for it. */
.hb-specs.is-layout-grid {
    gap: var(--wp--preset--spacing--60, 3rem) var(--wp--preset--spacing--40, 1.5rem);
}

.hb-specs > .wp-block-group {
    align-content: start;
}

.hb-specs .is-layout-constrained > * {
    margin-left: 0;
    margin-right: 0;
}

.hb-specs .feature-eyebrow {
    margin-bottom: 0.35rem;
}

.hb-specs h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.hb-specs p:not(.feature-eyebrow) {
    margin: 0;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    line-height: 1.55;
}

/* A specimen is a picture with a caption: stacking it is the right answer on
   a narrow screen, not squeezing two screenshots side by side. */
@media (max-width: 781px) {
    .hb-specs.is-layout-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A single specimen running the full measure (the hero of a section). */
.hb-specs--single.is-layout-grid {
    grid-template-columns: minmax(0, 1fr);
}

/* ── Tables ───────────────────────────────────────────────────────────── */
/* Two jobs, one component: "which block do I need" and "what is in which
   plan". Ruled rows, no fills, in the same system as .guide-index.
   The wrapper scrolls, and takes focus so a keyboard can reach the scroll. */
.hb-compare {
    overflow-x: auto;
    margin-block: var(--wp--preset--spacing--40, 1.5rem);
}

.hb-compare:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, #16181D);
    outline-offset: 4px;
}

.hb-compare table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.hb-compare caption {
    margin-bottom: 0.75rem;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    text-align: left;
}

.hb-compare th,
.hb-compare td {
    padding: 0.85rem 1rem 0.85rem 0;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff));
    text-align: left;
    vertical-align: top;
}

.hb-compare thead th {
    border-top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 30%, var(--wp--preset--color--base, #fff));
    padding-top: 0;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hb-compare tbody th {
    font-weight: 600;
}

.hb-compare td {
    color: var(--wp--preset--color--secondary, #6B7280);
}

.hb-compare a {
    font-weight: 600;
}

/* ── Plan badges ──────────────────────────────────────────────────────── */
/* Free and Pro read at a glance in a table cell or beside a heading. */
.hb-badge {
    display: inline-block;
    padding: 0.15em 0.6em;
    border: 1px solid currentcolor;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: 0.15em;
}

.hb-badge--free {
    color: var(--wp--preset--color--secondary, #6B7280);
}

.hb-badge--pro {
    color: var(--wp--preset--color--primary, #16181D);
}

h2 .hb-badge {
    margin-left: 0.6em;
}

/* ── In-content dark band ─────────────────────────────────────────────── */
/* The proof band on the home page is full-bleed because the template lets
   it be. Inside post content the column is the widest thing there is, so
   the band is a panel: same ink, same numbers, its own padding. */
.hb-band {
    background-color: var(--wp--preset--color--contrast, #16181D);
    color: var(--wp--preset--color--base, #fff);
}

/* Nothing follows the numbers here, so the rule that closes them on the home
   page would just hang under the last row. */
.hb-band .usecase-grid::after {
    content: none;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
/* Questions and answers are prose, so they are held to the same reading
   measure the paragraphs around them get. Wrapping them in a group took them
   out of the rule that does that for direct children of the post content. */
.faq-index,
.hb-next .guide-index {
    max-width: 46rem;
}

/* The last entry closes the index, exactly as .guide-index does. Carries
   !important only to outrank the blanket border-bottom: 0 that neutralises
   the editor's inline rule; both go together the day that is cleared. */
.faq-index .wp-block-details:last-of-type {
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #16181D) 12%, var(--wp--preset--color--base, #fff)) !important;
    padding-bottom: var(--wp--preset--spacing--30, 1rem);
}

/* ── Next steps ───────────────────────────────────────────────────────── */
/* Cross-links out of the page: same ruled index as the guide lists, with the
   second line explaining where the link goes. */
.hb-next .guide-index li span {
    display: block;
    color: var(--wp--preset--color--secondary, #6B7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 400;
}