/* Stripe stripe.com/en-ca background lines — HDS layout (2026) */

/*
 * stripe.com/en-ca (homepage HDS) layout — original margins:
 *   page-margin: 0 mobile, 16px from 640px+
 *   content-margin: 16px
 *   content max-width: 1264px (+2px borders → 1266)
 */
html.stripe-en-ca-layout {
    --stripe-border-color: #e5edf5;
    --stripe-page-margin: 0px;
    --stripe-content-margin: 16px;
    --stripe-content-max-width: 1264px;
    --stripe-content-max-width-borders: 1266px;
    --backgroundColor: #fff;
}

@media (min-width: 640px) {
    html.stripe-en-ca-layout {
        --stripe-page-margin: 16px;
    }
}

html.stripe-en-ca-layout body {
    background-color: var(--backgroundColor);
}

/* Outer page margin — equal left/right; column centers in remaining width */
.stripe-shell {
    box-sizing: border-box;
    width: 100%;
    padding-inline: var(--stripe-page-margin);
    background: var(--backgroundColor);
}

/* Continuous left/right margin lines — .section-container border-inline */
.stripe-shell__column {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: var(--stripe-content-max-width-borders);
    margin-left: auto;
    margin-right: auto;
    border-inline: none;
}

@media (min-width: 640px) {
    .stripe-shell__column {
        border-inline: 1px solid var(--stripe-border-color);
    }
}

/* x.ai glass header — translucent + blur; solid bottom edge via .site-header__border */
html.stripe-en-ca-layout .site-header {
    position: sticky;
    width: 100%;
    overflow: visible;
    background: var(--site-header-bg, hsl(0 0% 100% / 0.85));
    -webkit-backdrop-filter: saturate(180%) blur(var(--site-header-blur, 12px));
    backdrop-filter: saturate(180%) blur(var(--site-header-blur, 12px));
}

html.stripe-en-ca-layout .site-nav {
    background: transparent;
}

/* Remove legacy dashed pseudo-border — x.ai uses solid .site-header__border */
html.stripe-en-ca-layout .site-header::after {
    content: none;
    display: none;
}

/* Section content padding — section-container padding-inline */
.stripe-section-container {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    width: 100%;
    padding-inline: var(--stripe-content-margin);
}

.stripe-section {
    position: relative;
    background: var(--backgroundColor);
}

/* Hero background extends under nav — hero-section__background */
.stripe-section-background {
    position: absolute;
    z-index: 0;
    inset: calc(-1 * var(--site-header-height, 48px)) 0 0 0;
    overflow: hidden;
    pointer-events: none;
}

.stripe-fullbleed-line {
    position: absolute;
    z-index: 2;
    left: 0;
    width: 100%;
    height: 1px;
    border: none;
    /* Match site dashed guides (video library / stripe payments) */
    background: linear-gradient(
        90deg,
        var(--guideDashedColor, rgba(66, 71, 112, 0.09)),
        var(--guideDashedColor, rgba(66, 71, 112, 0.09)) 50%,
        transparent 0,
        transparent
    );
    background-size: 8px 1px;
    mix-blend-mode: multiply;
}

/* Replaced by .site-header::after full-viewport dashed rule */
.stripe-fullbleed-line--top {
    display: none !important;
}

.ame-hero-section.stripe-section {
    overflow: visible;
    --guideDashedColor: rgba(66, 71, 112, 0.09);
}

/*
 * Hero vertical rhythm — keep content high in the viewport.
 * Large top pad + centered columns made the band feel low / mid-screen.
 */
.ame-hero-section.stripe-section .stripe-section-container {
    padding-block: 1.5rem 2.75rem;
}

@media (min-width: 900px) {
    .ame-hero-section.stripe-section .stripe-section-container {
        padding-block: 1.75rem 3.5rem;
    }
}

@media (min-width: 1100px) {
    .ame-hero-section.stripe-section .stripe-section-container {
        padding-block: 2rem 4rem;
    }
}

.ame-hero-section .ame-hero-grid {
    position: relative;
    z-index: 1;
}