@layer home-reset, home-base, home-layout, home-components, home-motion;

@layer home-reset {
    html.macore-home {
        scrollbar-gutter: auto;
        overflow-y: auto;
        scrollbar-width: none;
        scroll-behavior: auto;
        scroll-padding-block-start: 5rem;
    }

    html.macore-home::-webkit-scrollbar {
        display: none;
    }

    body.macore-home,
    body.macore-home * {
        box-sizing: border-box;
    }

    body.macore-home {
        margin: 0;
    }

    body.macore-home h1,
    body.macore-home h2,
    body.macore-home h3,
    body.macore-home p,
    body.macore-home dl,
    body.macore-home dd,
    body.macore-home ul {
        margin: 0;
    }

    body.macore-home ul {
        padding: 0;
        list-style: none;
    }

    body.macore-home button {
        cursor: pointer;
    }
}

@layer home-base {
    @font-face {
        font-family: "Shuai Public Sans";
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: url("assets/shuai-api/public-sans.woff2") format("woff2");
    }

    @font-face {
        font-family: "Shuai Lora";
        font-style: normal;
        font-weight: 400 700;
        font-display: swap;
        src: url("assets/shuai-api/lora.woff2") format("woff2");
    }

    body.macore-home {
        --home-dark-background: oklch(13% 0.005 255deg);
        --home-background: var(--home-dark-background);
        --home-surface: oklch(15.5% 0.004 255deg);
        --home-surface-raised: oklch(18.5% 0.006 255deg);
        --home-foreground: oklch(95% 0.004 255deg);
        --home-muted: oklch(72% 0.008 255deg);
        --home-muted-foreground: oklch(56% 0.006 255deg);
        --home-line: oklch(100% 0 0deg / 0.1);
        --home-line-strong: oklch(100% 0 0deg / 0.16);
        --home-accent: oklch(62% 0.19 255deg);
        --home-accent-soft: oklch(70% 0.16 250deg);
        --home-accent-wash: oklch(62% 0.19 255deg / 0.14);
        min-inline-size: 20rem;
        overflow-x: clip;
        color: var(--home-foreground);
        background: var(--home-background);
        color-scheme: dark;
        font-family: "Shuai Public Sans", "MaCore Noto Sans SC", "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
        text-rendering: optimizeLegibility;
    }



    body.macore-home a {
        color: inherit;
        text-decoration: none;
    }

    body.macore-home button,
    body.macore-home a {
        -webkit-tap-highlight-color: transparent;
    }

    .home-skip-link {
        position: fixed;
        z-index: 80;
        inset-block-start: 0.75rem;
        inset-inline-start: 0.75rem;
        padding: 0.65rem 0.8rem;
        color: var(--home-background);
        background: var(--home-foreground);
        transform: translateY(-180%);
    }

    .home-skip-link:focus {
        transform: translateY(0);
    }
}

@layer home-layout {
    body.macore-home {
        container: home / inline-size;
    }

    .home-page {
        position: relative;
        z-index: 10;
        container: home / inline-size;
        overflow: clip;
    }

    .home-ambient-background {
        --home-entry-code-opacity: 0.8;
        --home-entry-ambient-opacity: 1;
        --home-entry-grid-opacity: 0.075;
        position: fixed;
        z-index: 0;
        inset: 0;
        overflow: hidden;
        opacity: var(--home-entry-ambient-opacity);
        pointer-events: none;
    }

    .home-ambient-background::before {
        position: absolute;
        z-index: 1;
        inset: 0;
        background-image:
            linear-gradient(to right, var(--home-foreground) 1px, transparent 1px),
            linear-gradient(to bottom, var(--home-foreground) 1px, transparent 1px);
        background-size: 3.25rem 3.25rem;
        opacity: var(--home-entry-grid-opacity);
        content: "";
    }

    .home-shell {
        inline-size: min(100% - 4rem, 80rem);
        margin-inline: auto;
    }

    .home-header {
        position: fixed;
        z-index: 40;
        inset-block-start: 0;
        inset-inline: 0;
        pointer-events: none;
    }

    .home-header-inner,
    .home-mobile-nav {
        pointer-events: auto;
    }

    .home-header-inner {
        inline-size: min(100%, 80rem);
        margin-inline: auto;
        padding-inline: 1rem;
        transition: margin 180ms ease, inline-size 180ms ease, padding 180ms ease, background 180ms ease, border-color 180ms ease, border-radius 180ms ease;
    }

    .home-header-bar {
        display: flex;
        align-items: center;
        gap: 0.125rem;
        min-block-size: 4rem;
        padding-inline: 0.5rem;
        transition: min-block-size 180ms ease;
    }

    .home-header.is-scrolled .home-header-inner,
    .home-menu-open .home-header-inner {
        inline-size: min(100%, 52rem);
        margin-block-start: 0;
        padding: 0.75rem 0.75rem 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
    }

    .home-header.is-scrolled .home-header-bar,
    .home-menu-open .home-header-bar {
        min-block-size: 3rem;
        padding-inline-start: 1rem;
        padding-inline-end: 0.375rem;
        border-radius: 0;
        background: color-mix(in oklch, var(--home-background) 95%, transparent);
        box-shadow: 0 0 0 1px color-mix(in oklch, var(--home-foreground) 7%, transparent);
    }

    .home-nav,
    .home-header-actions {
        display: flex;
        align-items: center;
    }

    .home-nav {
        gap: 0.125rem;
        margin-inline-start: auto;
    }

    .home-header-actions {
        justify-content: end;
        gap: 0.5rem;
        margin-inline-start: 0;
    }

    .home-mobile-nav {
        display: none;
    }

    .home-hero {
        position: relative;
        isolation: isolate;
        display: grid;
        min-block-size: 100svh;
        overflow: clip;
        background-color: color-mix(in oklch, var(--home-background) 14%, transparent);
        background-image:
            radial-gradient(circle at 58% 69%, var(--home-accent-wash), transparent 29rem),
            radial-gradient(circle at 11% 14%, color-mix(in oklch, var(--home-accent) 11%, transparent), transparent 22rem);
        background-size: auto, auto;
    }

    .home-code-canvas {
        position: absolute;
        z-index: 0;
        inset: 0;
        display: block;
        inline-size: 100%;
        block-size: 100%;
        opacity: var(--home-entry-code-opacity);
        pointer-events: none;
    }

    .home-code-noise {
        position: absolute;
        z-index: 1;
        inset: -3rem -5rem;
        display: grid;
        align-content: space-around;
        gap: 1.1rem;
        overflow: hidden;
        color: color-mix(in oklch, var(--home-foreground) 16%, transparent);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: clamp(0.52rem, 0.38rem + 0.22cqi, 0.72rem);
        font-weight: 600;
        line-height: 1.55;
        opacity: 0.72;
        transform: rotate(-1.5deg) scale(1.06);
        user-select: none;
        white-space: nowrap;
        transition: opacity 260ms ease;
    }

    html.home-canvas-ready .home-code-noise {
        opacity: 0;
    }

    .home-code-noise span {
        display: block;
        inline-size: 130%;
        text-wrap: nowrap;
    }

    .home-hero-layout {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-rows: 1fr auto;
        align-content: end;
        min-block-size: 100svh;
        padding-block: 6.75rem 2.5rem;
    }

    .home-hero-message {
        align-self: center;
        display: grid;
        justify-items: center;
        gap: clamp(1.25rem, 1rem + 1vw, 2.25rem);
    }

    .home-anniversary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.65rem 0.95rem;
        max-inline-size: 100%;
        padding: 0.65rem 1.15rem;
        border: 1px solid color-mix(in oklch, var(--home-accent) 28%, var(--home-line));
        border-radius: 2rem;
        background: color-mix(in oklch, var(--home-surface) 92%, var(--home-accent));
        box-shadow: 0 4px 24px color-mix(in oklch, var(--home-accent) 8%, transparent);
        color: var(--home-foreground);
        font-size: clamp(0.8rem, 0.72rem + 0.35vw, 1rem);
        font-weight: 600;
        line-height: 1.4;
        text-align: center;
        text-decoration: none;

        &:hover {
            border-color: var(--home-accent);
            background: color-mix(in oklch, var(--home-surface) 85%, var(--home-accent));
        }

        &:focus-visible {
            outline: 2px solid var(--home-accent);
            outline-offset: 5px;
        }
    }

    .home-anniversary-label,
    .home-anniversary-offer {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }

    .home-anniversary-label {
        gap: 0.5rem;
        color: var(--home-accent);
    }

    .home-anniversary-label > :is(i, svg) {
        inline-size: 1rem;
        block-size: 1rem;
    }

    .home-anniversary-offer {
        gap: 0.2rem;
        padding-inline-start: 0.95rem;
        border-inline-start: 1px solid var(--home-line-strong);
    }

    .home-anniversary-offer strong {
        margin-inline-start: 0.2rem;
        color: light-dark(#c7363f, #ff8a91);
        font-size: 1.65em;
        font-weight: 800;
        letter-spacing: -0.06em;
        line-height: 1;
        font-variant-numeric: lining-nums tabular-nums;
    }

    .home-anniversary-arrow {
        inline-size: 0.9rem;
        block-size: 0.9rem;
        color: var(--home-muted);
    }

    .home-anniversary-percent {
        margin-inline-start: 0.08em;
        font-size: 0.65em;
        letter-spacing: 0;
    }

    .home-hero-slogan {
        align-self: center;
        justify-self: center;
        color: var(--home-foreground);
        font-size: clamp(1.5rem, 0.5rem + 4.7cqi, 6.4rem);
        font-weight: 650;
        letter-spacing: 0;
        line-height: 1.26;
        text-align: center;
        text-wrap: balance;
    }

    .home-endpoint-block {
        display: grid;
        gap: 0.95rem;
        margin-block-end: 4.125rem;
    }

    .home-hero-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
        gap: clamp(2rem, 1.5rem + 1.9cqi, 3rem);
    }

    .home-information,
    .home-pricing {
        padding-block: clamp(4.5rem, 2.25rem + 5cqi, 9rem);
    }

    .home-information {
        background: color-mix(in oklch, var(--home-surface) 75%, transparent);
    }

    .home-pricing {
        border-block: 1px solid var(--home-line);
        background: color-mix(in oklch, var(--home-surface) 70%, transparent);
    }

    .home-manifest {
        display: grid;
        place-items: center;
        min-block-size: 100svh;
        padding: 4rem 2rem;
        background: color-mix(in oklch, var(--home-background) 60%, transparent);
        text-align: center;
    }

    .home-flow {
        position: relative;
        --home-flow-request: 0;
        --home-flow-request-position: 0%;
        --home-flow-route: 0;
        --home-flow-route-position: 0%;
        background: transparent;
    }

    .home-flow-stage {
        position: relative;
        display: grid;
        min-block-size: 100svh;
        align-items: center;
        overflow: clip;
        padding-block: clamp(4.5rem, 2.25rem + 6cqi, 8rem);
        border-start-start-radius: 2.5rem;
        border-start-end-radius: 2.5rem;
        color: oklch(97% 0.008 250deg);
        background-color: color-mix(in oklch, oklch(8% 0.018 255deg) 90%, transparent);
        background-image:
            linear-gradient(to right, oklch(80% 0.08 250deg / 0.065) 1px, transparent 1px),
            linear-gradient(to bottom, oklch(80% 0.08 250deg / 0.065) 1px, transparent 1px),
            radial-gradient(circle at 50% 34%, oklch(50% 0.18 255deg / 0.24), transparent 26rem);
        background-size: 3.5rem 3.5rem, 3.5rem 3.5rem, auto;
        box-shadow: 0 -2rem 5.6rem -1.5rem oklch(0% 0 0deg / 0.6);
    }

    .home-footer {
        position: relative;
        z-index: 10;
        border-block-start: 1px solid var(--home-line);
        background: color-mix(in oklch, var(--home-background) 95%, transparent);
    }

    .home-brand-reveal {
        --home-brand-reveal-height: clamp(14rem, 28vw, 27rem);
        position: relative;
        z-index: 0;
        block-size: var(--home-brand-reveal-height);
        pointer-events: none;
    }
}

@layer home-components {
    @scope (body.macore-home) {
        .home-brand {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            max-inline-size: fit-content;
            color: var(--home-foreground);
            font-size: 0.875rem;
            font-weight: 600;
            letter-spacing: -0.428125px;
            line-height: 1.25rem;
        }

        .home-brand img {
            inline-size: 1.75rem;
            block-size: 1.75rem;
            object-fit: contain;
        }

        .home-nav a {
            display: inline-flex;
            align-items: center;
            min-block-size: 2rem;
            padding-inline: 0.625rem;
            color: var(--home-muted);
            border-radius: 0;
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1.25rem;
        }

        .home-nav a.is-current {
            color: var(--home-foreground);
            background: color-mix(in oklch, var(--home-foreground) 6%, transparent);
        }

        .home-nav a:hover,
        .home-nav a:focus-visible {
            color: var(--home-foreground);
            background: color-mix(in oklch, var(--home-foreground) 4%, transparent);
        }

        .home-icon-button,
        .home-menu-toggle {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            inline-size: 2.25rem;
            block-size: 2.25rem;
            padding: 0;
            color: var(--home-foreground);
            border: 1px solid transparent;
            border-radius: 0;
            background: transparent;
            font-family: inherit;
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1.25rem;
        }

        .home-icon-button:hover,
        .home-icon-button:focus-visible,
        .home-menu-toggle:hover,
        .home-menu-toggle:focus-visible {
            color: var(--home-foreground);
            background: color-mix(in oklch, var(--home-foreground) 6%, transparent);
        }

        .home-icon-button > svg {
            inline-size: 1rem;
            block-size: 1rem;
            flex-shrink: 0;
        }

        .home-header-separator {
            inline-size: 1px;
            block-size: 1rem;
            flex-shrink: 0;
            background: color-mix(in oklch, var(--home-foreground) 4%, transparent);
        }

        .home-header-separator--nav {
            margin-inline: 0.25rem;
        }

        .home-header-separator--login {
            margin-inline: 0.125rem;
        }

        .home-notification-button b {
            position: absolute;
            inset-block-start: -0.25rem;
            inset-inline-end: -0.25rem;
            display: grid;
            place-items: center;
            min-inline-size: 1.25rem;
            block-size: 1.25rem;
            padding-inline: 0.25rem;
            overflow: hidden;
            color: oklch(3% 0 0deg);
            background: var(--home-accent);
            border: 1px solid transparent;
            border-radius: 0;
            font-size: 0.625rem;
            font-weight: 600;
            line-height: 0.875rem;
            font-variant-numeric: tabular-nums;
        }











        .home-sr-only {
            position: absolute;
            inline-size: 1px;
            block-size: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        .home-login-link,
        .home-primary-action,
        .home-secondary-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            min-block-size: 2.5rem;
            padding-inline: 1rem;
            border: 1px solid transparent;
            border-radius: 0.15rem;
            font-size: 0.83rem;
            font-weight: 700;
            line-height: 1;
        }

        .home-primary-action > svg,
        .home-secondary-action > svg {
            flex: 0 0 auto;
            inline-size: 1rem;
            block-size: 1rem;
        }

        .home-login-link {
            min-block-size: 2rem;
            gap: 0.25rem;
            margin-inline-start: 0;
            padding-inline: 0.875rem;
            color: oklch(15% 0.005 255deg);
            border-radius: 0;
            background: oklch(97% 0 0deg);
            font-family: inherit;
            font-size: 0.75rem;
            font-weight: 500;
            line-height: 1rem;
        }

        .home-login-link > svg {
            inline-size: 0.9rem;
            block-size: 0.9rem;
        }

        .home-login-link:hover,
        .home-login-link:focus-visible {
            background: oklch(88% 0.003 255deg);
        }

        .home-menu-toggle {
            display: none;
        }

        .home-menu-toggle > span {
            position: relative;
            display: block;
            inline-size: 1rem;
            block-size: 1rem;
        }

        .home-menu-toggle > span > i {
            position: absolute;
            inset-inline: 0;
            display: block;
            block-size: 1.5px;
            border-radius: 9999px;
            background: currentColor;
            transform-origin: center;
            transition: transform 300ms ease, opacity 300ms ease;
        }

        .home-menu-toggle > span > i:nth-child(1) {
            inset-block-start: 3px;
        }

        .home-menu-toggle > span > i:nth-child(2) {
            inset-block-start: 7px;
        }

        .home-menu-toggle > span > i:nth-child(3) {
            inset-block-start: 11px;
        }

        .home-menu-toggle:focus-visible,
        .home-icon-button:focus-visible,
        .home-nav a:focus-visible,
        .home-login-link:focus-visible,
        .home-primary-action:focus-visible,
        .home-secondary-action:focus-visible,
        .home-endpoint-row button:focus-visible,
        .home-inline-link:focus-visible {
            outline: 2px solid var(--home-accent-soft);
            outline-offset: 3px;
        }

        .home-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            color: var(--home-muted);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1.25;
        }

        .home-eyebrow span {
            inline-size: 0.48rem;
            block-size: 0.48rem;
            border-radius: 50%;
            background: var(--home-accent);
            box-shadow: 0 0 0 0.22rem var(--home-accent-wash);
        }

        .home-endpoint-row {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0;
            inline-size: fit-content;
            max-inline-size: 100%;
            min-block-size: 3.5rem;
            overflow: visible;
            color: var(--home-foreground);
            border: 1px solid var(--home-line-strong);
            background: color-mix(in oklch, var(--home-background) 52%, transparent);
            backdrop-filter: blur(0.75rem);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 0.75rem;
            font-weight: 650;
            white-space: nowrap;
        }

        .home-endpoint-row code {
            font: inherit;
        }

        .home-endpoint-row > code:first-child {
            padding-inline: 1rem;
        }

        .home-endpoint-row button {
            display: inline-flex;
            align-items: center;
            gap: 0.32rem;
            min-block-size: 1.9rem;
            padding-inline: 0.5rem;
            color: var(--home-foreground);
            border: 0;
            background: color-mix(in oklch, var(--home-foreground) 8%, transparent);
            font: inherit;
        }

        .home-endpoint-row button:hover {
            background: color-mix(in oklch, var(--home-foreground) 15%, transparent);
        }

        .home-endpoint-path {
            align-self: stretch;
            display: flex;
            align-items: center;
            padding-inline: 1rem;
            color: var(--home-muted);
            border-inline-start: 1px solid var(--home-line);
            background: color-mix(in oklch, var(--home-foreground) 2.5%, transparent);
        }

        .home-endpoint-path span {
            color: var(--home-foreground);
        }

        .home-copy-status {
            position: absolute;
            inset-inline-start: min(18rem, 42%);
            inset-block-end: -1.1rem;
            color: var(--home-accent-soft);
            font-size: 0.66rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity 150ms ease;
        }

        .home-copy-status.is-visible {
            opacity: 1;
        }

        .home-hero h1 {
            max-inline-size: 42rem;
            color: var(--home-foreground);
            font-size: clamp(3.15rem, 2rem + 4cqi, 4.5rem);
            font-weight: 650;
            letter-spacing: 0;
            line-height: 0.9;
            text-wrap: balance;
        }

        .home-hero h1 > span {
            font-size: 1.35em;
            font-weight: 700;
        }

        .home-hero-copy {
            display: grid;
            justify-items: end;
            gap: clamp(1.5rem, 0.8rem + 1.8cqi, 2.5rem);
            padding-block-end: 0.15rem;
            text-align: end;
        }

        .home-hero-copy > p {
            max-inline-size: 34rem;
            color: var(--home-foreground);
            font-size: clamp(1.04rem, 0.88rem + 1.1cqi, 1.72rem);
            font-weight: 650;
            line-height: 1.22;
            text-wrap: pretty;
        }

        .home-hero-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: end;
            gap: 0.7rem;
        }

        .home-primary-action {
            color: oklch(15% 0.005 255deg);
            background: oklch(97% 0 0deg);
        }

        .home-primary-action:hover,
        .home-primary-action:focus-visible {
            background: oklch(89% 0.003 255deg);
        }





        .home-secondary-action {
            color: var(--home-foreground);
            border-color: var(--home-line-strong);
            background: color-mix(in oklch, var(--home-background) 34%, transparent);
        }

        .home-secondary-action:hover,
        .home-secondary-action:focus-visible {
            border-color: var(--home-foreground);
        }

        .home-section-heading {
            display: grid;
            gap: 0.8rem;
            max-inline-size: 49rem;
            margin-block-end: clamp(2.5rem, 1.25rem + 3cqi, 4.5rem);
        }

        .home-section-heading h2 {
            color: var(--home-foreground);
            font-size: clamp(1.7rem, 1rem + 1.6cqi, 2.55rem);
            font-weight: 650;
            letter-spacing: 0;
            line-height: 1.16;
            text-wrap: balance;
        }

        .home-section-heading p {
            color: var(--home-muted);
            font-size: 0.9rem;
            line-height: 1.7;
            text-wrap: pretty;
        }

        .home-information-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            border-inline-start: 1px solid var(--home-line);
            border-block-start: 1px solid var(--home-line);
        }

        .home-information-card {
            display: grid;
            align-content: start;
            gap: 1.2rem;
            min-block-size: 17rem;
            padding: clamp(1.25rem, 0.7rem + 1.4cqi, 2rem);
            border-inline-end: 1px solid var(--home-line);
            border-block-end: 1px solid var(--home-line);
            background: color-mix(in oklch, var(--home-surface) 50%, transparent);
        }

        .home-information-card--wide {
            grid-column: span 2;
        }

        .home-card-title {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            color: var(--home-foreground);
        }

        .home-card-title > :is(i, svg) {
            display: grid;
            place-items: center;
            inline-size: 1.7rem;
            block-size: 1.7rem;
            color: var(--home-accent-soft);
            border: 1px solid var(--home-line);
            background: var(--home-accent-wash);
            font-size: 0.76rem;
        }

        .home-card-title h3 {
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1.3;
            text-wrap: balance;
        }

        .home-information-card > p {
            color: var(--home-muted);
            font-size: 0.88rem;
            line-height: 1.7;
            text-wrap: pretty;
        }

        .home-request-line {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: var(--home-foreground);
            font-size: 0.72rem;
            font-weight: 700;
        }

        .home-request-line span {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            white-space: nowrap;
        }

        .home-request-line :is(i, svg) {
            inline-size: 0.8rem;
            block-size: 0.8rem;
            color: var(--home-accent-soft);
        }

        .home-request-line b {
            display: block;
            flex: 1;
            block-size: 1px;
            background: var(--home-accent);
        }

        .home-model-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.4rem;
        }

        .home-model-grid span {
            display: grid;
            place-items: center;
            min-block-size: 2.3rem;
            color: var(--home-muted);
            border: 1px solid var(--home-line);
            background: color-mix(in oklch, var(--home-background) 42%, transparent);
            font-size: 0.75rem;
            font-weight: 650;
        }

        .home-model-grid span:nth-child(n + 3) {
            border-color: color-mix(in oklch, var(--home-accent) 50%, var(--home-line));
        }

        .home-report-row {
            position: relative;
            display: grid;
            gap: 0.28rem;
            padding-block: 0.95rem;
            border-block-start: 1px solid var(--home-line);
        }

        .home-report-row span,
        .home-report-row small,
        .home-report-row em {
            color: var(--home-muted-foreground);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 0.62rem;
            font-style: normal;
            font-weight: 650;
        }

        .home-report-row span b {
            display: inline-block;
            margin-inline-start: 0.35rem;
            padding: 0.12rem 0.35rem;
            color: oklch(84% 0.13 160deg);
            border-radius: 0.7rem;
            background: oklch(55% 0.14 160deg / 0.2);
        }

        .home-report-row strong {
            color: var(--home-foreground);
            font-size: 0.95rem;
            line-height: 1.3;
        }

        .home-report-row em {
            position: absolute;
            inset-inline-end: 0;
            inset-block-start: 0.95rem;
            color: var(--home-muted);
        }

        .home-report-row:hover strong,
        .home-report-row:focus-visible strong {
            color: var(--home-accent-soft);
        }

        .home-fact-list {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            border-block: 1px solid var(--home-line);
        }

        .home-fact-list div {
            display: grid;
            gap: 0.35rem;
            padding: 0.8rem 0.9rem;
            border-inline-start: 1px solid var(--home-line);
        }

        .home-fact-list div:first-child {
            padding-inline-start: 0;
            border-inline-start: 0;
        }

        .home-fact-list dt,
        .home-fact-list dd {
            font-size: 0.75rem;
        }

        .home-fact-list dt {
            color: var(--home-foreground);
            font-weight: 700;
        }

        .home-fact-list dd {
            color: var(--home-muted-foreground);
        }

        .home-card-note {
            font-size: 0.78rem !important;
        }

        .home-inline-link {
            color: var(--home-foreground);
            font-size: 0.82rem;
            font-weight: 650;
        }

        .home-inline-link span {
            color: var(--home-accent-soft);
        }

        .home-compact-list {
            display: grid;
            gap: 0.62rem;
            color: var(--home-muted);
            font-size: 0.8rem;
            line-height: 1.5;
        }

        .home-compact-list li {
            display: flex;
            align-items: start;
            gap: 0.55rem;
        }

        .home-compact-list li::before {
            flex: 0 0 auto;
            inline-size: 0.32rem;
            block-size: 0.32rem;
            margin-block-start: 0.45rem;
            border-radius: 50%;
            background: var(--home-accent-soft);
            content: "";
        }

        .home-support-ways {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .home-support-ways span {
            padding: 0.4rem 0.55rem;
            color: var(--home-foreground);
            border: 1px solid var(--home-line);
            font-size: 0.72rem;
            font-weight: 650;
        }

        .home-clarification {
            display: grid;
            grid-template-columns: 0.9fr 1fr 1fr;
            gap: 1rem;
            padding-block-start: 1rem;
            border-block-start: 1px solid var(--home-line);
        }

        .home-clarification > strong {
            color: var(--home-foreground);
            font-size: 0.8rem;
        }

        .home-clarification div {
            display: grid;
            gap: 0.35rem;
        }

        .home-clarification b {
            color: var(--home-accent-soft);
            font-size: 0.72rem;
        }

        .home-clarification p {
            color: var(--home-muted-foreground);
            font-size: 0.72rem;
            line-height: 1.55;
        }

        .home-pricing-tabs {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
            gap: 0.3rem;
            max-inline-size: 42rem;
            padding: 0.3rem;
            border: 1px solid var(--home-line-strong);
            background: color-mix(in oklch, var(--home-background) 45%, transparent);
        }

        .home-pricing-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            min-block-size: 2.5rem;
            padding-inline: 1.1rem;
            color: var(--home-muted);
            border: 1px solid transparent;
            background: transparent;
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 650;
            line-height: 1.3;
            text-wrap: balance;
        }

        .home-pricing-tab > :is(i, svg) {
            flex: 0 0 auto;
            inline-size: 1rem;
            block-size: 1rem;
        }

        .home-pricing-tab:hover,
        .home-pricing-tab:focus-visible {
            color: var(--home-foreground);
            background: color-mix(in oklch, var(--home-foreground) 5%, transparent);
        }

        .home-pricing-tab[aria-selected="true"] {
            color: var(--home-foreground);
            border-color: var(--home-line-strong);
            background: color-mix(in oklch, var(--home-foreground) 9%, transparent);
        }

        .home-pricing-tab:focus-visible {
            outline: 2px solid var(--home-accent-soft);
            outline-offset: 2px;
        }

        .home-pricing-panels {
            display: grid;
            margin-block-start: clamp(1.25rem, 0.75rem + 1.2cqi, 2rem);
        }

        .home-pricing-panel[hidden] {
            display: none;
        }

        .home-pricing-card {
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
            gap: clamp(1.5rem, 1rem + 1.5cqi, 3rem);
            padding: clamp(1.5rem, 1rem + 1.6cqi, 2.5rem);
            border: 1px solid var(--home-line);
            border-radius: 0.5rem;
            background: color-mix(in oklch, var(--home-background) 45%, transparent);
        }

        .home-pricing-card--tiers {
            grid-template-columns: minmax(0, 1fr);
            gap: clamp(1.4rem, 1rem + 1.2cqi, 2rem);
        }

        .home-pricing-plan {
            display: grid;
            align-content: start;
            gap: 0.9rem;
        }

        .home-pricing-plan h3 {
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1.3;
            text-wrap: balance;
        }

        .home-pricing-lines {
            display: grid;
            gap: 0.45rem;
        }

        .home-pricing-plan p {
            color: var(--home-muted);
            font-size: 0.9rem;
            line-height: 1.7;
            text-wrap: pretty;
        }

        .home-pricing-plan b {
            color: var(--home-foreground);
            font-weight: 700;
        }

        .home-pricing-features {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-block-start: 0.35rem;
        }

        .home-pricing-features span {
            padding: 0.42rem 0.6rem;
            color: var(--home-foreground);
            border: 1px solid var(--home-line);
            background: color-mix(in oklch, var(--home-surface) 55%, transparent);
            font-size: 0.75rem;
            font-weight: 650;
        }

        .home-pricing-purchase {
            display: grid;
            align-content: center;
            justify-items: start;
            gap: 1.4rem;
            padding-inline-start: clamp(1.5rem, 1rem + 1.5cqi, 3rem);
            border-inline-start: 1px solid var(--home-line);
        }

        .home-pricing-price {
            display: flex;
            align-items: baseline;
            gap: 0.45rem;
            color: var(--home-foreground);
            font-variant-numeric: tabular-nums;
        }

        .home-pricing-price b {
            font-size: clamp(2.4rem, 1.6rem + 2.4cqi, 3.4rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1;
        }

        .home-pricing-price span {
            color: var(--home-muted);
            font-size: 0.9rem;
            font-weight: 650;
        }

        .home-pricing-tiers {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 0.6rem;
        }

        .home-pricing-tier {
            position: relative;
            display: grid;
            align-content: start;
            gap: 0.8rem;
            padding: 1.1rem 1rem;
            border: 1px solid var(--home-line);
            background: color-mix(in oklch, var(--home-surface) 45%, transparent);
        }

        .home-pricing-tier--sale {
            border-color: #d92d3e;
        }

        .home-pricing-discount {
            position: absolute;
            inset-block-start: 0;
            inset-inline-end: 0;
            padding: 0.25rem 0.45rem;
            background: #b91c2c;
            color: #fff;
            font-size: 0.65rem;
            font-weight: 750;
            line-height: 1.5;
        }

        .home-pricing-original {
            color: var(--home-muted);
            font-size: 0.75rem;
            line-height: 1.5;
        }

        .home-pricing-tier-name {
            margin-block-start: 0.9rem;
            color: var(--home-muted);
            font-size: 0.8rem;
            font-weight: 700;
        }

        .home-pricing-tier-note {
            color: var(--home-muted);
            font-size: 0.72rem;
            line-height: 1.55;
            text-wrap: pretty;
        }

        .home-pricing-tier .home-pricing-price b {
            font-size: 1.9rem;
        }

        .home-tier-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-block-size: 2.25rem;
            padding-inline: 0.7rem;
            border: 1px solid var(--home-line-strong);
            color: var(--home-foreground);
            font-size: 0.78rem;
            font-weight: 650;
        }

        .home-tier-action:hover,
        .home-tier-action:focus-visible {
            border-color: var(--home-accent);
            background: var(--home-accent-wash);
        }

        .home-manifest p {
            max-inline-size: 17ch;
            color: var(--home-foreground);
            font-size: clamp(3rem, 1.75rem + 4.6cqi, 5.8rem);
            font-weight: 650;
            letter-spacing: 0;
            line-height: 1.08;
            text-wrap: balance;
        }

        .home-manifest em {
            font-family: "Shuai Lora", "Songti SC", serif;
            font-style: normal;
            font-weight: 600;
        }

        .home-flow-inner {
            display: grid;
            gap: clamp(2.5rem, 1.2rem + 4cqi, 5.5rem);
        }

        .home-flow-heading {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 2rem;
        }

        .home-flow-heading > div {
            display: grid;
            gap: 0.55rem;
        }

        .home-flow-heading p,
        .home-flow-heading dt {
            color: oklch(83% 0.035 250deg);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 0.72rem;
            font-weight: 700;
        }

        .home-flow-heading h2 {
            color: oklch(97% 0.008 250deg);
            font-size: clamp(1.7rem, 1rem + 1.5cqi, 2.45rem);
            font-weight: 650;
            line-height: 1.15;
            text-wrap: balance;
        }

        .home-flow-heading dl {
            display: flex;
            gap: clamp(1rem, 0.75rem + 1.5cqi, 2rem);
        }

        .home-flow-heading dl div {
            display: grid;
            gap: 0.3rem;
        }

        .home-flow-heading dd {
            color: oklch(97% 0.008 250deg);
            font-size: clamp(1.45rem, 1.1rem + 1cqi, 2rem);
            font-weight: 650;
            line-height: 1;
        }

        .home-flow-heading dd b {
            font-weight: inherit;
        }

        .home-flow-heading dd span {
            margin-inline-start: 0.15rem;
            color: oklch(68% 0.03 250deg);
            font-size: 0.54em;
        }

        .home-flow-network {
            display: grid;
            grid-template-columns: minmax(8rem, 1fr) minmax(4rem, 0.8fr) minmax(9rem, 1fr) minmax(4rem, 0.8fr) minmax(12rem, 1fr);
            align-items: center;
            gap: clamp(0.75rem, 0.35rem + 1.2cqi, 1.75rem);
            min-block-size: 11rem;
            padding: clamp(1rem, 0.55rem + 1.2cqi, 1.8rem);
            border-block: 1px solid oklch(85% 0.05 250deg / 0.2);
        }

        .home-flow-node,
        .home-flow-hub,
        .home-flow-providers {
            display: grid;
            justify-items: center;
            gap: 0.7rem;
            color: oklch(94% 0.01 250deg);
            font-size: 0.82rem;
            font-weight: 700;
            text-align: center;
        }

        .home-flow-node,
        .home-flow-hub {
            opacity: 0.52;
            transform: translateY(0.4rem);
        }

        .home-flow-node.is-active,
        .home-flow-hub.is-active {
            opacity: 1;
            transform: translateY(0);
        }

        .home-flow-node :is(i, svg) {
            display: grid;
            place-items: center;
            inline-size: 3rem;
            block-size: 3rem;
            color: oklch(88% 0.06 250deg);
            border: 1px solid oklch(85% 0.05 250deg / 0.28);
            border-radius: 50%;
            font-size: 1.05rem;
        }

        .home-flow-hub img {
            inline-size: 3.4rem;
            block-size: 3.4rem;
            object-fit: contain;
            filter: drop-shadow(0 0 1.2rem oklch(72% 0.15 250deg / 0.38));
        }

        .home-flow-hub {
            position: relative;
        }

        .home-flow-hub::before {
            position: absolute;
            inset: -0.9rem;
            border: 1px solid oklch(69% 0.18 252deg / 0.7);
            border-radius: 1rem;
            opacity: 0;
            transform: scale(0.82);
            content: "";
            pointer-events: none;
        }

        .home-flow-hub.is-active::before {
            opacity: 1;
            transform: scale(1);
        }

        .home-flow-connector {
            position: relative;
            block-size: 1px;
            min-inline-size: 2.5rem;
            background: oklch(85% 0.05 250deg / 0.2);
        }

        .home-flow-connector span {
            position: absolute;
            inset: 0;
            display: block;
            background: var(--home-accent);
            box-shadow: 0 0 0.75rem color-mix(in oklch, var(--home-accent) 38%, transparent);
            transform: scaleX(0);
            transform-origin: left center;
        }

        .home-flow-connector b {
            position: absolute;
            inset-block-start: 50%;
            inline-size: 0.5rem;
            block-size: 0.5rem;
            border-radius: 50%;
            background: var(--home-accent-soft);
            box-shadow: 0 0 0.8rem color-mix(in oklch, var(--home-accent) 72%, transparent);
            opacity: 0;
            transform: translate(-50%, -50%);
        }

        .home-flow-connector[data-flow-connector="request"] span {
            transform: scaleX(var(--home-flow-request));
        }

        .home-flow-connector[data-flow-connector="request"] b {
            inset-inline-start: var(--home-flow-request-position);
            opacity: var(--home-flow-request);
        }

        .home-flow-connector[data-flow-connector="route"] span {
            transform: scaleX(var(--home-flow-route));
        }

        .home-flow-connector[data-flow-connector="route"] b {
            inset-inline-start: var(--home-flow-route-position);
            opacity: var(--home-flow-route);
        }

        .home-flow-providers {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            justify-items: stretch;
        }

        .home-flow-providers span {
            padding: 0.65rem 0.35rem;
            color: oklch(91% 0.02 250deg / 0.42);
            border: 1px solid oklch(85% 0.05 250deg / 0.2);
            font-size: 0.72rem;
            opacity: 0.62;
        }

        .home-flow-providers span.is-active {
            color: oklch(97% 0.008 250deg);
            border-color: color-mix(in oklch, var(--home-accent) 72%, transparent);
            background: color-mix(in oklch, var(--home-accent) 14%, transparent);
            box-shadow: 0 0 1.2rem color-mix(in oklch, var(--home-accent) 24%, transparent);
            opacity: 1;
        }

        .home-flow-steps {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            border-block: 1px solid oklch(85% 0.05 250deg / 0.2);
        }

        .home-flow-steps article {
            position: relative;
            display: grid;
            align-content: start;
            gap: 0.7rem;
            min-block-size: 10rem;
            padding: 1.3rem clamp(1rem, 0.45rem + 1.4cqi, 1.8rem);
            border-inline-start: 1px solid oklch(85% 0.05 250deg / 0.2);
            opacity: 0.45;
        }

        .home-flow-steps article.is-active {
            background: linear-gradient(to bottom, color-mix(in oklch, var(--home-accent) 9%, transparent), transparent);
            opacity: 1;
        }

        .home-flow-steps article:first-child {
            padding-inline-start: 0;
            border-inline-start: 0;
        }

        .home-flow-steps span {
            color: oklch(69% 0.15 250deg);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 0.68rem;
            font-weight: 700;
        }

        .home-flow-steps article.is-active > span {
            color: var(--home-accent-soft);
        }

        .home-flow-steps h3 {
            color: oklch(97% 0.008 250deg);
            font-size: 1.08rem;
            line-height: 1.2;
        }

        .home-flow-steps p {
            color: oklch(75% 0.025 250deg);
            font-size: 0.82rem;
            line-height: 1.65;
            text-wrap: pretty;
        }

        .home-footer-meta {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 0.75rem 1.5rem;
            padding-block: 1.45rem;
            color: var(--home-muted-foreground);
            font-size: 0.72rem;
            line-height: 1.5;
        }

        .home-footer-meta > div {
            display: inline-flex;
            gap: 0.5rem;
        }

        .home-footer-meta a:hover,
        .home-footer-meta a:focus-visible {
            color: var(--home-foreground);
        }

        .home-footer-meta span:last-child a {
            color: var(--home-accent-soft);
        }

        .home-brand-reveal-fixed {
            position: fixed;
            z-index: 0;
            inset-block-end: 0;
            inset-inline: 0;
            block-size: var(--home-brand-reveal-height);
            overflow: hidden;
            color: color-mix(in oklch, var(--home-foreground) 82%, oklch(58% 0.17 255deg));
            background: transparent;
            isolation: isolate;
            opacity: 0;
            pointer-events: auto;
            visibility: hidden;
        }

        .home-brand-reveal.is-active .home-brand-reveal-fixed {
            opacity: 1;
            visibility: visible;
        }

        .home-brand-reveal-static,
        .home-brand-reveal-canvas {
            position: absolute;
            inset: 0;
        }

        .home-brand-reveal-canvas {
            z-index: 1;
            display: block;
            inline-size: 100%;
            block-size: 100%;
            pointer-events: none;
        }

        .home-brand-reveal-static {
            z-index: 0;
            overflow: hidden;
        }

        .home-brand-reveal-static[data-canvas-active="true"] {
            visibility: hidden;
        }

        .home-brand-reveal-word {
            position: absolute;
            inset-block-end: -0.1em;
            inset-inline-start: 50%;
            color: inherit;
            margin: 0;
            font-size: clamp(5rem, 14.5vw, 17rem);
            font-weight: 900;
            letter-spacing: 0;
            line-height: 0.78;
            white-space: nowrap;
            user-select: none;
            transform: translateX(-50%);
        }



        @container home (width >= 48rem) {
            .home-header-inner {
                padding-inline: 1.5rem;
            }

            .home-header.is-scrolled .home-header-inner,
            .home-menu-open .home-header-inner {
                padding: 0.75rem 0.75rem 0;
            }
        }

        @container home (width >= 64rem) {
            .home-flow {
                block-size: 340svh;
                min-block-size: 0;
            }

            .home-flow-stage {
                position: sticky;
                inset-block-start: 0;
                block-size: 100svh;
            }
        }

        @container home (width <= 64rem) {
            .home-mobile-nav:not([hidden]) {
                display: grid;
                gap: 0.15rem;
                inline-size: min(100% - 2rem, 52rem);
                margin: 0.55rem auto 0;
                padding: 0.6rem;
                border: 1px solid var(--home-line);
                border-radius: 0.75rem;
                background: color-mix(in oklch, var(--home-background) 96%, transparent);
                backdrop-filter: blur(16px);
            }

            .home-mobile-nav a,
            .home-mobile-nav button {
                display: flex;
                align-items: center;
                min-block-size: 2.6rem;
                padding-inline: 0.75rem;
                color: var(--home-muted);
                border: 0;
                background: transparent;
                font-family: inherit;
                font-size: 0.9rem;
                font-weight: 650;
                text-align: start;
            }

            .home-mobile-nav a:hover,
            .home-mobile-nav a:focus-visible,
            .home-mobile-nav button:hover,
            .home-mobile-nav button:focus-visible {
                color: var(--home-foreground);
                background: color-mix(in oklch, var(--home-foreground) 8%, transparent);
            }

            .home-mobile-nav .home-mobile-login {
                justify-content: center;
                gap: 0.5rem;
                margin-block-start: 0.25rem;
                color: oklch(15% 0.005 255deg);
                background: oklch(97% 0 0deg);
            }

            .home-mobile-nav .home-mobile-login > svg {
                inline-size: 1rem;
                block-size: 1rem;
            }



            .home-hero-grid {
                grid-template-columns: minmax(0, 1fr);
                gap: 2.25rem;
            }

            .home-hero-copy,
            .home-hero-actions {
                justify-items: start;
                justify-content: start;
                text-align: start;
            }

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

            .home-information-card--wide {
                grid-column: span 2;
            }

            .home-pricing-card,
            .home-pricing-card--tiers {
                grid-template-columns: minmax(0, 1fr);
            }

            .home-pricing-purchase {
                padding-inline-start: 0;
                border-inline-start: 0;
                padding-block-start: 1.4rem;
                border-block-start: 1px solid var(--home-line);
            }

            .home-pricing-tiers {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .home-flow-stage {
                min-block-size: auto;
            }

            .home-flow-network {
                grid-template-columns: 1fr auto 1fr;
            }

            .home-flow-hub {
                grid-column: 3;
            }

            .home-flow-network > [data-flow-connector="route"] {
                grid-column: 1 / -1;
                justify-self: center;
                inline-size: min(72%, 24rem);
                margin-block-start: 0.6rem;
            }

            .home-flow-providers {
                grid-column: 1 / -1;
                justify-self: center;
                inline-size: min(100%, 28rem);
            }
        }

        @container home (width < 40rem) {
            .home-nav,
            .home-notification-button,
            .home-icon-button[data-lang-toggle],
            .home-header-separator,
            .home-login-link {
                display: none;
            }

            .home-menu-toggle {
                display: inline-flex;
            }

            .home-header-actions {
                margin-inline-start: auto;
            }

            .home-pricing-card {
                padding-inline: 1.1rem;
            }

            .home-pricing-tier {
                padding: 1rem 0.9rem;
            }
        }

        @container home (width <= 42rem) {
            .home-hero,
            .home-hero-layout {
                min-block-size: calc(100svh - 1rem);
            }

            .home-shell {
                inline-size: min(100% - 2rem, 80rem);
            }

            .home-hero-layout {
                padding-block: 6rem 1.5rem;
            }

            .home-endpoint-block {
                margin-block-end: 2.5rem;
            }

            .home-endpoint-row {
                gap: 0.35rem;
                font-size: 0.67rem;
            }

            .home-endpoint-path {
                display: none;
            }

            .home-hero h1 {
                font-size: clamp(3rem, 1.95rem + 5.1cqi, 4.5rem);
            }

            .home-hero h1 > span {
                font-size: 1.12em;
            }

            .home-hero-copy > p {
                font-size: 1.05rem;
            }

            .home-primary-action,
            .home-secondary-action {
                flex: 1 1 10rem;
            }

            .home-information-grid {
                grid-template-columns: minmax(0, 1fr);
                border-inline: 0;
            }

            .home-information-card,
            .home-information-card--wide {
                grid-column: auto;
                min-block-size: 0;
                border: 1px solid var(--home-line);
                border-radius: 0.5rem;
            }

            .home-information-card:not(:first-child) {
                margin-block-start: 0.75rem;
            }

            .home-fact-list,
            .home-clarification {
                grid-template-columns: minmax(0, 1fr);
            }

            .home-fact-list div,
            .home-fact-list div:first-child {
                padding: 0.72rem 0;
                border-inline-start: 0;
                border-block-start: 1px solid var(--home-line);
            }

            .home-fact-list div:first-child {
                border-block-start: 0;
            }

            .home-clarification {
                gap: 0.75rem;
            }

            .home-flow-heading {
                display: grid;
                align-items: start;
            }

            .home-flow-network {
                grid-template-columns: 1fr auto 1fr;
                gap: 0.6rem;
                min-block-size: auto;
            }

            .home-flow-steps {
                grid-template-columns: minmax(0, 1fr);
            }

            .home-flow-steps article,
            .home-flow-steps article:first-child {
                min-block-size: 0;
                padding: 1rem 0;
                border-inline-start: 0;
                border-block-start: 1px solid oklch(85% 0.05 250deg / 0.2);
            }

            .home-flow-steps article:first-child {
                border-block-start: 0;
            }

            .home-footer-meta {
                display: grid;
            }

        }
    }
}

@layer home-components {
    @scope (body.macore-home) {
        :scope:has(.home-login-dialog[open]) {
            overflow: hidden;
        }

        .home-login-dialog {
            inline-size: min(calc(100% - 2rem), 26.5rem);
            max-inline-size: none;
            margin: auto;
            padding: 0;
            overflow: visible;
            color: var(--home-foreground);
            border: 0;
            background: transparent;
        }

        .home-login-dialog::backdrop {
            background: oklch(3% 0.01 255deg / 0.55);
            backdrop-filter: blur(0.65rem);
        }

        .home-login-dialog-shell {
            padding: 1.9rem 1.75rem 1.5rem;
            border: 1px solid oklch(100% 0 0deg / 0.07);
            border-radius: 1.25rem;
            background: oklch(16% 0.008 255deg / 0.72);
            backdrop-filter: blur(1.6rem) saturate(1.15);
            -webkit-backdrop-filter: blur(1.6rem) saturate(1.15);
            box-shadow: 0 2.5rem 6rem oklch(2% 0.01 255deg / 0.5);
        }

        .home-login-dialog-header {
            position: relative;
            margin-block-end: 1.7rem;
            text-align: center;
        }

        .home-login-dialog-header > div {
            display: grid;
            justify-items: center;
        }

        .home-login-dialog-logo {
            inline-size: 2.5rem;
            block-size: 2.5rem;
        }

        .home-login-dialog-header h2 {
            margin-block-start: 0.75rem;
            color: var(--home-foreground);
            font-size: 1.18rem;
            font-weight: 650;
            letter-spacing: -0.01em;
            line-height: 1.25;
            text-wrap: balance;
        }

        .home-login-dialog-header p {
            margin-block-start: 0.35rem;
            color: var(--home-muted);
            font-size: 0.78rem;
            line-height: 1.5;
            text-wrap: pretty;
        }

        .home-login-dialog-close,
        .home-password-toggle {
            display: inline-grid;
            place-items: center;
            flex: 0 0 auto;
            padding: 0;
            color: var(--home-muted-foreground);
            border: 0;
            background: transparent;
        }

        .home-login-dialog-close {
            position: absolute;
            inset-block-start: -0.4rem;
            inset-inline-end: -0.55rem;
            inline-size: 2rem;
            block-size: 2rem;
            border-radius: 0.45rem;
        }

        .home-login-dialog-close:hover,
        .home-login-dialog-close:focus-visible,
        .home-password-toggle:hover,
        .home-password-toggle:focus-visible {
            color: var(--home-foreground);
            background: color-mix(in oklch, var(--home-foreground) 7%, transparent);
        }

        .home-login-dialog-close > svg,
        .home-password-toggle > svg {
            inline-size: 1rem;
            block-size: 1rem;
        }

        .home-login-form {
            display: grid;
            gap: 1.05rem;
        }

        .home-login-control {
            position: relative;
            padding-block-start: 1.05rem;
        }

        .home-login-field {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.65rem;
            min-block-size: 2.7rem;
            padding-inline: 0.15rem;
            border-block-end: 1px solid var(--home-line-strong);
            background: transparent;
            transition: border-color 140ms ease, box-shadow 140ms ease;
        }

        .home-login-field:focus-within {
            border-block-end-color: var(--home-accent-soft);
            box-shadow: 0 1px 0 0 var(--home-accent-soft);
        }

        .home-login-field > i,
        .home-login-field > svg {
            flex: 0 0 auto;
            inline-size: 0.95rem;
            block-size: 0.95rem;
            color: var(--home-muted-foreground);
            transition: color 140ms ease;
        }

        .home-login-field:focus-within > i,
        .home-login-field:focus-within > svg {
            color: var(--home-accent-soft);
        }

        .home-login-field input {
            flex: 1;
            inline-size: 100%;
            min-inline-size: 0;
            padding-block: 0.35rem;
            color: var(--home-foreground);
            border: 0;
            outline: 0;
            background: transparent;
            font: inherit;
            font-size: 0.92rem;
        }

        .home-login-field input:-webkit-autofill {
            -webkit-text-fill-color: var(--home-foreground);
            -webkit-box-shadow: 0 0 0 100rem transparent inset;
            transition: background-color 99999s ease-out;
        }

        .home-login-field > label {
            position: absolute;
            inset-inline-start: 1.75rem;
            inset-block-start: 50%;
            transform: translateY(-50%);
            color: var(--home-muted-foreground);
            font-size: 0.85rem;
            line-height: 1;
            pointer-events: none;
            transition: inset-block-start 160ms ease, color 160ms ease, font-size 160ms ease, letter-spacing 160ms ease;
        }

        .home-login-field input:focus + label,
        .home-login-field input:not(:placeholder-shown) + label,
        .home-login-field.is-filled label {
            inset-block-start: -0.95rem;
            transform: none;
            color: var(--home-muted-foreground);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 0.62rem;
            font-weight: 650;
            letter-spacing: 0.18em;
        }

        .home-login-field input:focus + label {
            color: var(--home-accent-soft);
        }

        .home-password-toggle {
            grid-template-areas: "icon";
            inline-size: 1.8rem;
            block-size: 1.8rem;
            border-radius: 0.3rem;
        }

        .home-password-toggle > svg {
            grid-area: icon;
        }

        .home-password-toggle > svg:nth-child(2),
        .home-password-toggle[aria-pressed="true"] > svg:nth-child(1) {
            display: none;
        }

        .home-password-toggle[aria-pressed="true"] > svg:nth-child(2) {
            display: block;
        }

        .home-login-message {
            min-block-size: 1.25rem;
            margin-block-start: 0.1rem;
            color: oklch(69% 0.18 25deg);
            font-size: 0.78rem;
            font-weight: 620;
            line-height: 1.45;
            text-wrap: pretty;
        }

        .home-login-message[data-state="pending"] {
            color: var(--home-muted);
        }



        .home-login-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            min-block-size: 2.9rem;
            margin-block-start: 0.35rem;
            padding-inline: 1rem;
            color: oklch(15% 0.005 255deg);
            border: 0;
            border-radius: 0.8rem;
            background: oklch(97% 0 0deg);
            font-family: inherit;
            font-size: 0.88rem;
            font-weight: 720;
            cursor: pointer;
            box-shadow: 0 0.9rem 2.2rem oklch(0% 0 0deg / 0.4);
            transition: background 140ms ease, transform 140ms ease, opacity 140ms ease;
        }

        .home-login-submit:hover:not(:disabled),
        .home-login-submit:focus-visible:not(:disabled) {
            background: oklch(100% 0 0deg);
            transform: translateY(-1px);
        }

        .home-login-submit:disabled {
            cursor: wait;
            opacity: 0.62;
        }

        .home-login-submit > svg {
            inline-size: 1rem;
            block-size: 1rem;
        }





        .home-login-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin: 0.3rem 0 0;
            color: var(--home-muted-foreground);
            font-size: 0.78rem;
        }

        .home-login-links a {
            color: var(--home-muted);
            text-decoration: underline;
            text-underline-offset: 0.2em;
        }

        .home-login-links a:hover,
        .home-login-links a:focus-visible {
            color: var(--home-foreground);
        }









        .home-login-dialog-close:focus-visible,
        .home-password-toggle:focus-visible,
        .home-login-submit:focus-visible,
        .home-mobile-login:focus-visible {
            outline: 2px solid var(--home-accent-soft);
            outline-offset: 2px;
        }

        .home-contact-avatar {
            border-radius: 50%;
            object-fit: cover;
        }

        .home-contact-body {
            display: grid;
            justify-items: center;
            gap: 0.9rem;
        }

        .home-contact-qr {
            inline-size: min(13rem, 72vw);
            block-size: auto;
            border-radius: 0.75rem;
        }

        .home-contact-copy {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            min-block-size: 2.6rem;
            padding-inline: 1.25rem;
            color: var(--home-foreground);
            border: 1px solid var(--home-line-strong);
            border-radius: 0.8rem;
            background: transparent;
            font-family: inherit;
            font-size: 0.82rem;
            font-weight: 620;
            line-height: 1;
            cursor: pointer;
            transition: background 140ms ease;
        }

        .home-contact-copy:hover,
        .home-contact-copy:focus-visible {
            background: color-mix(in oklch, var(--home-foreground) 7%, transparent);
        }

        .home-contact-copy > svg {
            inline-size: 1rem;
            block-size: 1rem;
        }

        .home-contact-message {
            min-block-size: 1.25rem;
            margin-block: 0.55rem 0;
            color: var(--home-muted);
            font-size: 0.78rem;
            font-weight: 620;
            line-height: 1.45;
            text-align: center;
            text-wrap: pretty;
        }

        .home-contact-copy:focus-visible {
            outline: 2px solid var(--home-accent-soft);
            outline-offset: 2px;
        }

        @container home (width <= 30rem) {
            .home-login-dialog {
                inline-size: min(calc(100% - 1rem), 26.5rem);
            }

            .home-login-dialog-shell {
                padding: 1.5rem 1.25rem 1.25rem;
            }
        }

        @media (prefers-reduced-motion: no-preference) {
            .home-login-dialog[open] .home-login-dialog-shell {
                animation: home-login-enter 180ms cubic-bezier(0.22, 1, 0.36, 1);
            }

            .home-login-dialog-close,
            .home-password-toggle,
            .home-login-submit {
                transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
            }
        }
    }
}

@keyframes home-login-enter {
    from {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.985);
    }
}

@layer home-components {
    @scope (body.macore-home) {
        .home-hero {
            background-image: none;
        }

        .home-endpoint-block {
            gap: 1.14rem;
            margin-block-end: 1.75rem;
        }

        .home-hero-grid .home-endpoint-block {
            margin-block-end: 0;
        }

        .home-endpoint-row {
            inline-size: min(100%, 30.72rem);
        }

        .home-endpoint-path {
            flex: 1 1 auto;
            min-inline-size: clamp(8.5rem, 24cqi, 14rem);
        }

        .home-endpoint-path > span:first-child {
            flex: 0 0 auto;
            margin-inline-end: 0.25rem;
            color: var(--home-muted-foreground);
        }

        .home-endpoint-path > span:nth-child(2) {
            min-inline-size: 0;
            overflow: hidden;
            color: color-mix(in oklch, var(--home-foreground) 80%, transparent);
            text-overflow: ellipsis;
        }

        .home-endpoint-path b {
            display: inline-block;
            flex: 0 0 0.55em;
            margin-inline-start: 0.12rem;
            color: var(--home-accent);
            font: inherit;
            animation: none;
        }

        .home-hero h1 {
            display: block;
            max-inline-size: 46rem;
            font-size: 3.35rem;
            font-weight: 600;
            letter-spacing: 0;
            line-height: 0.9;
        }

        .home-hero h1 > .home-hero-brand-line {
            display: inline-flex;
            align-items: center;
            max-inline-size: 100%;
            gap: 0.1em;
            font-size: 1em;
            font-weight: 600;
        }

        .home-hero-title-logo {
            position: relative;
            flex: 0 0 auto;
            inline-size: 0.76em;
            block-size: 0.76em;
            margin-block-start: 0.05em;
            overflow: hidden;
        }

        .home-hero-title-logo > span {
            position: absolute;
            inset: 0;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        .home-hero-title-logo-motion {
            opacity: 0;
        }

        .home-hero-title-logo.is-motion-visible .home-hero-title-logo-static {
            opacity: 0;
        }

        .home-hero-title-logo.is-motion-visible .home-hero-title-logo-motion {
            opacity: 1;
        }

        .home-hero h1 > .home-hero-title-subline {
            display: block;
            margin-block-start: 0.75rem;
            color: color-mix(in oklch, var(--home-foreground) 64%, transparent);
            font-size: 0.58em;
            font-weight: 600;
            line-height: 1;
            text-wrap: balance;
        }

        .home-hero-actions {
            gap: 1rem;
        }

        .home-primary-action {
            inline-size: 14rem;
            min-block-size: 4rem;
            padding-inline: 2.5rem;
            font-size: 1.05rem;
            line-height: 1.5;
        }

        .home-secondary-action {
            inline-size: 10.5rem;
            min-block-size: 4rem;
            padding-inline: 2rem;
            font-size: 1rem;
            line-height: 1.5;
        }

        .home-flow {
            --home-flow-content-opacity: 0;
            --home-flow-request-dot: 0;
            --home-flow-request-success: 0;
            --home-flow-request-return-position: 100%;
            --home-flow-route-dot: 0;
            --home-flow-route-success: 0;
            --home-flow-route-return-position: 100%;
            --home-flow-gateway-pulse: 0;
            --home-flow-gateway-scale: 0.85;
        }

        .home-flow-stage {
            position: relative;
            display: flex;
            min-block-size: 100svh;
            flex-direction: column;
            justify-content: center;
            padding-block: 5rem;
            color: oklch(97% 0.008 250deg);
            background: color-mix(in oklch, oklch(8% 0.018 255deg) 90%, transparent);
            background-image: none;
        }

        .home-flow-stage::before,
        .home-flow-stage::after {
            position: absolute;
            inset: 0;
            pointer-events: none;
            content: "";
        }

        .home-flow-stage::before {
            background-image:
                linear-gradient(to right, oklch(100% 0 0deg / 0.06) 1px, transparent 1px),
                linear-gradient(to bottom, oklch(100% 0 0deg / 0.06) 1px, transparent 1px);
            background-size: 3.25rem 3.25rem;
            mask-image: radial-gradient(70% 60% at 50% 42%, black 20%, transparent 100%);
        }

        .home-flow-stage::after {
            background: radial-gradient(circle at 50% 42%, color-mix(in oklch, var(--home-accent) 16%, transparent) 0, transparent 46%);
        }

        .home-flow-inner {
            position: relative;
            z-index: 1;
            display: block;
            opacity: var(--home-flow-content-opacity);
        }

        .home-flow-heading {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 1.5rem;
        }

        .home-flow-heading h2 {
            max-inline-size: 28rem;
            font-size: 2.25rem;
            font-weight: 700;
            line-height: 1.25;
        }

        .home-flow-heading dl {
            gap: 2rem;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .home-flow-heading dl div {
            gap: 0.25rem;
        }

        .home-flow-heading dt {
            color: oklch(100% 0 0deg / 0.45);
            font-size: 0.625rem;
            font-weight: 600;
            letter-spacing: 0;
            line-height: 1.5;
            text-transform: uppercase;
        }

        .home-flow-heading dd {
            margin: 0;
            color: oklch(100% 0 0deg);
            font-size: 1.875rem;
            font-weight: 600;
            line-height: 1.2;
            font-variant-numeric: tabular-nums;
        }

        .home-flow-heading dl div:last-child dd {
            color: var(--home-accent);
        }

        .home-flow-heading dd span {
            margin-inline-start: 0.25rem;
            color: oklch(100% 0 0deg / 0.45);
            font-size: 0.875rem;
        }

        .home-flow-network {
            display: flex;
            align-items: center;
            gap: 1rem;
            min-block-size: 0;
            margin-block-start: 5rem;
            padding: 0;
            border: 0;
        }

        .home-flow-node,
        .home-flow-hub {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            color: oklch(100% 0 0deg / 0.85);
            border: 1px solid oklch(100% 0 0deg / 0.15);
            background: oklch(100% 0 0deg / 0.05);
            font-size: 0.875rem;
            font-weight: 600;
            opacity: 1;
            text-align: center;
            transform: none;
        }

        .home-flow-node {
            padding: 0.625rem 1rem;
            border-radius: 0.5rem;
        }

        .home-flow-node :is(i, svg) {
            display: block;
            inline-size: 1rem;
            block-size: auto;
            color: oklch(100% 0 0deg / 0.6);
            border: 0;
            border-radius: 0;
            font-size: 1rem;
        }

        .home-flow-hub {
            position: relative;
            gap: 0.625rem;
            padding: 0.75rem 1rem;
            border-color: oklch(100% 0 0deg / 0.2);
            border-radius: 0.75rem;
            background: oklch(100% 0 0deg / 0.07);
            box-shadow: 0 0 2.5rem color-mix(in oklch, var(--home-accent) 18%, transparent);
        }

        .home-flow-hub img {
            inline-size: 1.75rem;
            block-size: 1.75rem;
            border-radius: 0.375rem;
            filter: none;
        }

        .home-flow-hub::before,
        .home-flow-hub.is-active::before {
            inset: -0.75rem;
            border-color: var(--home-accent);
            border-radius: 1rem;
            opacity: var(--home-flow-gateway-pulse);
            transform: scale(var(--home-flow-gateway-scale));
        }

        .home-flow-connector {
            flex: 1 1 0;
            min-inline-size: 0;
            background: oklch(100% 0 0deg / 0.15);
        }

        .home-flow-connector span {
            box-shadow: none;
        }

        .home-flow-connector b,
        .home-flow-connector::after {
            position: absolute;
            inset-block-start: 50%;
            inline-size: 0.5rem;
            block-size: 0.5rem;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        .home-flow-connector b {
            background: var(--home-accent);
            box-shadow: 0 0 0.625rem color-mix(in oklch, var(--home-accent) 70%, transparent);
        }

        .home-flow-connector::after {
            inset-inline-start: 100%;
            background: oklch(77% 0.16 156deg);
            box-shadow: 0 0 0.625rem oklch(77% 0.16 156deg / 0.7);
            opacity: 0;
            content: "";
        }

        .home-flow-connector[data-flow-connector="request"] b {
            opacity: var(--home-flow-request-dot);
        }

        .home-flow-connector[data-flow-connector="request"]::after {
            inset-inline-start: var(--home-flow-request-return-position);
            opacity: var(--home-flow-request-success);
        }

        .home-flow-connector[data-flow-connector="route"] b {
            opacity: var(--home-flow-route-dot);
        }

        .home-flow-connector[data-flow-connector="route"]::after {
            inset-inline-start: var(--home-flow-route-return-position);
            opacity: var(--home-flow-route-success);
        }

        .home-flow-providers {
            display: flex;
            flex: 0 0 7rem;
            flex-direction: column;
            gap: 0.5rem;
        }

        .home-flow-providers span,
        .home-flow-providers span.is-active {
            display: block;
            padding: 0.5rem 0.75rem;
            border: 1px solid oklch(100% 0 0deg / 0.15);
            border-radius: 0.5rem;
            background: color-mix(in oklch, var(--home-accent) calc(var(--home-provider-progress, 0) * 14%), transparent);
            box-shadow: 0 0 1.25rem color-mix(in oklch, var(--home-accent) calc(var(--home-provider-progress, 0) * 30%), transparent);
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1rem;
            opacity: 1;
            text-align: center;
        }

        .home-flow-providers span.is-active {
            border-color: var(--home-accent);
        }

        .home-flow-steps {
            position: relative;
            display: block;
            block-size: 7rem;
            margin-block-start: 5rem;
            border: 0;
        }

        .home-flow-steps article,
        .home-flow-steps article:first-child,
        .home-flow-steps article.is-active {
            position: absolute;
            inset: 0;
            display: flex;
            min-block-size: 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0;
            padding: 0;
            border: 0;
            background: none;
            text-align: center;
        }

        .home-flow-steps article > span {
            display: none;
        }

        .home-flow-steps h3 {
            font-size: 1.5rem;
            font-weight: 600;
        }

        .home-flow-steps p {
            max-inline-size: 28rem;
            margin-block-start: 0.5rem;
            color: oklch(100% 0 0deg / 0.55);
            font-size: 0.875rem;
            line-height: 1.625;
        }

        @container home (42rem < width <= 64rem) {
            .home-hero h1 {
                font-size: 4.5rem;
            }
        }

        @container home (width >= 64rem) {
            .home-hero h1 {
                font-size: 6rem;
            }

            .home-flow-inner {
                inline-size: min(100%, 80rem);
                margin-inline: auto;
                padding-inline: 2rem;
            }

            .home-flow-hub {
                font-weight: 700;
                letter-spacing: -0.518px;
            }

            .home-flow-stage {
                position: sticky;
                inset-block-start: 0;
                block-size: 100svh;
                padding-block: 0;
            }
        }

        @container home (width <= 42rem) {
            .home-hero,
            .home-hero-layout {
                min-block-size: 100svh;
            }

            .home-hero-layout {
                padding-block: 5.75rem 4.8125rem;
            }

            .home-endpoint-block {
                gap: 1.25rem;
                margin-block-end: 1.75rem;
            }

            .home-eyebrow {
                font-size: 0.75rem;
            }

            .home-endpoint-row {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                inline-size: 100%;
                gap: 0;
                min-block-size: 0;
            }

            .home-endpoint-row > code:first-child {
                display: flex;
                min-inline-size: 0;
                align-items: center;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .home-endpoint-row button {
                min-block-size: 3rem;
                padding-inline: 0.75rem;
                background: transparent;
            }

            .home-endpoint-path {
                grid-column: 1 / -1;
                display: flex;
                min-inline-size: 0;
                min-block-size: 2.75rem;
                padding-inline: 0.75rem;
                border-block-start: 1px solid var(--home-line);
                border-inline-start: 0;
            }

            .home-hero h1 {
                font-size: 3.35rem;
            }

            .home-hero-grid {
                gap: 2rem;
            }

            .home-hero-copy {
                gap: 1.75rem;
            }

            .home-hero-copy > p {
                font-size: 1.35rem;
                line-height: 1.22;
            }

            .home-hero-actions {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .home-primary-action {
                flex: 0 0 auto;
                inline-size: 12.5rem;
                min-block-size: 3.5rem;
                padding-inline: 2rem;
                font-size: 1rem;
            }

            .home-secondary-action {
                flex: 0 0 auto;
                inline-size: 9.75rem;
                min-block-size: 3.5rem;
                padding-inline: 1.75rem;
                font-size: 1rem;
            }

            .home-notification-button {
                display: none;
            }

            .home-flow-stage {
                min-block-size: auto;
                padding-block: 5.1875rem 5.02rem;
            }

            .home-flow-heading {
                display: flex;
                align-items: end;
                gap: 1rem;
            }

            .home-flow-heading h2 {
                font-size: 1.875rem;
            }

            .home-flow-heading dl {
                flex: 0 0 auto;
                gap: 1.5rem;
            }

            .home-flow-heading dd {
                font-size: 1.5rem;
            }

            .home-flow-network {
                display: flex;
                grid-template-columns: none;
                gap: 0.75rem;
                margin-block-start: 3.5rem;
            }

            .home-flow-node {
                padding: 0.5725rem 0.75rem;
                font-size: 0.75rem;
            }

            .home-flow-hub {
                grid-column: auto;
                gap: 0.5rem;
                min-inline-size: 6.125rem;
                padding: 0.73rem 0.75rem;
                font-size: 0.75rem;
            }

            .home-flow-hub img {
                inline-size: 1.5rem;
                block-size: 1.5rem;
            }

            .home-flow-network > [data-flow-connector="route"] {
                grid-column: auto;
                justify-self: auto;
                inline-size: auto;
                margin-block-start: 0;
            }

            .home-flow-providers {
                grid-column: auto;
                flex-basis: 5rem;
                justify-self: auto;
                inline-size: auto;
            }

            .home-flow-providers span,
            .home-flow-providers span.is-active {
                padding: 0.5rem 0.4rem;
                font-size: 0.72rem;
                line-height: 1.333;
            }

            .home-flow-steps {
                display: grid;
                block-size: auto;
                grid-template-columns: minmax(0, 1fr);
                gap: 2rem;
                margin-block-start: 3rem;
            }

            .home-flow-steps article,
            .home-flow-steps article:first-child,
            .home-flow-steps article.is-active {
                position: static;
                display: grid;
                min-block-size: 4.59375rem;
                grid-template-columns: auto minmax(0, 1fr);
                grid-template-rows: auto auto;
                gap: 0.35rem 0.8rem;
                padding: 0;
                text-align: start;
            }

            .home-flow-steps article > span {
                display: block;
                grid-row: 1;
                align-self: center;
                color: var(--home-accent);
                font-size: 0.625rem;
            }

            .home-flow-steps h3 {
                grid-column: 2;
                font-size: 1.125rem;
            }

            .home-flow-steps p {
                grid-column: 2;
                max-inline-size: none;
                margin-block-start: 0;
                font-size: 0.875rem;
            }

            .home-footer-meta {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1rem 0.75rem;
                padding-block: 1.65rem;
                text-align: center;
            }

            .home-footer-meta > span:first-child {
                flex: 0 0 100%;
                padding-block-end: 1rem;
                border-block-end: 1px solid var(--home-line);
            }
        }
    }
}

@layer home-motion {
    html.lenis,
    html.lenis body {
        block-size: auto;
    }

    html.lenis:not(.lenis-stopped) {
        scroll-behavior: auto !important;
    }

    html.lenis [data-lenis-prevent] {
        overscroll-behavior: contain;
    }

    @keyframes home-terminal-blink {
        0%,
        49% {
            opacity: 1;
        }

        50%,
        100% {
            opacity: 0;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        body.macore-home .home-brand-reveal-fixed {
            transition: opacity 260ms ease;
        }

        body.macore-home .home-endpoint-path b {
            animation: home-terminal-blink 1s steps(1, end) infinite;
        }







        html.home-entry-ready body.macore-home .home-header-inner {
            animation: home-header-drop 560ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both;
        }

        body.macore-home .home-header-inner,
        body.macore-home .home-information-card,
        body.macore-home .home-pricing-card,
        body.macore-home .home-pricing-tier,
        body.macore-home .home-pricing-tab,
        body.macore-home .home-primary-action,
        body.macore-home .home-secondary-action,
        body.macore-home .home-report-row,
        body.macore-home .home-model-grid span {
            transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
        }

        body.macore-home .home-flow-node,
        body.macore-home .home-flow-hub {
            transition: opacity 240ms ease, transform 240ms ease;
        }

        body.macore-home .home-flow-hub::before {
            transition: opacity 240ms ease, transform 240ms ease;
        }

        body.macore-home .home-flow-providers span {
            transition: color 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
        }

        body.macore-home .home-flow-steps article {
            transition: opacity 240ms ease, background 240ms ease;
        }

        @media (width >= 64rem) {
            body.macore-home .home-flow-node,
            body.macore-home .home-flow-hub,
            body.macore-home .home-flow-hub::before,
            body.macore-home .home-flow-providers span,
            body.macore-home .home-flow-steps article {
                transition: none;
            }
        }

        @media (width > 42em) {
            body.macore-home .home-information-card:hover,
            body.macore-home .home-pricing-card:hover {
                border-color: color-mix(in oklch, var(--home-accent) 45%, var(--home-line));
                background: color-mix(in oklch, var(--home-surface-raised) 50%, transparent);
            }

            body.macore-home .home-pricing-tier:hover {
                border-color: color-mix(in oklch, var(--home-accent) 45%, var(--home-line));
                background: color-mix(in oklch, var(--home-surface-raised) 55%, transparent);
            }

            body.macore-home .home-primary-action:hover,
            body.macore-home .home-secondary-action:hover {
                transform: translateY(-1px);
            }

            body.macore-home .home-model-grid span:hover {
                color: var(--home-foreground);
                border-color: var(--home-accent);
            }
        }

        html.home-js body.macore-home .home-reveal {
            opacity: 0;
            transform: translateY(1.4rem);
        }

        html.home-js body.macore-home .home-reveal.is-visible {
            animation: home-enter 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        body.macore-home .home-pricing-panel:not([hidden]) {
            animation: home-panel-in 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        body.macore-home .home-eyebrow span {
            animation: home-pulse 2.8s ease-in-out infinite;
        }
    }

    @keyframes home-enter {
        from {
            opacity: 0;
            transform: translateY(1.4rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes home-pulse {
        50% {
            opacity: 0.45;
        }
    }

    @keyframes home-panel-in {
        from {
            opacity: 0;
            transform: translateY(0.45rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes home-header-drop {
        from {
            opacity: 0;
            filter: blur(0.5rem);
            transform: translateY(-1.1rem);
        }

        to {
            opacity: 1;
            filter: blur(0);
            transform: translateY(0);
        }
    }

}

@layer home-components {
    .home-information--simple .home-section-heading {
        max-inline-size: none;
        text-align: center;
        margin-block-end: clamp(2rem, 1.5rem + 1cqi, 3rem);
    }

    .home-information--simple .home-information-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        border: 0;
    }

    .home-information--simple .home-information-card {
        min-inline-size: 0;
        min-block-size: 0;
        margin-block-start: 0;
        gap: 0.9rem;
        border: 1px solid var(--home-line);
        border-radius: 0.5rem;
    }

    .home-information--simple .home-information-card > p {
        line-height: 1.85;
        overflow-wrap: anywhere;
    }

    @media (width <= 42em) {
        .home-information--simple .home-information-grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}