/* ==========================================================================
   Heimdal Page Builder

   00. Design tokens and shared styles
   01. Hero
   02. Console
   03. Metrics
   04. Value cards
   05. Platform
   06. Security stack placeholder
   07. Margin calculator placeholder
   08. Integrations
   09. Partner tiers
   10. Partner benefits
   11. MXDR
   12. Testimonials
   13. Resources
   14. Responsive
   ========================================================================== */

/* ==========================================================================
   00. Design tokens and shared styles
   ========================================================================== */

:root {
    --hpb-bg: #020611;
    --hpb-surface: #070d1d;
    --hpb-surface-soft: rgba(12, 22, 44, .72);
    --hpb-border: #18365d;
    --hpb-blue: #0065fe;
    --hpb-blue-light: #80b2ff;
    --hpb-copy: #bfd8ff;
    --hpb-white: #fff;
    --hpb-pink: #ff2f70;
    --hpb-green: #30c779;
}

.hpb-page,
.hpb-page * {
    box-sizing: border-box;
}

/* Page background - same as the product page dark mode (product-page.css): one
   fixed, covering image from the header to the footer. The sections are
   transparent so it shows through; the header, mega menu, mobile bars and footer
   switch to the same glass treatment. The image is served from the media CDN. */
body:has(.hpb-page) {
    background: #000 url('https://heimdalsecuritymedia.blob.core.windows.net/website/img/redesign-v4/product-page/main-page-bg.jpg') no-repeat center center fixed;
    background-size: cover;
}

body:has(.hpb-page) .site-header,
body:has(.hpb-page) .global-bg {
    background: rgb(0 0 0 / 60%);
    backdrop-filter: blur(40px);
}

body:has(.hpb-page) footer,
body:has(.hpb-page) footer::before,
body:has(.hpb-page) footer::after {
    background: transparent;
}

body:has(.hpb-page) .mobile-top-bar,
body:has(.hpb-page) .menu-open .header-mobile-wrapper {
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(40px);
}

body:has(.hpb-page) footer .footer-container .footer-link {
    color: #bfd8ff;
}

body:has(.hpb-page) .cta-v3:after {
    content: none;
}

.hpb-page {
    /* Height of the fixed site header (115px mobile header below 1000px) and of the
       sticky section menu; the menu and the anchor targets offset by them. */
    --hpb-site-header: 8.125rem;
    --hpb-subnav: 3.5625rem;
    color: var(--hpb-white);
    font-family: "Nunito Sans", Arial, sans-serif;
    overflow-x: clip;
    overflow-y: visible;
}

.hpb-hero__grid>*,
.hpb-split>*,
.hpb-mxdr>*,
.hpb-tier-grid>*,
.hpb-resource-grid>*,
.hpb-logo-grid>*,
.hpb-review-grid>* {
    min-width: 0;
}

.hpb-page h1,
.hpb-page h2,
.hpb-page h3,
.hpb-page p {
    margin-top: 0;
}

.hpb-page h1,
.hpb-page h2,
.hpb-page h3 {
    color: var(--hpb-white);
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    overflow-wrap: anywhere;
}

.hpb-page h1 {
    font-size: clamp(3rem, 4.1vw, 5rem);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.05;
    margin-bottom: 2rem;
}

.hpb-page h2 {
    font-size: clamp(2.25rem, 2.604vw, 3.125rem);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.21;
    margin-bottom: 2rem;
}

.hpb-page h3 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.25;
}

.hpb-section {
    padding: 7.5rem 0;
    position: relative;
}

.hpb-section--compact {
    padding-bottom: 5rem;
    padding-top: 5rem;
}

.hpb-shell {
    margin: 0 auto;
    max-width: calc(105rem + 2 * clamp(1.25rem, 4vw, 4.5rem));
    padding: 0 clamp(1.25rem, 4vw, 4.5rem);
    width: 100%;
}

.hpb-eyebrow,
.hpb-card-kicker {
    color: var(--hpb-blue-light);
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: clamp(.95rem, 1.04vw, 1.25rem);
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.21;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.hpb-card-kicker {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: .375rem;
}

.hpb-lead,
.hpb-feature-list p,
.hpb-tier p,
.hpb-review p {
    color: var(--hpb-copy);
    font-size: 1.25rem;
    line-height: 1.55;
}

.hpb-section-heading {
    margin: 0 auto 6.25rem;
    max-width: 54.1875rem;
    text-align: center;
}

.hpb-section-heading .hpb-lead {
    margin: 0 auto;
    max-width: 48rem;
}

.hpb-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.hpb-button {
    align-items: center;
    border-radius: 2rem;
    display: inline-flex;
    font-size: 1.125rem;
    font-weight: 600;
    gap: 1.25rem;
    justify-content: center;
    letter-spacing: -.02em;
    line-height: 1.364;
    padding: .875rem 2.5rem;
    text-decoration: none !important;
    isolation: isolate;
    position: relative;
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out, color .3s ease-in-out;
    white-space: nowrap;
}

.hpb-button>img {
    flex: 0 0 auto;
    height: auto;
    max-width: none;
    transition: transform .3s ease-in-out;
    width: auto;
}

.hpb-button:hover {
    color: #fff;
}

.hpb-button--primary {
    background: linear-gradient(90deg, var(--hpb-pink), #ff2626);
    border: 1px solid transparent;
    color: #fff;
}

/* Figma hover (Smart Animate, ease-in-out, 0.3s): gradient turns flat pink. A
   gradient can't be transitioned, so a flat layer fades in over it. */
.hpb-button--primary::before {
    background: var(--hpb-pink);
    border-radius: inherit;
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity .3s ease-in-out;
    z-index: -1;
}

.hpb-button--primary:hover::before {
    opacity: 1;
}

/* Figma "Hover=On": the button keeps its width, the arrow slides 10px to the right
   (padding-right 40 -> 30, gap 20 -> 30). */
.hpb-button--primary:hover>img,
.hpb-button--primary:focus-visible>img {
    transform: translateX(.625rem);
}

.hpb-button--secondary {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}

.hpb-button--secondary:hover {
    background: #fff;
    color: #0a1a65;
}

.hpb-text-link {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.hpb-text-link span {
    color: var(--hpb-pink);
    margin-left: .5rem;
}

.hpb-text-link img {
    margin-left: .5rem;
    vertical-align: middle;
}

.hpb-split {
    display: grid;
    gap: 4.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
}

.hpb-split--top {
    align-items: start;
}

.hpb-sticky-copy {
    position: sticky;
    top: 15rem;
}

.hpb-sticky-copy .hpb-lead {
    max-width: 44rem;
}

.hpb-pipe-list {
    color: var(--hpb-copy);
    list-style: none;
    margin: 2rem 0;
    padding: 0;
}

.hpb-pipe-list li {
    font-size: 1.125rem;
    line-height: 1.5;
    margin-bottom: .65rem;
    padding-left: 1rem;
    position: relative;
}

.hpb-pipe-list li::before {
    color: var(--hpb-blue-light);
    content: "|";
    left: 0;
    position: absolute;
}

.hpb-natural-line {
    max-width: 100%;
    overflow: hidden;
}

.hpb-natural-line img {
    display: block;
}

.hpb-natural-line--center {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
}

.hpb-caret {
    margin-left: .35rem;
}

/* Section menu - Figma "Sub Menu" (17258:3211): a 57px bar under the hero that
   sticks below the fixed header. 907px of 18px links, spaced evenly. */
.hpb-page section[id] {
    scroll-margin-top: calc(var(--hpb-site-header) + var(--hpb-subnav));
}

.hpb-section-nav {
    -webkit-backdrop-filter: blur(40px);
    /* background: rgb(0 0 0 / 60%); */
    backdrop-filter: blur(40px);
    border-top: 1px solid transparent;
    height: var(--hpb-subnav);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    position: sticky;
    scrollbar-width: none;
    top: var(--hpb-site-header);
    z-index: 100;
}

.hpb-section-nav::-webkit-scrollbar {
    display: none;
}

/* The blue line only shows once the menu has stuck against the main header. */
.hpb-section-nav.is-stuck {
    background: rgb(0 0 0 / 60%);
    border-top-color: #0a1a66;
}

/* Draggable with the mouse (touch scrolls natively). */
.hpb-section-nav.is-draggable {
    cursor: grab;
}

.hpb-section-nav.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.hpb-section-nav.is-dragging a {
    pointer-events: none;
}

.hpb-section-nav__list {
    align-items: center;
    column-gap: 2rem;
    display: flex;
    height: 100%;
    justify-content: space-between;
    list-style: none;
    margin: 0 auto;
    max-width: 56.6875rem;
    min-width: max-content;
    padding: 0;
    width: 100%;
}

.hpb-section-nav__list li {
    margin: 0;
}

.hpb-section-nav a {
    color: var(--hpb-copy);
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: color .3s ease-in-out;
    white-space: nowrap;
}

.hpb-section-nav a:hover,
.hpb-section-nav a.is-active {
    color: #fff;
}

.hpb-section-nav a:focus-visible {
    outline: 2px solid var(--hpb-blue-light);
    outline-offset: 4px;
}

@media (max-width: 999px) {
    .hpb-page {
        --hpb-site-header: 5rem;
    }
}

@media (max-width: 1024px) {
    .hpb-section-nav__list {
        gap: 2rem;
        justify-content: flex-start;
        padding: 0 clamp(1.25rem, 4vw, 4.5rem);
        width: max-content;
    }
}

/* ==========================================================================
   01. Hero
   Figma frame 17197:1301 (1920 x 1080): 1680px container, 788px copy column,
   820 x 724 visual, 70px gutter. Visual layers are positioned in % of the
   820 x 724 box so they scale with it.
   ========================================================================== */
/* The site header is position:fixed and overlays the top of the page, so the hero
   clears it first: 130px desktop header (115px mobile header below 1000px), then
   the Figma gap of 126px at 1920 (copy starts at y=256), scaled with the width. */
.hpb-section.hpb-hero {
    --hpb-header: 3.125rem;
    padding-bottom: 6.25rem;
    padding-top: calc(var(--hpb-header) + clamp(2rem, 6.5625vw, 7.875rem));
}

@media (max-width: 999px) {
    .hpb-section.hpb-hero {
        --hpb-header: 7.1875rem;
    }
}

.hpb-hero__grid {
    align-items: stretch;
    display: grid;
    gap: 4.375rem;
    grid-template-columns: minmax(0, 788fr) minmax(0, 820fr);
}

.hpb-hero__content {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    justify-content: space-between;
}

.hpb-page .hpb-hero .hpb-eyebrow,
.hpb-page .hpb-console .hpb-eyebrow {
    font-size: clamp(.95rem, 1.04vw, 1.25rem);
    line-height: 1.21;
}

.hpb-page .hpb-hero h1 {
    font-size: clamp(2.5rem, 3.385vw, 4.0625rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    margin-bottom: 2rem;
}

.hpb-hero .hpb-lead {
    font-size: clamp(1rem, 1.25vw, 1.5rem);
    line-height: 1.364;
    margin-bottom: 0;
    max-width: 44.0625rem;
}

.hpb-hero .hpb-actions {
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.hpb-hero__visual {
    align-self: start;
    aspect-ratio: 820 / 724;
    justify-self: stretch;
    width: 100%;
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.hpb-hero__image,
.hpb-hero__orb {
    max-width: none;
    pointer-events: none;
    position: absolute;
}

.hpb-hero__image {
    height: 162.98%;
    left: -13.41%;
    object-fit: cover;
    top: -40.19%;
    width: 222.68%;
}

.hpb-hero__orb--one {
    height: 180.11%;
    left: -56.83%;
    top: 15.19%;
    width: 213.78%;
}

.hpb-hero__orb--two {
    height: 87.85%;
    left: -32.44%;
    top: 61.33%;
    width: 165%;
}

.hpb-hero__blob {
    align-items: center;
    display: flex;
    height: 225.48%;
    justify-content: center;
    left: 38.06%;
    mix-blend-mode: soft-light;
    pointer-events: none;
    position: absolute;
    top: 41.59%;
    transform: translate(-50%, -50%);
    width: 303.98%;
}

.hpb-hero__blob-layer {
    flex: none;
    height: 79.85%;
    opacity: .5;
    overflow: hidden;
    position: relative;
    transform: rotate(171.51deg) scaleY(-1);
    width: 93.3%;
}

.hpb-hero__blob-layer img {
    height: 100%;
    left: 4.83%;
    max-width: none;
    position: absolute;
    top: -1.89%;
    width: 100%;
}

.hpb-ratings {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem clamp(.75rem, 2.6vw, 3.125rem);
}

/* The three ratings always stay on one row: items shrink with the column instead of wrapping. */
.hpb-ratings__item {
    align-items: flex-start;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.hpb-ratings__score {
    align-items: center;
    display: flex;
    gap: clamp(.375rem, .6vw, .75rem);
}

.hpb-ratings__score strong {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    font-weight: 700;
    line-height: 1.364;
    white-space: nowrap;
}

.hpb-ratings__stars {
    flex: none;
    height: auto;
    width: clamp(4.5rem, 5.6vw, 6.75rem);
}

.hpb-ratings__logo {
    height: auto;
    max-width: 100%;
    width: auto;
}

/* Phones: the three ratings share one row instead of stacking one per line - each
   is centred, score over stars over logo, scaled to its third of the width. */
@media (max-width: 640px) {
    .hpb-ratings {
        display: grid;
        gap: 1rem .5rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hpb-ratings__item {
        align-items: center;
        gap: .625rem;
        min-width: 0;
    }

    .hpb-ratings__score {
        flex-direction: column;
        gap: .25rem;
    }

    .hpb-ratings__score strong {
        font-size: 1.125rem;
    }

    .hpb-ratings__stars {
        height: auto;
        max-width: 100%;
        width: 5.25rem;
    }

    .hpb-ratings__logo {
        max-height: 1.75rem;
        object-fit: contain;
        width: auto;
    }
}

/* MXDR visual - Figma frame 17197:2088: the 820 x 724 artwork is a single
   exported image inside a 30px-radius, 1px #408bfe frame. */
.hpb-mxdr__visual {
    aspect-ratio: 820 / 724;
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    overflow: hidden;
}

.hpb-mxdr__visual img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Hero responsive */
@media (max-width: 1024px) {
    .hpb-hero__content {
        gap: 4rem;
        max-width: 48rem;
    }

    .hpb-page .hpb-hero h1 {
        font-size: clamp(2.5rem, 6.4vw, 3.75rem);
    }
}

@media (max-width: 820px) {
    .hpb-hero .hpb-actions {
        gap: 1.25rem;
    }
}

@media (max-width: 640px) {
    .hpb-page .hpb-hero h1 {
        font-size: clamp(2.2rem, 10vw, 2.75rem);
        line-height: 1.2;
    }

    .hpb-hero .hpb-actions {
        gap: .8rem;
    }

    .hpb-hero__content {
        gap: 3rem;
    }
}

/* ==========================================================================
   02. Console
   Figma frame 17197:1406: 788px sticky copy column, 72px gutter, 820px column
   of two 820 x 464 preview cards. Card contents scale with the card (cqw).
   ========================================================================== */
.hpb-console {
    padding-top: 11.125rem;
}

.hpb-console__grid {
    align-items: start;
    display: grid;
    gap: 4.5rem;
    grid-template-columns: minmax(0, 788fr) minmax(0, 820fr);
}

.hpb-console__copy {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: sticky;
    top: 15rem;
}

.hpb-console__intro .hpb-eyebrow {
    margin-bottom: .5rem;
}

.hpb-page .hpb-console h2 {
    font-size: clamp(2.25rem, 2.605vw, 3.125rem);
    letter-spacing: 0;
    line-height: 1.21;
    margin-bottom: 0;
}

.hpb-console .hpb-lead {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    line-height: 1.364;
    margin-bottom: 0;
}

.hpb-console__list {
    color: var(--hpb-copy);
    font-size: clamp(1rem, 1.04vw, 1.25rem);
    line-height: 1.364;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hpb-console__list li::before {
    content: "| ";
    white-space: pre;
}

.hpb-console__screens {
    display: grid;
    gap: 6.25rem;
}

.hpb-console-card__head {
    margin-bottom: 2.5rem;
    min-height: 5rem;
}

.hpb-console-card__kicker {
    color: var(--hpb-blue-light);
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.4;
    margin-bottom: .375rem;
    text-transform: uppercase;
}

.hpb-page .hpb-console-card h3 {
    font-size: clamp(1.75rem, 1.875vw, 2.25rem);
    font-weight: 600;
    line-height: 1.21;
    margin-bottom: 0;
}

.hpb-console-card__media {
    align-items: center;
    aspect-ratio: 820 / 464;
    background: linear-gradient(to top, #000, #0e1120);
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    container-type: inline-size;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.hpb-console-card__stage {
    aspect-ratio: 679 / 368;
    flex: none;
    position: relative;
    width: 82.8%;
}

.hpb-console-card__stage>img {
    height: 100%;
    inset: 0;
    max-width: none;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.hpb-console-card__tint {
    background: rgba(255, 91, 91, .56);
    inset: 0;
    position: absolute;
}

.hpb-console-card__title,
.hpb-console-card__note {
    color: #fff;
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-weight: 700;
    left: 50%;
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
}

.hpb-console-card__title {
    font-size: 6.22cqw;
    line-height: 9.76cqw;
    top: 17.66%;
    white-space: nowrap;
}

.hpb-console-card__note {
    font-size: 3.66cqw;
    line-height: 1.21;
    top: 50%;
    width: 75.1%;
}

/* Console responsive */
@media (max-width: 1200px) {
    .hpb-console {
        padding-top: 6rem;
    }
}

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

    .hpb-console__copy {
        max-width: 48rem;
        position: static;
    }

    .hpb-console__screens {
        gap: 4rem;
    }
}

@media (max-width: 640px) {
    .hpb-console {
        padding-top: 4rem;
    }

    .hpb-console__grid {
        gap: 3rem;
    }

    .hpb-console__screens {
        gap: 3rem;
    }

    .hpb-console-card__head {
        margin-bottom: 1.5rem;
        min-height: 0;
    }
}

/* ==========================================================================
   03. Metrics
   Figma frame 17197:1447: 1680 x 561 blue card (radius 30) with a soft-light
   glass layer, 860px heading, four 310px stats with a 57px gap.
   ========================================================================== */
.hpb-metrics {
    background: var(--hpb-blue);
    border: 1px solid #0065fe;
    border-radius: 1.875rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 6.25rem 1.5rem;
    position: relative;
}

/* The Figma height (561px) only applies at the 1920 design width; below it the card
   hugs its content so no empty band is left under the stats. */
@media (min-width: 1600px) {
    .hpb-metrics {
        min-height: 35.0625rem;
    }
}

.hpb-metrics__blob {
    aspect-ratio: 2058.856 / 1415.038;
    left: 48.15%;
    mix-blend-mode: soft-light;
    pointer-events: none;
    position: absolute;
    top: 52.17%;
    transform: translate(-50%, -50%);
    width: 122.47%;
}

.hpb-metrics__blob-layer {
    aspect-ratio: 1884.522 / 1056.957;
    left: 50%;
    opacity: .5;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-11.63deg);
    width: 91.53%;
}

.hpb-metrics__blob-layer img {
    height: 100.04%;
    left: -.05%;
    max-width: none;
    position: absolute;
    top: -.04%;
    width: 100.12%;
}

.hpb-metrics__content {
    margin: 0 auto;
    width: 100%;
    max-width: 88.1875rem;
    position: relative;
    text-align: center;
    z-index: 1;
}

.hpb-page .hpb-metrics h2 {
    font-size: clamp(2rem, 2.604vw, 3.125rem);
    letter-spacing: 0;
    line-height: 1.21;
    margin: 0 auto;
    max-width: 53.75rem;
}

.hpb-metrics__grid {
    display: grid;
    gap: 3.5625rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 4.5rem;
}

.hpb-metrics__item {
    display: flex;
    flex-direction: column;
    gap: 1.3125rem;
}

.hpb-metrics__item strong {
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: clamp(3rem, 4.167vw, 5rem);
    font-weight: 700;
    line-height: 1;
}

.hpb-metrics__item span {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    font-weight: 600;
    line-height: 1.364;
}

@media (max-width: 1024px) {
    .hpb-metrics {
        padding-bottom: 4.5rem;
        padding-top: 4.5rem;
    }

    .hpb-metrics__grid {
        gap: 3rem 2rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 3.5rem;
    }
}

@media (max-width: 640px) {
    .hpb-metrics {
        border-radius: 1.15rem;
        padding: 3.5rem 1.25rem;
    }

    /* The card is tall and narrow here: size the glass layer from the card height so it
       covers the whole card and its rotated edges stay outside it. */
    .hpb-metrics__blob {
        height: 180%;
        left: 50%;
        top: 50%;
        width: auto;
    }

    .hpb-metrics__grid {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 2.5rem;
    }

    .hpb-metrics__item {
        gap: .65rem;
    }
}

/* ==========================================================================
   04. Value cards
   ========================================================================== */
.hpb-tier-grid,
.hpb-resource-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(3, 1fr);
}

.hpb-tier,
.hpb-resource-grid article {
    background: rgba(5, 9, 28, .45);
    border: 1px solid var(--hpb-border);
    border-radius: 1rem;
    overflow: hidden;
}

.hpb-tier>div:last-child,
.hpb-resource-grid article>div:last-child {
    padding: 2.5rem;
}

.hpb-tier h3,
.hpb-resource-grid h3 {
    margin-bottom: 1.4rem;
}

/* Value cards - Figma frame 17197:1466: three 533px cards, 40px gap, 300px
   full-bleed image on top, 40px padding for the copy. Image crops come from
   the design, expressed in % of the 534 x 300 image box. */
.hpb-value-grid,
.hpb-integration-grid,
.hpb-quote-track {
    display: flex;
    gap: 2.5rem;
    /* Breathing room around the cards, cancelled by the negative margins: the 1px border
       is never clipped by a fractional scroll offset and the hover glow (20px blur + 8px
       spread) has room inside the scroll box instead of being cut off. */
    margin-block: -2rem;
    margin-inline: -1.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-block: 2rem;
    padding-inline: 1.75rem;
    position: relative;
    scroll-padding-inline: 1.75rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.hpb-value-grid::-webkit-scrollbar,
.hpb-integration-grid::-webkit-scrollbar,
.hpb-quote-track::-webkit-scrollbar {
    display: none;
}

@media (hover: hover) {

    .hpb-value-grid,
    .hpb-integration-grid,
    .hpb-quote-track {
        cursor: grab;
        /* Pressing and moving must drag the row, never start a text selection. */
        user-select: none;
        -webkit-user-select: none;
        will-change: scroll-position;
    }
}

.hpb-value-grid.is-dragging,
.hpb-integration-grid.is-dragging,
.hpb-quote-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

/* After a drag the row glides to its snap point on its own; snapping is off meanwhile. */
.hpb-value-grid.is-settling,
.hpb-integration-grid.is-settling,
.hpb-quote-track.is-settling {
    scroll-snap-type: none;
}

/* No width animation while the row is dragged, or the cards would shift under the pointer. */
.hpb-quote-track.is-dragging .hpb-quote {
    transition: none;
}

.hpb-value-card {
    background: rgba(5, 9, 28, .4);
    flex: 0 0 calc((100% - 5rem) / 3);
    scroll-snap-align: start;
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hpb-value-card__media {
    aspect-ratio: 534 / 300;
    background: #000;
    overflow: hidden;
    position: relative;
}

.hpb-value-card__media img {
    height: 102%;
    left: 49.31%;
    max-width: none;
    object-fit: cover;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 102.25%;
}

.hpb-value-card__media--2 img {
    height: 121%;
    left: 50%;
    top: 49.83%;
    width: 121.35%;
}

.hpb-value-card__media--3 img {
    aspect-ratio: 805.599 / 451.49;
    height: auto;
    left: 61.83%;
    top: 80.43%;
    transform: translate(-50%, -50%) rotate(15deg);
    width: 150.86%;
}

.hpb-value-card__body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2.5rem;
}

.hpb-value-card .hpb-card-kicker {
    margin-bottom: .375rem;
}

.hpb-page .hpb-value-card h3 {
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 500;
    line-height: 1.21;
    margin-bottom: 0;
}

.hpb-value-card__copy {
    color: var(--hpb-copy);
    font-size: clamp(1rem, 1.04vw, 1.25rem);
    line-height: 1.364;
    margin-bottom: 0;
}

.hpb-value-dots {
    align-items: center;
    display: flex;
    gap: .4375rem;
    justify-content: center;
    margin-top: 2.5rem;
}

.hpb-value-dots[hidden] {
    display: none;
}

/* Figma "Component 26" (14229:2884): a window of up to three 6px pills sliding over one
   pill per page.
   First page: [active 54] [next 114]    Middle: [prev 23] [active 114] [next 23]
   Last page:  [prev 114] [active 54]
   Every pill animates its width and colour, so changing page slides the window: the pill
   that leaves folds to nothing, the one that enters grows out of nothing. */
.hpb-value-dots button {
    background: rgba(0, 76, 190, .7);
    border: 0;
    border-radius: 100px;
    cursor: pointer;
    flex: none;
    height: .375rem;
    margin-left: -.4375rem;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    transition: width .45s cubic-bezier(.4, 0, .2, 1), margin .45s cubic-bezier(.4, 0, .2, 1),
        opacity .45s ease, background-color .45s ease;
    width: 0;
}

.hpb-value-dots button[data-pos] {
    margin-left: 0;
    opacity: 1;
    pointer-events: auto;
}

.hpb-value-dots button[data-pos="current"] {
    background: var(--hpb-blue);
    width: 7.125rem;
}

.hpb-value-dots button[data-pos="prev"],
.hpb-value-dots button[data-pos="next"] {
    width: 1.4375rem;
}

.hpb-value-dots[data-state="first"] button[data-pos="current"],
.hpb-value-dots[data-state="last"] button[data-pos="current"] {
    width: 3.375rem;
}

.hpb-value-dots[data-state="first"] button[data-pos="next"],
.hpb-value-dots[data-state="last"] button[data-pos="prev"] {
    width: 7.125rem;
}

/* Collapsed pills sit next to the first / last visible one without leaving a gap. */
.hpb-value-dots button:not([data-pos]) {
    margin-left: -.4375rem;
}

.hpb-value-dots button:focus-visible,
.hpb-value-grid:focus-visible,
.hpb-integration-grid:focus-visible,
.hpb-quote-track:focus-visible {
    outline: 2px solid var(--hpb-blue-light);
    outline-offset: 4px;
}

/* Carousel at every width: 3 cards per view, 2 on tablet, 1 on mobile */
@media (max-width: 1024px) {

    .hpb-value-grid,
    .hpb-integration-grid,
    .hpb-quote-track {
        gap: 1.5rem;
    }

    .hpb-value-card {
        flex-basis: calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 640px) {
    .hpb-value-card {
        flex-basis: 100%;
    }

    .hpb-value-card__body {
        gap: 1.5rem;
        padding: 1.5rem;
    }
}

/* ==========================================================================
   05. Platform (feature list reused by section 10)
   ========================================================================== */
.hpb-feature-list {
    border-top: 1px solid var(--hpb-border);
    overflow: hidden;
}

.hpb-feature-list article {
    align-items: flex-start;
    border-bottom: 1px solid var(--hpb-border);
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 2.25rem 1fr 1rem;
    padding: 1.8rem 0;
}

.hpb-feature-list article>img {
    height: 2.25rem;
    object-fit: contain;
    width: 2.25rem;
}

.hpb-feature-list h3 {
    margin: .15rem 0 .7rem;
}

.hpb-feature-list p {
    font-size: 1.08rem;
    margin-bottom: 0;
}

.hpb-feature-list article>span {
    color: var(--hpb-blue-light);
    font-size: 1.4rem;
}

/* Platform and partner-benefits sections - Figma frames 17197:1506 and
   17197:1991: two 820px columns with a 40px gap; each row is a 36px icon +
   24px title, a 20px description, and 50px of space either side of a 1px
   #408bfe divider. Buttons sit 32px under the lead, 40px apart. */
.hpb-split-list .hpb-split {
    gap: 2.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hpb-split-list .hpb-sticky-copy .hpb-lead {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    line-height: 1.375;
    margin-bottom: 0;
    max-width: none;
}

.hpb-split-list .hpb-actions {
    gap: 1.25rem 2.5rem;
    margin-top: 2rem;
}

.hpb-module-item {
    border-bottom: 1px solid #408bfe;
    padding: 3.125rem 0;
}

.hpb-module-item:first-child {
    padding-top: 0;
}

.hpb-module-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.hpb-module-item__head {
    align-items: center;
    display: flex;
    gap: 1.25rem;
}

.hpb-module-item__head img {
    flex: none;
    height: 2.25rem;
    width: 2.25rem;
}

.hpb-page .hpb-module-item h3 {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
}

.hpb-module-item p {
    color: var(--hpb-copy);
    font-size: clamp(1rem, 1.04vw, 1.25rem);
    line-height: 1.364;
    margin: 1.25rem 0 0;
}

@media (max-width: 1024px) {
    .hpb-split-list .hpb-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   06. Security stack placeholder

   The heading uses shared styles. The future PHP include will own the body.
   ========================================================================== */

/* ==========================================================================
   07. Margin calculator

   The calculator markup is template-parts/msp-calculator/calculator.php and its
   behaviour is msp-calculator.js; the stylesheet of the standalone calculator
   page is NOT loaded here. This is the page-builder look, Figma frame
   17197:1596: one 1680px card (30px radius, 40px padding) holding two rows -
   environment | cost settings, then comparison table | profit cards.
   ========================================================================== */
.hpb-margin-calculator-section .hpb-section-heading .hpb-lead {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    line-height: 1.364;
    max-width: 53.8125rem;
}

.hpb-calc-note {
    color: var(--hpb-copy);
    font-size: .875rem;
    line-height: 1.4;
}

.hpb-margin-calculator-section .msp-calculator {
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    color: #fff;
    font-family: "Nunito Sans", Arial, sans-serif;
    overflow: hidden;
    padding: 2.5rem;
    margin-bottom: 1rem;
}

.hpb-margin-calculator-section .calc-result {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.hpb-margin-calculator-section .msp-grid-row {
    align-items: start;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: minmax(0, 451fr) minmax(0, 1107fr);
}

.hpb-margin-calculator-section .msp-grid-row.results-row {
    grid-template-columns: minmax(0, 738fr) minmax(0, 821fr);
}

.hpb-margin-calculator-section .msp-grid-row>section {
    min-width: 0;
}

/* Section titles with their 1px rule */
.hpb-margin-calculator-section .section-title {
    border-bottom: 1px solid #408bfe;
    color: #fff;
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.21;
    margin: 0 0 1.5rem;
    padding-bottom: 1.25rem;
}

.hpb-margin-calculator-section .comparison-section .section-title {
    margin-bottom: 0;
}

.hpb-margin-calculator-section .summary-section .section-title {
    margin-bottom: 2.25rem;
}

/* Switches */
.hpb-margin-calculator-section .toggle-container {
    align-items: center;
    display: flex;
    gap: .75rem;
    height: 1.5rem;
    margin-bottom: 1.5rem;
}

.hpb-margin-calculator-section .toggle-switch {
    display: inline-block;
    flex: none;
    height: 1.5rem;
    margin: 0;
    position: relative;
    width: 2.75rem;
}

.hpb-margin-calculator-section .toggle-switch input {
    cursor: pointer;
    height: 100%;
    inset: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.hpb-margin-calculator-section .toggle-slider {
    background: #d2d5da;
    border-radius: 100px;
    inset: 0;
    position: absolute;
    transition: background-color .3s ease-in-out;
}

.hpb-margin-calculator-section .toggle-slider::before {
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 2px 4px rgba(39, 39, 39, .1);
    content: "";
    height: 1.25rem;
    left: .125rem;
    position: absolute;
    top: .125rem;
    transition: transform .3s ease-in-out;
    width: 1.25rem;
}

.hpb-margin-calculator-section .toggle-switch input:checked+.toggle-slider {
    background: #0065fe;
}

.hpb-margin-calculator-section .toggle-switch input:checked+.toggle-slider::before {
    transform: translateX(1.25rem);
}

.hpb-margin-calculator-section .toggle-switch input:focus-visible+.toggle-slider {
    outline: 2px solid var(--hpb-blue-light);
    outline-offset: 2px;
}

.hpb-margin-calculator-section .toggle-label {
    color: #fff;
    font-size: 1.0625rem;
    line-height: 1.2;
}

/* Fields */
.hpb-margin-calculator-section .inputs-grid {
    display: grid;
    gap: 1.125rem;
}

.hpb-margin-calculator-section .input-field {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin: 0;
    min-width: 0;
    position: relative;
}

.hpb-margin-calculator-section .input-field label {
    color: inherit;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hpb-margin-calculator-section .input-field input,
.hpb-margin-calculator-section .input-field select {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(5, 9, 28, .4);
    border: 1px solid #fff;
    border-radius: .625rem;
    box-shadow: none;
    color: #fff;
    font-family: inherit;
    font-size: 1.0625rem;
    height: 3rem;
    line-height: 1.3;
    margin: 0;
    padding: 0 1.3125rem;
    width: 100%;
}

.hpb-margin-calculator-section .input-field input[type="number"] {
    -moz-appearance: textfield;
}

.hpb-margin-calculator-section .input-field input::-webkit-outer-spin-button,
.hpb-margin-calculator-section .input-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hpb-margin-calculator-section .input-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='7' viewBox='0 0 13 7'%3E%3Cpath d='M1.2 .5h10.6L6.5 6.5z' fill='%23fff'/%3E%3C/svg%3E");
    background-position: right 1.3125rem center;
    background-repeat: no-repeat;
    cursor: pointer;
    padding-right: 3rem;
}

.hpb-margin-calculator-section .input-field select option {
    background: #05091c;
    color: #fff;
}

.hpb-margin-calculator-section .input-field input:focus-visible,
.hpb-margin-calculator-section .input-field select:focus-visible {
    border-color: var(--hpb-blue-light);
    outline: 2px solid var(--hpb-blue-light);
    outline-offset: 2px;
}

/* The currency symbol is the CSS variable msp-calculator.js keeps up to date */
.hpb-margin-calculator-section .input-field.has-currency input {
    padding-left: 2.4rem;
}

.hpb-margin-calculator-section .input-field.has-currency::before {
    bottom: .78rem;
    content: var(--currency-symbol, "$");
    font-size: 1.0625rem;
    left: 1.3125rem;
    line-height: 1.3;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

/* Left column: stacked fields. Its title sits inside the grid (the right-hand titles sit
   above theirs), so the title margin is reduced by the grid gap to line the rows up. */
.hpb-margin-calculator-section .environment-section .inputs-grid {
    gap: 1.125rem;
}

.hpb-margin-calculator-section .environment-section .inputs-grid>.subsection-title {
    margin-bottom: -.25rem;
}

/* Right column: revenue | cost settings (greyed until custom mode is on) */
.hpb-margin-calculator-section .settings-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: minmax(0, 247fr) minmax(0, 820fr);
}

.hpb-margin-calculator-section .subsection-title {
    color: #fff;
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 .875rem;
}

.hpb-margin-calculator-section .inputs-grid.three-columns {
    gap: 1.125rem 2.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hpb-margin-calculator-section .settings-disabled .subsection-title,
.hpb-margin-calculator-section .settings-disabled .input-field,
.hpb-margin-calculator-section .settings-disabled .input-field.has-currency::before {
    color: #848cb2;
}

.hpb-margin-calculator-section .settings-disabled .input-field input {
    border-color: #848cb2;
    color: #848cb2;
    cursor: not-allowed;
}

/* Cost comparison table: label | multi-tool | Heimdal, a 1px rule under each row */
/* Figma columns (738px table): label 264, two value columns of 237 with no gap - the
   margin boxes (max 220px) are centred in their column, which leaves the 17px between them. */
.hpb-margin-calculator-section .table-header,
.hpb-margin-calculator-section .table-row {
    column-gap: 0;
    display: grid;
    grid-template-columns: minmax(0, 264fr) minmax(0, 237fr) minmax(0, 237fr);
}

.hpb-margin-calculator-section .table-header {
    align-items: center;
    margin-bottom: 1.25rem;
    padding-top: 1.75rem;
}

.hpb-margin-calculator-section .header-cell {
    color: #fff;
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.hpb-margin-calculator-section .header-cell.right,
.hpb-margin-calculator-section .table-cell.right {
    text-align: center;
}

.hpb-margin-calculator-section .header-cell.blue {
    color: #408bfe;
}

.hpb-margin-calculator-section .table-row {
    align-items: center;
    border-bottom: 1px solid #252f5f;
    padding: 1.125rem 0;
}

.hpb-margin-calculator-section .table-header+.table-row {
    padding-top: 0;
}

.hpb-margin-calculator-section .table-cell {
    color: #fff;
    font-size: 1.0625rem;
    line-height: 1.3;
    min-height: 2.0625rem;
    min-width: 0;
    display: flex;
    align-items: center;
}

.hpb-margin-calculator-section .table-cell.right {
    justify-content: center;
}

.hpb-margin-calculator-section .table-cell.bold.right {
    font-weight: 700;
}

.hpb-margin-calculator-section .row-total .table-cell,
.hpb-margin-calculator-section .row-margin .table-cell {
    min-height: 2.4375rem;
}

.hpb-margin-calculator-section .row-total .table-cell:first-child,
.hpb-margin-calculator-section .row-margin .table-cell:first-child {
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}

.hpb-margin-calculator-section .cost-highlight,
.hpb-margin-calculator-section .savings-highlight {
    font-size: 1.5rem;
    font-weight: 700;
}

.hpb-margin-calculator-section .cost-highlight {
    color: #bb82ff;
}

.hpb-margin-calculator-section .savings-highlight {
    color: #0065fe;
}

.hpb-margin-calculator-section .row-margin {
    border-bottom: 0;
}

.hpb-margin-calculator-section .row-margin .table-cell.bigger {
    min-height: 3.9375rem;
}

.hpb-margin-calculator-section .margin-wrapper {
    align-items: center;
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    height: 3.9375rem;
    justify-content: center;
    max-width: 13.75rem;
    min-width: 0;
    width: 100%;
}

.hpb-margin-calculator-section #tbl-mt-margin .margin-wrapper {
    border: 1px solid #bb82ff;
}

.hpb-margin-calculator-section #tbl-h-margin .margin-wrapper {
    background: #0065fe;
}

.hpb-margin-calculator-section .margin-value,
.hpb-margin-calculator-section .margin-positive {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.hpb-margin-calculator-section .margin-sub {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.2;
}

.hpb-margin-calculator-section .margin-sub.gray {
    color: #e8d5ff;
}

.hpb-margin-calculator-section .margin-sub.green {
    color: #bfd8ff;
}

/* Profit cards */
.hpb-margin-calculator-section .summary-card {
    border: 1px solid #bb82ff;
    border-radius: 1.25rem;
    box-shadow: 0 1px 18px rgba(2, 80, 198, .1);
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    justify-content: center;
    margin: 0 0 1.25rem;
    min-height: 9.6875rem;
    padding: 1.25rem 1.875rem;
}

.hpb-margin-calculator-section .summary-card.card-highlight {
    background: #0065fe;
    border-color: #408bfe;
}

.hpb-margin-calculator-section .summary-card:nth-of-type(3) {
    border-color: #a2ea56;
}

.hpb-margin-calculator-section .card-title {
    color: #fff;
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.hpb-margin-calculator-section .card-amount {
    color: #bb82ff;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -.0167em;
    line-height: 1.2;
    margin: 0;
}

.hpb-margin-calculator-section .card-highlight .card-amount {
    color: #fff;
}

.hpb-margin-calculator-section .card-amount.green {
    color: #83e31e;
}

.hpb-margin-calculator-section .card-amount .period {
    color: #bfd8ff;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 0;
}

.hpb-margin-calculator-section .card-amount .period.white {
    color: #fff;
}

.hpb-margin-calculator-section .card-description,
.hpb-margin-calculator-section .card-annual {
    color: #bfd8ff;
    font-size: 1.0625rem;
    line-height: 1.2;
    margin: -.75rem 0 0;
}

.hpb-margin-calculator-section .card-highlight .card-description {
    color: #fff;
}

.hpb-margin-calculator-section .card-annual {
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: 1rem;
}

.hpb-margin-calculator-section .card-annual span {
    color: #17a34a;
    font-family: "Nunito Sans", Arial, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
}

/* Buttons */
.hpb-margin-calculator-section .cta-container {
    display: flex;
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.hpb-margin-calculator-section .cta-container .btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 1.875rem;
    display: inline-flex;
    flex: 1 1 0;
    font-size: 1.125rem;
    font-weight: 600;
    height: 3rem;
    justify-content: center;
    letter-spacing: -.02em;
    line-height: 1.2;
    min-width: 0;
    padding: .875rem 2.5rem;
    text-decoration: none;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
    white-space: nowrap;
}

.hpb-margin-calculator-section .cta-container .btn-outline {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.hpb-margin-calculator-section .cta-container .btn-outline:hover {
    background: #fff;
    color: #0a1a65;
}

.hpb-margin-calculator-section .cta-container .btn-primary {
    background: linear-gradient(90deg, var(--hpb-pink), #ff2626);
    color: #fff;
    font-size: 1.3125rem;
    isolation: isolate;
    padding: .625rem 2.5rem;
    position: relative;
}

/* Same hover as the other primary buttons: the gradient fades to flat pink */
.hpb-margin-calculator-section .cta-container .btn-primary::before {
    background: var(--hpb-pink);
    border-radius: inherit;
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity .3s ease-in-out;
    z-index: -1;
}

.hpb-margin-calculator-section .cta-container .btn-primary:hover::before {
    opacity: 1;
}

.hpb-margin-calculator-section .cta-container .btn:focus-visible {
    outline: 2px solid var(--hpb-blue-light);
    outline-offset: 4px;
}

@media (max-width: 1200px) {

    .hpb-margin-calculator-section .msp-grid-row,
    .hpb-margin-calculator-section .msp-grid-row.results-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .hpb-margin-calculator-section .settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hpb-margin-calculator-section .revenue-section .inputs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hpb-margin-calculator-section .inputs-grid.three-columns {
        gap: 1.125rem 1.5rem;
    }
}

/* Same breakpoint and organisation as msp-calculator.css: the column headers are
   hidden and every row stacks - the row label on top (centred, with a rule under
   it), then each column's name over its value, with the margin % under the value. */
@media (max-width: 768px) {
    .hpb-margin-calculator-section .table-header {
        display: none;
    }

    .hpb-margin-calculator-section .table-row,
    .hpb-margin-calculator-section .table-header+.table-row {
        gap: .625rem;
        grid-template-columns: minmax(0, 1fr);
        padding: 1rem 0;
    }

    .hpb-margin-calculator-section .table-cell {
        flex-direction: column;
        font-size: 1rem;
        gap: .125rem;
        justify-content: center;
        min-height: 0;
        text-align: center;
    }

    .hpb-margin-calculator-section .table-row .table-cell:first-child {
        border-bottom: 1px solid #252f5f;
        font-weight: 600;
        padding-bottom: .5rem;
    }

    .hpb-margin-calculator-section .row-total .table-cell:first-child,
    .hpb-margin-calculator-section .row-margin .table-cell:first-child {
        font-size: 1.0625rem;
        justify-content: center;
    }

    .hpb-margin-calculator-section .table-row .table-cell:nth-child(2)::before,
    .hpb-margin-calculator-section .table-row .table-cell:nth-child(3)::before {
        font-size: .8125rem;
        font-weight: 600;
        margin-bottom: .125rem;
    }

    .hpb-margin-calculator-section .table-row .table-cell:nth-child(2)::before {
        color: #bfd8ff;
        content: "Multi-Tool Setup:";
    }

    .hpb-margin-calculator-section .table-row .table-cell:nth-child(3)::before {
        color: #408bfe;
        content: "Heimdal Unified Platform:";
    }

    .hpb-margin-calculator-section .row-margin .table-cell:nth-child(n+2) {
        gap: .5rem;
    }

    .hpb-margin-calculator-section .summary-card {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .hpb-margin-calculator-section .msp-calculator {
        padding: 1.5rem;
    }

    .hpb-margin-calculator-section .revenue-section .inputs-grid,
    .hpb-margin-calculator-section .inputs-grid.three-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .hpb-margin-calculator-section .summary-card {
        padding: 1.25rem;
    }

    .hpb-margin-calculator-section .card-amount {
        font-size: 1.75rem;
    }

    .hpb-margin-calculator-section .cta-container {
        flex-direction: column;
        gap: .8rem;
    }

    .hpb-margin-calculator-section .cta-container .btn {
        flex: none;
        width: 100%;
    }
}

/* ==========================================================================
   08. Integrations
   ========================================================================== */
.hpb-logo-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(3, 1fr);
}

.hpb-logo-grid article {
    align-items: center;
    border: 1px solid var(--hpb-border);
    border-radius: .75rem;
    display: grid;
    gap: 1.75rem;
    min-height: 11rem;
    padding: 2.25rem;
    text-align: center;
}

.hpb-logo-grid img {
    height: 3rem;
    margin: 0 auto;
    max-width: 14rem;
    object-fit: contain;
    width: 100%;
}

.hpb-logo-grid span {
    color: var(--hpb-copy);
    font-size: .85rem;
}

/* Integrations - Figma frame 17197:1814: three 300px cards (30px radius,
   40px gap); the logo is centred above a 1px divider and a 20px label.
   The cards are a scroll-snap carousel (page-builder.js) that reuses the
   value-cards dots. */
.hpb-integrations .hpb-text-link {
    align-items: center;
    color: var(--hpb-blue-light);
    display: inline-flex;
    font-size: 1.25rem;
    gap: 1.8125rem;
}

.hpb-integrations .hpb-text-link img {
    margin: 0;
    transition: transform .3s ease-in-out;
}

/* Figma "Type=Hover": the arrow slides 9px to the right, text stays put */
.hpb-integrations .hpb-text-link:hover img,
.hpb-integrations .hpb-text-link:focus-visible img {
    transform: translateX(.5625rem);
}

.hpb-integrations .hpb-text-link:focus-visible {
    outline: 2px solid var(--hpb-blue-light);
    outline-offset: 4px;
}

.hpb-integration-card {
    background: rgba(5, 9, 28, .4);
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    display: flex;
    flex: 0 0 calc((100% - 5rem) / 3);
    flex-direction: column;
    min-height: 18.75rem;
    padding: 0 2.5rem;
    scroll-snap-align: start;
}

.hpb-integration-card__logo {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 1.5rem 0;
}

.hpb-integration-card__logo img {
    height: auto;
    max-width: 100%;
}

.hpb-integration-card__label {
    border-top: 1px solid #408bfe;
    color: var(--hpb-copy);
    line-height: 1.364;
    margin: 0;
    padding: 1.25rem 0;
    text-align: center;
}

.hpb-integration-card__label {
    font-size: clamp(1rem, 1.04vw, 1.25rem);
}

@media (max-width: 1024px) {
    .hpb-integration-card {
        flex-basis: calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 640px) {
    .hpb-integration-card {
        flex-basis: 100%;
        padding: 0 1.5rem;
    }
}

/* ==========================================================================
   09. Partner tiers
   ========================================================================== */
/* Partner cards - Figma frame 17197:1855: three 533px cards (30px radius,
   40px gap). The 534 x 300 tier artwork is a single image that bleeds to the
   card edges; the copy sits in a 40px padded body below it. */
.hpb-partner-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hpb-partner-card {
    background: rgba(5, 9, 28, .4);
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    overflow: hidden;
}

.hpb-partner-card__media {
    aspect-ratio: 534 / 300;
    overflow: hidden;
}

.hpb-partner-card__image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hpb-partner-card__body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2.5rem;
}

.hpb-partner-card .hpb-card-kicker {
    margin-bottom: .375rem;
}

.hpb-page .hpb-partner-card h3 {
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 500;
    line-height: 1.21;
    margin-bottom: 0;
}

.hpb-partner-card__copy {
    color: var(--hpb-copy);
    font-size: clamp(1rem, 1.04vw, 1.25rem);
    line-height: 1.364;
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .hpb-partner-grid {
        gap: 1.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .hpb-partner-card__body {
        gap: 1.5rem;
        padding: 1.5rem;
    }
}

/* ==========================================================================
   10. Partner benefits

   Reuses the split layout, buttons and feature-list styles from sections
   00 and 05.
   ========================================================================== */

/* ==========================================================================
   11. MXDR
   ========================================================================== */
/* MXDR - Figma frame 17197:2065: a 788px copy column and the 820px visual,
   73px apart. The copy column stacks intro, stat card and button 40px apart. */
.hpb-mxdr {
    align-items: start;
    display: grid;
    gap: 4.5625rem;
    grid-template-columns: minmax(0, 788fr) minmax(0, 820fr);
}

.hpb-mxdr__content {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.hpb-mxdr__content .hpb-lead {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    line-height: 1.364;
    margin-bottom: 0;
    max-width: none;
}

.hpb-mxdr__stat {
    background: rgba(5, 9, 28, .4);
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    padding: 2.5rem;
    width: 100%;
}

.hpb-mxdr__stat .hpb-card-kicker {
    margin-bottom: .5rem;
}

.hpb-page .hpb-mxdr__number {
    border-bottom: 1px solid #408bfe;
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: clamp(3rem, 3.385vw, 4.0625rem);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
}

.hpb-mxdr__points {
    color: var(--hpb-copy);
    font-size: clamp(1rem, 1.04vw, 1.25rem);
    line-height: 1.364;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hpb-mxdr__points li {
    padding-left: 1rem;
    position: relative;
}

.hpb-mxdr__points li::before {
    content: "|";
    left: 0;
    position: absolute;
}

/* ==========================================================================
   12. Testimonials
   ========================================================================== */
/* Reviews - Figma frame 17197:2096 / 17197:2100. Desktop shows a pair of cards: the first
   open (2/3 of the row), the second at 1/3. Hovering the second swaps them; leaving
   restores the default. The carousel moves two cards at a time. */
.hpb-quote {
    --quote-w: calc((100% - 5rem) / 3);
    background: #000;
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    display: flex;
    flex: 0 0 var(--quote-w);
    flex-direction: column;
    height: 39.3125rem;
    justify-content: space-between;
    overflow: hidden;
    padding: 2.5rem;
    scroll-snap-align: start;
    transition: flex-basis .45s cubic-bezier(.4, 0, .2, 1), box-shadow .5s ease;
}

@media (min-width: 1025px) {
    .hpb-quote {
        scroll-snap-align: none;
    }

    /* Each pair spans the full row: wide card (two small ones plus a gap) + gap + small card. */
    .hpb-quote:nth-child(odd) {
        flex-basis: calc(var(--quote-w) * 2 + 2.5rem);
        scroll-snap-align: start;
    }

    /* A last card without a partner keeps the room of its missing small card, so the
       final page still lines up with the row. */
    .hpb-quote:last-child:nth-child(odd) {
        margin-right: calc(var(--quote-w) + 2.5rem);
    }

    /* Hover swap inside a pair (classes set by page-builder.js). */
    .hpb-quote.is-wide {
        flex-basis: calc(var(--quote-w) * 2 + 2.5rem);
    }

    .hpb-quote.is-narrow {
        flex-basis: var(--quote-w);
    }
}

.hpb-quote__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.hpb-quote__head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.hpb-quote__who {
    align-items: center;
    display: flex;
    gap: 1.5rem;
    min-width: 0;
}

.hpb-quote__who img {
    border-radius: 50%;
    flex: none;
    height: 4.25rem;
    object-fit: cover;
    width: 4.1875rem;
}

.hpb-quote__who>div {
    min-width: 0;
}

.hpb-quote__name,
.hpb-quote__date {
    color: var(--hpb-blue-light);
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
    margin: 0;
    text-transform: uppercase;
}

.hpb-quote__date {
    flex: none;
    padding-top: .375rem;
    white-space: nowrap;
}

.hpb-quote__role {
    color: var(--hpb-copy);
    font-size: clamp(1rem, 1.04vw, 1.25rem);
    line-height: 1.4;
    margin: .125rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hpb-page .hpb-quote h3 {
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 500;
    line-height: 1.25;
    margin: 1rem 0 0;
}

.hpb-quote__body {
    color: var(--hpb-copy);
    font-size: clamp(1rem, 1.04vw, 1.25rem);
    line-height: 1.364;
    margin-top: 2rem;
    min-height: 0;
    overflow: hidden;
}

/* Fade only the reviews whose text is actually cut (class set by page-builder.js). */
.hpb-quote__body.is-clipped {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 4rem), transparent);
    mask-image: linear-gradient(#000 calc(100% - 4rem), transparent);
}

.hpb-quote__body p {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 1.25rem;
}

.hpb-quote__body strong {
    color: var(--hpb-copy);
    font-weight: 700;
}

.hpb-quote__source {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
}

.hpb-quote__logo {
    align-self: flex-start;
    height: 1.5rem;
    width: auto;
}

.hpb-quote__rating {
    align-items: center;
    display: flex;
    gap: .9375rem;
}

.hpb-quote__rating span {
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
}

.hpb-platform-strip {
    align-items: center;
    border-bottom: 1px solid #408bfe;
    border-top: 1px solid #408bfe;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 2.625rem;
    justify-content: center;
    margin-top: 2.5rem;
    padding: 5.5rem 0;
}

.hpb-platform-strip__item {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    justify-content: space-between;
    min-height: 4.6875rem;
    width: 13.75rem;
}

.hpb-platform-strip__logo {
    height: 2.5rem;
    max-width: 10rem;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .hpb-quote {
        flex-basis: calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 640px) {
    .hpb-quote {
        flex-basis: 100%;
        height: auto;
        min-height: 31rem;
        padding: 1.5rem;
    }

    .hpb-quote__body {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hpb-quote__head {
        flex-wrap: wrap;
    }

    /* Phones: two platforms per row, each logo over its stars and score */
    .hpb-platform-strip {
        display: grid;
        gap: 2rem 1.25rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 3rem 0;
    }

    /* Every logo gets the same box, so the stars and scores line up across a row */
    .hpb-platform-strip__item {
        gap: .75rem;
        justify-content: flex-start;
        min-height: 0;
        min-width: 0;
        width: auto;
    }

    .hpb-platform-strip__logo {
        height: 2.25rem;
        max-width: 8.5rem;
        object-fit: contain;
        width: 100%;
    }

    .hpb-platform-strip .hpb-quote__rating {
        gap: .5rem;
        justify-content: center;
    }

    .hpb-platform-strip .hpb-quote__rating img {
        height: auto;
        max-width: 100%;
        width: 5.25rem;
    }
}

/* ==========================================================================
   13. Resources
   ========================================================================== */
/* Resource cards - Figma frame 17197:2629: three 533px cards (30px radius,
   40px gap, 539px tall). The 534 x 300 artwork is a single image that bleeds
   to the card edges; the 24px eyebrow is larger than the shared 20px one. */
.hpb-resources .hpb-eyebrow {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    letter-spacing: .02em;
    line-height: 1.4;
}

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

.hpb-resource-card {
    background: rgba(5, 9, 28, .4);
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hpb-resource-card__media {
    aspect-ratio: 534 / 304;
    overflow: hidden;
}

.hpb-resource-card__image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hpb-resource-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2.5rem;
    justify-content: space-between;
    padding: 2.5rem;
}

.hpb-resource-card .hpb-card-kicker {
    margin-bottom: .5rem;
}

.hpb-page .hpb-resource-card h3 {
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 500;
    line-height: 1.21;
    margin-bottom: 0;
}

/* Figma "Button text - Learn More" (Light Blue): the arrow slides 9px on hover */
.hpb-resource-card__link {
    align-items: center;
    align-self: flex-start;
    color: var(--hpb-blue-light);
    display: inline-flex;
    font-size: clamp(1rem, 1.09vw, 1.3125rem);
    font-weight: 700;
    gap: 1.8125rem;
    text-decoration: none;
}

.hpb-resource-card__link img {
    flex: none;
    transition: transform .3s ease-in-out;
}

.hpb-resource-card__link:hover img,
.hpb-resource-card__link:focus-visible img {
    transform: translateX(.5625rem);
}

.hpb-resource-card__link:focus-visible {
    outline: 2px solid var(--hpb-blue-light);
    outline-offset: 4px;
}

@media (max-width: 1024px) {
    .hpb-resource-cards {
        gap: 1.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hpb-resource-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .hpb-resource-card__body {
        gap: 1.5rem;
        padding: 1.5rem;
    }
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

@media (max-width: 1440px) {
    .hpb-shell {
        max-width: 90rem;
        padding-left: clamp(1.5rem, 4vw, 3.75rem);
        padding-right: clamp(1.5rem, 4vw, 3.75rem);
    }

    .hpb-hero__grid,
    .hpb-mxdr {
        gap: 3.5rem;
    }

    .hpb-tier-grid,
    .hpb-resource-grid,
    .hpb-logo-grid {
        gap: 2rem;
    }
}

@media (max-width: 1200px) {
    .hpb-section {
        padding-bottom: 6rem;
        padding-top: 6rem;
    }

    .hpb-section--compact {
        padding-bottom: 4.5rem;
        padding-top: 4.5rem;
    }

    .hpb-page h1 {
        font-size: clamp(3rem, 5.8vw, 4.25rem);
    }

    .hpb-page h2 {
        font-size: clamp(2.25rem, 4.5vw, 2.85rem);
    }

    .hpb-hero__grid,
    .hpb-mxdr {
        grid-template-columns: minmax(0, .95fr) minmax(27rem, 1.05fr);
    }


    .hpb-split {
        gap: 3.5rem;
    }


    .hpb-feature-list article {
        grid-template-columns: 2.25rem minmax(0, 1fr) 1rem;
    }

    .hpb-review-platforms {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {

    .hpb-hero__grid,
    .hpb-split,
    .hpb-mxdr {
        grid-template-columns: minmax(0, 1fr);
    }

    .hpb-hero__content,
    .hpb-sticky-copy,
    .hpb-mxdr>div:first-child {
        max-width: 48rem;
    }

    .hpb-hero__visual,
    .hpb-mxdr__visual {
        justify-self: center;
        max-width: 51.25rem;
        width: 100%;
    }

    .hpb-sticky-copy {
        position: static;
    }




    .hpb-tier-grid,
    .hpb-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hpb-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hpb-feature-list {
        margin-top: 1rem;
    }

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

@media (max-width: 820px) {
    .hpb-section {
        padding-bottom: 5rem;
        padding-top: 5rem;
    }

    .hpb-section-heading {
        margin-bottom: 4rem;
    }

    .hpb-page h1 {
        font-size: clamp(2.7rem, 8vw, 3.65rem);
    }

    .hpb-page h2 {
        font-size: clamp(2rem, 6vw, 2.6rem);
    }

    .hpb-lead,
    .hpb-feature-list p,
    .hpb-tier p,
    .hpb-review p {
        font-size: 1.125rem;
    }

    .hpb-hero__grid,
    .hpb-split,
    .hpb-mxdr {
        gap: 3rem;
    }







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

    .hpb-review-platforms {
        gap: 1.5rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {

    .hpb-tier-grid,
    .hpb-resource-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .hpb-shell {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hpb-section,
    .hpb-section--compact {
        padding-bottom: 4rem;
        padding-top: 4rem;
    }

    .hpb-page h1 {
        font-size: clamp(2.35rem, 11.5vw, 3rem);
        letter-spacing: -.035em;
        line-height: 1.08;
        margin-bottom: 1.5rem;
    }

    .hpb-page h2 {
        font-size: clamp(1.9rem, 9vw, 2.4rem);
        letter-spacing: -.025em;
        line-height: 1.15;
        margin-bottom: 1.5rem;
    }

    .hpb-page h3 {
        font-size: 1.3rem;
    }

    .hpb-eyebrow,
    .hpb-card-kicker {
        font-size: .86rem;
        letter-spacing: .07em;
    }

    .hpb-lead,
    .hpb-feature-list p,
    .hpb-tier p,
    .hpb-review p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .hpb-section-heading {
        margin-bottom: 3rem;
    }

    .hpb-actions {
        align-items: stretch;
        flex-direction: column;
        gap: .8rem;
        width: 100%;
    }

    .hpb-button {
        font-size: 1rem;
        padding: .75rem 1.35rem;
        white-space: normal;
        width: 100%;
    }

    .hpb-hero__grid,
    .hpb-split,
    .hpb-mxdr {
        gap: 2.5rem;
    }

    .hpb-hero__visual,
    .hpb-mxdr__visual {
        border-radius: 1.15rem;
    }











    .hpb-pipe-list {
        margin: 1.5rem 0;
    }

    .hpb-pipe-list li {
        font-size: 1rem;
    }







    .hpb-tier-grid,
    .hpb-resource-grid,
    .hpb-logo-grid,
    .hpb-review-grid {
        gap: 1.25rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .hpb-tier>div:last-child,
    .hpb-resource-grid article>div:last-child {
        padding: 1.5rem;
    }

    .hpb-feature-list article {
        gap: .9rem;
        grid-template-columns: 2rem minmax(0, 1fr) .8rem;
        padding: 1.35rem 0;
    }

    .hpb-feature-list article>img {
        height: 2rem;
        width: 2rem;
    }

    .hpb-feature-list h3 {
        margin-top: 0;
        overflow-wrap: anywhere;
    }

    .hpb-natural-line {
        display: none;
    }

    .hpb-logo-grid article {
        min-height: 9rem;
        padding: 1.75rem 1.25rem;
    }

    .hpb-tier__visual {
        min-height: 12rem;
    }

    .hpb-mxdr__stat {
        padding: 1.5rem;
    }

    .hpb-review {
        min-height: 0;
        padding: 1.5rem;
    }

    .hpb-review header img {
        height: 3rem;
        width: 3rem;
    }

    .hpb-review-platforms {
        gap: 1.25rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 3rem;
        padding: 1.5rem 0;
    }

    .hpb-resource-grid__art {
        height: auto;
        min-height: 13rem;
    }
}

@media (max-width: 420px) {
    .hpb-page h1 {
        font-size: 2.2rem;
    }

    .hpb-page h2 {
        font-size: 1.8rem;
    }




    .hpb-feature-list article {
        grid-template-columns: 1.8rem minmax(0, 1fr);
    }

    .hpb-feature-list article>img {
        height: 1.8rem;
        width: 1.8rem;
    }

    .hpb-feature-list article>span {
        display: none;
    }

    .hpb-review footer {
        align-items: flex-start;
        flex-direction: column;
        gap: .6rem;
    }

    .hpb-review-platforms {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   15. Proportional desktop scaling (Figma "fit width")
   The design is drawn at 1920px. From 1025px up the whole page scales like the Figma
   preview: rem follows the viewport width (16px at 1920, floored at 10px), so every
   rem-sized gap, padding, card and image scales with the text. The tablet and phone
   layouts below 1025px are untouched. The desktop-narrowing overrides of section 14
   are undone here so the layout keeps its 1920 proportions.
   ========================================================================== */
@media (min-width: 1025px) {
    html:has(.hpb-page) {
        font-size: clamp(10px, .8333vw, 16px);
    }

    .hpb-section {
        padding-bottom: 7.5rem;
        padding-top: 7.5rem;
    }

    .hpb-section--compact {
        padding-bottom: 5rem;
        padding-top: 5rem;
    }

    .hpb-shell {
        max-width: calc(105rem + 2 * clamp(1.25rem, 4vw, 4.5rem));
        padding-left: clamp(1.25rem, 4vw, 4.5rem);
        padding-right: clamp(1.25rem, 4vw, 4.5rem);
    }

    /* The header container follows the section container: undo the 90rem cap that
       common-27 applies up to 1440px, which no longer matches the scaled sections. */
    html:has(.hpb-page) header.site-header .layout-container {
        max-width: calc(105rem + 2 * clamp(1.25rem, 4vw, 4.5rem));
        padding-inline: clamp(1.25rem, 4vw, 4.5rem);
    }

    .hpb-hero__grid {
        gap: 4.375rem;
        grid-template-columns: minmax(0, 788fr) minmax(0, 820fr);
    }

    .hpb-mxdr {
        gap: 4.5625rem;
        grid-template-columns: minmax(0, 788fr) minmax(0, 820fr);
    }

    .hpb-tier-grid,
    .hpb-resource-grid,
    .hpb-logo-grid {
        gap: 2.5rem;
    }
}

/* ==========================================================================
   16. Footer
   Figma frame 17197:2670: same content as the site footer, restyled for this page:
   section container, 120px vertical padding, five columns spread across the 1680px
   width, 18px Inter titles (2.7px tracking), 17px links 20px apart, 32.67px slogan,
   24px social icons in the order Facebook, LinkedIn, YouTube, X.
   Scoped to pages with .hpb-page; below 1025px the site footer layout is kept.
   ========================================================================== */
@media (min-width: 1025px) {
    body:has(.hpb-page) footer .footer-container {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: calc(105rem + 2 * clamp(1.25rem, 4vw, 4.5rem));
        padding-left: clamp(1.25rem, 4vw, 4.5rem);
        padding-right: clamp(1.25rem, 4vw, 4.5rem);
        width: 100%;
    }

    body:has(.hpb-page) footer .footer-top {
        flex-wrap: nowrap;
        gap: 2rem;
        justify-content: space-between;
        padding-bottom: 7.5rem;
        padding-top: 7.5rem;
    }

    /* Column widths from the Figma (240 / 352 / 129 / 208 / 263px); with space-between they
       sit 121px apart in the 1680px container. */
    body:has(.hpb-page) footer .footer-col {
        flex: none;
    }

    body:has(.hpb-page) footer .footer-top>.first-col {
        width: 15rem;
    }

    body:has(.hpb-page) footer .footer-top>.footer-col:nth-child(2) {
        width: 22rem;
    }

    body:has(.hpb-page) footer .footer-top>.footer-col:nth-child(3) {
        width: 8.0625rem;
    }

    body:has(.hpb-page) footer .footer-top>.footer-col:nth-child(4) {
        width: 13rem;
    }

    body:has(.hpb-page) footer .footer-top>.last-col {
        width: 16.4375rem;
    }

    body:has(.hpb-page) footer .footer-col.first-col {
        gap: 2.5rem;
        justify-content: flex-start;
    }

    body:has(.hpb-page) footer .footer-container .branding img {
        max-width: none;
        width: 15rem;
    }

    body:has(.hpb-page) footer .footer-container .slogan {
        color: var(--hpb-blue-light);
        font-size: 2.0417rem;
        line-height: 1.2862;
        margin: 2.5rem 0 0;
        max-width: 15rem;
    }

    body:has(.hpb-page) footer .footer-container .footer-title {
        color: #fff;
        display: block;
        font-family: "Inter", "Nunito Sans", Arial, sans-serif;
        font-size: 1.125rem;
        font-weight: 700;
        letter-spacing: .16875rem;
        line-height: normal;
        margin-bottom: 2rem;
        min-height: 0;
        white-space: nowrap;
    }

    /* The button is wider than the 240px logo column (Figma: 255px) and never wraps. */
    body:has(.hpb-page) footer .footer-container .cta-box .cta-v3 {
        flex-wrap: nowrap;
        white-space: nowrap;
        width: max-content;
    }

    body:has(.hpb-page) footer .footer-container .links-wrapper {
        gap: 1.25rem;
    }

    /* The title sits in the link list here: 20px gap + 12px = the 32px of the other columns. */
    body:has(.hpb-page) footer .footer-container .links-wrapper>.footer-title {
        margin-bottom: .75rem;
    }

    body:has(.hpb-page) footer .footer-container .footer-link {
        color: var(--hpb-copy);
        font-size: 1.0625rem;
        line-height: .9;
        margin-bottom: 0;
        white-space: nowrap;
    }

    /* The registered mark must not stretch its row. */
    body:has(.hpb-page) footer .footer-container .footer-link sup {
        line-height: 0;
    }

    body:has(.hpb-page) footer .footer-container .footer-link:hover {
        color: #fff;
    }

    body:has(.hpb-page) footer .footer-container .follow-box .footer-title {
        margin-bottom: 2rem;
    }

    body:has(.hpb-page) footer .footer-container .icons-box {
        gap: 1.5rem;
    }

    body:has(.hpb-page) footer .footer-container .icons-box img {
        height: 1.5rem;
        width: 1.5rem;
    }

    body:has(.hpb-page) footer .footer-container .icons-box a:nth-child(3) {
        order: 1;
    }

    body:has(.hpb-page) footer .footer-container .icons-box a:nth-child(1) {
        order: 2;
    }

    body:has(.hpb-page) footer .footer-container .icons-box a:nth-child(2) {
        order: 3;
    }

    body:has(.hpb-page) footer .footer-container .icons-box a:nth-child(4) {
        order: 4;
    }

    /* Copyright line (Figma 17197:2782): no rule above it, one centred 14px line in
       60% #bfd8ff. The markup's line break is dropped so the address follows the
       copyright on the same line. */
    body:has(.hpb-page) footer hr {
        display: none;
    }

    body:has(.hpb-page) footer .footer-container .footer-address {
        padding: 0 0 1.5rem;
        text-align: center;
    }

    body:has(.hpb-page) footer .footer-container .footer-address p {
        color: rgba(191, 216, 255, .6);
        font-size: .875rem;
        font-weight: 400;
        line-height: normal;
        margin: 0;
    }

    body:has(.hpb-page) footer .footer-container .footer-address br {
        display: none;
    }
}
/* ==========================================================================
   17. Blue-border glow
   Every element with the blue (#408bfe / #0065fe) border gets the same glow on hover.
   The carousel tracks and the hero / MXDR visuals leave room for it (see section 04).
   ========================================================================== */
.hpb-hero__visual,
.hpb-mxdr__visual,
.hpb-mxdr__stat,
.hpb-console-card__media,
.hpb-metrics,
.hpb-value-card,
.hpb-integration-card,
.hpb-partner-card,
.hpb-resource-card,
.hpb-margin-calculator-section .msp-calculator,
.hpb-margin-calculator-section .summary-card.card-highlight {
    transition: box-shadow .5s ease;
}

.hpb-hero__visual:hover,
.hpb-mxdr__visual:hover,
.hpb-mxdr__stat:hover,
.hpb-console-card__media:hover,
.hpb-metrics:hover,
.hpb-value-card:hover,
.hpb-integration-card:hover,
.hpb-partner-card:hover,
.hpb-resource-card:hover,
.hpb-quote:hover,
.hpb-margin-calculator-section .msp-calculator:hover,
.hpb-margin-calculator-section .summary-card.card-highlight:hover {
    box-shadow: 0 0 20px 8px #408bfe8c;
}

/* ==========================================================================
   18. Image zoom
   The resource cards and the value cards zoom their image on hover. Each image sits in
   a box that clips it (hpb-resource-card__media, hpb-value-card__media), so the zoom
   stays inside the card. `scale` is used rather than `transform` because the value-card
   images already carry a translate / rotate.
   ========================================================================== */
.hpb-resource-card__image,
.hpb-value-card__media img {
    transition: scale .5s ease;
}

.hpb-resource-card:hover .hpb-resource-card__image,
.hpb-value-card:hover .hpb-value-card__media img {
    scale: 1.05;
}

@media (prefers-reduced-motion: reduce) {
    .hpb-resource-card:hover .hpb-resource-card__image,
    .hpb-value-card:hover .hpb-value-card__media img {
        scale: none;
    }
}