/* Two-column hero content — background lines: stripe-payments-background.css */

@font-face {
    font-family: universalSans;
    src: url(https://x.ai/_next/static/media/UniversalSans_Text_400-s.p.06he22w9ae9uz.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: universalSans;
    src: url(https://x.ai/_next/static/media/UniversalSans_Text_550-s.p.0v0vvoupxwn1c.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: universalSans;
    src: url(https://x.ai/_next/static/media/UniversalSans_Text_550-s.p.0v0vvoupxwn1c.woff2) format("woff2");
    font-weight: 550;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "universalSans Fallback";
    src: local(Arial);
    ascent-override: 89.92%;
    descent-override: 22.73%;
    line-gap-override: 0%;
    size-adjust: 105.67%;
}

/*
 * Inter display cuts — real 600/700 for confident hero titles.
 * Universal Sans only ships 400/550 on this site; 700 was faux-bold or thin 550.
 * Inter is a close neo-grotesque, so it pairs cleanly without a new “brand font.”
 */
@font-face {
    font-family: "InterDisplay";
    src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "InterDisplay";
    src: url("/fonts/Inter-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.ame-hero-section {
    --font-hero-text: var(--font-universal-sans, "universalSans", "universalSans Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    /* Bold display face for the headline only; UI chrome stays Universal Sans */
    --font-hero-display: "InterDisplay", "Inter", var(--font-hero-text);
    box-sizing: border-box;
    width: 100%;
    margin-inline: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    --tw-text-opacity: 1;
    color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}

.ame-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 3rem;
    align-items: start;
}

@media screen and (min-width: 1024px) {
    /*
     * Hero grid is full-bleed inside the column so the 50% dashed guide
     * is the true column mid-line (not the padded content mid-line).
     * Left / right columns each own one half; card centers in the right half
     * between the dashed guide and the right vertical border.
     */
    .ame-hero-section .stripe-section-container {
        padding-inline: 0;
    }

    .ame-hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        /* Top-align so headline + card form one high band (not mid-column centered) */
        align-items: start;
    }

    .ame-hero-copy {
        /* Match page content inset on the left; keep clear of center guide */
        padding-inline-start: var(--stripe-content-margin, 16px);
        padding-inline-end: clamp(1.5rem, 3.5vw, 2.75rem);
        /* Optical nudge with cinematic card top edge */
        padding-top: 0.25rem;
    }

    .ame-hero-media-col {
        /* Right half: film-frame card owns the column */
        display: flex;
        justify-content: center;
        align-items: flex-start;
        box-sizing: border-box;
        width: 100%;
        min-height: 100%;
        margin-top: 0;
        padding-inline: clamp(0.75rem, 2vw, 1.5rem);
    }

    .ame-hero-video-card {
        /* Fill the right half; cinematic width */
        width: 100%;
        max-width: min(44rem, 100%);
        margin-inline: 0;
    }
}

/* x.ai Tailwind base reset on copy block (matches *, :before, :after) */
.ame-hero-copy,
.ame-hero-copy *:not(.ame-hero__actions):not(.ame-hero__actions *),
.ame-hero-copy *:not(.ame-hero__actions):not(.ame-hero__actions *)::before,
.ame-hero-copy *:not(.ame-hero__actions):not(.ame-hero__actions *)::after {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #3b82f680;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    border-color: hsl(var(--border) / 1);
    overflow-anchor: none;
}

.ame-hero-copy *::before,
.ame-hero-copy *::after {
    --tw-content: "";
}

.ame-hero-copy {
    position: relative;
    z-index: 10;
    isolation: isolate;
    transform: translateZ(0);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    /* Slightly higher left column */
    margin-top: 0.125rem;
}

.ame-hero-copy {
    font-family: var(--font-hero-text);
    font-synthesis: none; /* never faux-bold; only real Universal Sans cuts */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
 * Eyebrow — quiet label above the display line.
 * Real 550 cut, slightly open tracking (premium product label).
 */
.ame-hero-copy .ame-hero__eyebrow {
    margin: 0;
    color: #5b6570;
    font-family: var(--font-hero-text);
    font-size: 0.8125rem; /* 13px */
    font-weight: 550;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.35;
}

/*
 * Hero title — bold + confident, size restrained so the video card still wins.
 * Real Inter 700 (not faux Universal Sans bold).
 */
.ame-hero-copy .ame-hero__title {
    position: relative;
    z-index: 1;
    margin: 0.875rem 0 0;
    font-family: var(--font-hero-display);
    font-size: 40px;
    font-weight: 700;
    font-synthesis: none;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: #050505;
    text-wrap: balance;
}

@media screen and (min-width: 768px) {
    .ame-hero-copy .ame-hero__title {
        font-size: 46px;
        letter-spacing: -0.038em;
    }
}

@media screen and (min-width: 1024px) {
    .ame-hero-copy .ame-hero__title {
        font-size: 55px;
        letter-spacing: -0.04em;
    }
}

.ame-hero-copy .ame-hero__title-secondary,
.ame-hero-copy .ame-hero__dynamic-unit {
    display: inline-block;
    position: relative;
    z-index: 1;
    color: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.ame-hero-copy .ame-hero__dynamic-flex {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    clip-path: inset(-6px -6px -0.2em 0);
    min-width: var(--hero-dynamic-width, auto);
}

.ame-hero__dynamic-measure {
    visibility: hidden;
    position: absolute;
    white-space: nowrap;
    pointer-events: none;
}

.ame-hero__dynamic-text,
.ame-hero__dynamic-measure {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

.ame-hero-copy .ame-hero__dynamic-text {
    display: inline;
    line-height: inherit;
}

/* Vertical caret — slow symmetric opacity pulse */
.ame-hero-copy .ame-hero__dynamic-cursor {
    display: inline-block;
    width: 2px;
    height: 0.78em;
    background-color: currentColor;
    border-radius: 1px;
    vertical-align: 0.02em;
    position: relative;
    top: 0;
    left: 3px;
    opacity: 1;
    flex-shrink: 0;
}

.ame-hero-copy .ame-hero__dynamic-cursor--blinking {
    animation: ame-hero-cursor-blink 1s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    will-change: opacity;
}

@keyframes ame-hero-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ame-hero-copy .ame-hero__dynamic-cursor--blinking {
        animation: none;
    }
}

/*
 * Subhead — supporting voice under the display title.
 * Softer color + regular cut so the title reads denser by contrast.
 */
.ame-hero-copy .ame-hero__subheader {
    margin: 1.125rem 0 0;
    max-width: 26rem;
    font-family: var(--font-hero-text); /* keep UI sans — bold Inter is title-only */
    font-size: 1.0625rem; /* 17px */
    font-weight: 400;
    font-synthesis: none;
    color: #425466;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

/* Proof chips — quiet coverage signals under subhead, above CTAs */
.ame-hero-copy .ame-hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1.125rem 0 0;
    padding: 0;
    list-style: none;
}

.ame-hero-copy .ame-hero__proof-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(66, 71, 112, 0.12);
    border-radius: 9999px;
    padding: 0.3125rem 0.6875rem;
    font-family: var(--font-hero-text);
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    font-synthesis: none;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: rgba(15, 23, 42, 0.62);
    background-color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
}

/* Primary + secondary CTA row */
.ame-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.ame-hero-media-col {
    position: relative;
    min-width: 0;
}

/*
 * Main video card — cinematic edge-to-edge film frame
 * Video flush to top/sides; caption band only at the bottom.
 * (border-primary/0.06, white fill, rounded-2xl, soft hover lift)
 */
.ame-hero-video-card {
    /* Caption band only — media is full-bleed within the card shell */
    --hero-card-pad-x: 1rem;
    --hero-card-pad-top: 0;
    --hero-card-pad-bottom: 1.125rem;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 44rem;
    min-width: 0;
    margin-inline: auto;
    /* Top/sides flush; only bottom caption padded */
    padding: 0 0 var(--hero-card-pad-bottom);
    overflow: hidden;
    border-radius: 1rem; /* rounded-2xl */
    border: 1px solid hsl(var(--primary) / 0.06);
    background-color: #fff;
    box-shadow:
        0 1px 2px hsl(var(--primary) / 0.03),
        0 4px 16px hsl(var(--primary) / 0.035);
    transition:
        border-color 500ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media screen and (min-width: 768px) {
    .ame-hero-video-card {
        --hero-card-pad-x: 1.125rem;
        --hero-card-pad-bottom: 1.25rem;
    }
}

@media screen and (min-width: 1100px) {
    .ame-hero-video-card {
        --hero-card-pad-x: 1.25rem;
        --hero-card-pad-bottom: 1.375rem;
    }
}

.ame-hero-video-card:hover {
    border-color: hsl(var(--primary) / 0.2);
    box-shadow:
        0 10px 15px -3px hsl(var(--primary) / 0.03),
        0 4px 6px -4px hsl(var(--primary) / 0.02),
        0 18px 40px -12px hsl(var(--primary) / 0.06);
}

.ame-hero-video-card:focus {
    outline: none;
}

.ame-hero-video-card:focus-visible {
    outline: 2px solid hsl(var(--primary) / 0.28);
    outline-offset: 3px;
}

.ame-hero-carousel-viewport {
    width: 100%;
    overflow: hidden;
    /* Square bottom under media; card radius clips the top film edge */
    border-radius: 0;
}

.ame-hero-slides-track {
    display: flex;
    transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .ame-hero-slides-track {
        transition: transform 0.2s ease;
    }

    .ame-hero-video-card {
        transition: none;
    }
}

.ame-hero-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    backface-visibility: hidden;
}

.ame-hero-media-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* Edge-to-edge film: no inner radius; shell clips top corners */
    border-radius: 0;
    box-shadow: none;
}

.ame-hero-slide-detail {
    /* Caption band under full-bleed media */
    margin-top: 0.875rem;
    padding-inline: var(--hero-card-pad-x, 1rem);
    /* Room for arrow controls on the right */
    padding-right: max(7.5rem, calc(var(--hero-card-pad-x, 1rem) + 6.75rem));
    padding-bottom: 0.15rem;
    min-height: 4rem;
}

@media screen and (min-width: 768px) {
    .ame-hero-slide-detail {
        margin-top: 1rem;
        padding-bottom: 0.2rem;
        min-height: 4.25rem;
    }
}

.ame-hero-media {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    border-radius: inherit;
}

.ame-hero-media__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #000;
}

/* Temporary solid black hero thumbnail (no video chrome) */
.ame-hero-media-col--black-placeholder .ame-hero-media__video,
.ame-hero-video-card.ame-hero-media-col--black-placeholder .ame-hero-media__video {
    opacity: 0;
    pointer-events: none;
}

.ame-hero__video-title {
    margin: 0;
    color: hsl(var(--primary));
    font-family: var(--font-hero-text);
    font-weight: 600;
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.ame-hero__video-meta {
    margin-top: 0.625rem;
}

/* Arrow buttons — caption band, aligned with title/tags */
.ame-hero-tweet-actions {
    position: absolute;
    right: var(--hero-card-pad-x, 1rem);
    bottom: var(--hero-card-pad-bottom, 1.125rem);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    z-index: 2;
}

/*
 * Exact Neuralink circular arrow controls
 * (._button_83178_16 / ._button_9dc7j_16 on neuralink.com)
 */
.ame-hero-nav-btn {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
    box-shadow: none;
    transition: background-color 0.3s linear;
}

@media screen and (min-width: 1400px) {
    .ame-hero-nav-btn {
        width: 56px;
        height: 56px;
    }
}

@media screen and (min-width: 1700px) {
    .ame-hero-nav-btn {
        width: 72px;
        height: 72px;
    }
}

.ame-hero-nav-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

@media screen and (min-width: 1700px) {
    .ame-hero-nav-btn svg {
        width: 24px;
        height: 24px;
    }
}

.ame-hero-nav-btn svg path {
    transition: all 0.3s linear;
}

.ame-hero-nav-btn:hover {
    background-color: #000;
}

.ame-hero-nav-btn:hover svg path {
    fill: #fff;
    stroke: #fff;
}

.ame-hero-nav-btn:focus {
    outline: none;
}

.ame-hero-nav-btn:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 2px;
}