/* Reset & Variables */
:root {
    --bg-dark: #010101;
    --text-main: #ffffff;
    --text-muted: #b0b0c0;
    --accent-1: #4F46E5;
    --accent-2: #EC4899;
    --accent-3: #8B5CF6;
    --qiell-violet: #896bff;
    --cap-preview-surface-bg: #fefefe;
    --cap-preview-surface-fg: #020202;
    --cap-preview-surface-transition-duration: 300ms;
    --cap-preview-surface-transition-easing: ease;
    --nav-height: 60px;
    --font-heading: var(--font-google-sans-flex);
    --font-body: var(--font-google-sans-flex);
}

:root:has(.cap-preview-section.is-copy-inverted) {
    --cap-preview-surface-bg: #010101;
    --cap-preview-surface-fg: #fefefe;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]:not([tabindex="-1"])) {
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    font-weight: 100;
    overflow-x: hidden;
    line-height: 1.6;
    padding-top: var(--nav-height);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-subtle {
    position: relative;
    padding: 0.6rem 1.5rem;
    border-radius: 3px !important;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-family: var(--font-google-sans-flex), sans-serif;
    text-transform: none;
    letter-spacing: normal;
    width: fit-content;
    clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
    color: white;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.btn-secondary::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: #010101;
    z-index: -1;
    clip-path: inherit;
    border-radius: inherit;
    transition: background 0.3s ease;
}

.btn-secondary:hover::before {
    background: rgba(255, 255, 255, 0.05);
}

.btn-subtle {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

.btn-subtle::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: rgba(255, 255, 255, 0.03);
    z-index: -1;
    clip-path: inherit;
    border-radius: inherit;
    transition: background 0.3s ease;
}

.btn-secondary::after,
.btn-subtle::after {
    content: "";
    position: absolute;
    inset: 1px;
    background: #ffffff;
    z-index: -1;
    clip-path: inherit;
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-secondary:hover::after,
.btn-subtle:hover::after {
    transform: scaleX(1);
}

.btn-secondary:hover,
.btn-subtle:hover {
    color: #000000 !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
}

/* Animación de la flecha interactiva (si existe una segunda etiqueta span) */
.btn-primary span:not(:first-child),
.btn-secondary span:not(:first-child),
.btn-subtle span:not(:first-child) {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover span:not(:first-child),
.btn-secondary:hover span:not(:first-child),
.btn-subtle:hover span:not(:first-child) {
    transform: translateX(6px);
}

.btn-primary.large,
.btn-secondary.large,
.btn-subtle.large {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

/* Hero Section */
.hero {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    margin-top: calc(var(--nav-height) * -1);
    display: flex;
    justify-content: center;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: visible;
    scroll-snap-align: start;
}

#global-background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-color: var(--bg-dark);
    overflow: hidden;
}

.global-background-layer {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 46%, transparent 67%), url("../images/star-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    transition: opacity 200ms ease;
    z-index: -2;
}

#stars-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 900ms ease;
    will-change: opacity;
}

.hero-content {
    text-align: left;
    z-index: 10;
    width: 100%;
    padding-inline: 8% 5%;
    min-height: 100svh;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    justify-items: start;
    align-items: center;
}

.hero-title {
    font-size: clamp(2.55rem, 5.1vw, 5.0rem);
    font-weight: 300;
    font-family: var(--font-google-sans-flex);
    line-height: 1.1;
    letter-spacing: -0.01em;
    word-spacing: normal;
    min-height: 2.2em;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin: 0;
    text-align: left;
    position: relative;
}

.hero-title-anchor {
    display: block;
    visibility: hidden;
    pointer-events: none;
}

.hero-title-anchor-line {
    display: block;
    white-space: nowrap;
    text-align: left;
}

.hero-title-emphasis {
    font-style: italic;
}

.hero-title-live {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: flex-start;
    pointer-events: none;
}

.hero-typewriter {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.hero-typewriter-line {
    display: block;
    white-space: nowrap;
}

.hero-typewriter-char {
    opacity: 0;
}

.hero-typewriter-char.is-visible {
    opacity: 1;
}

.hero-title-cursor {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    margin-left: 0;
    overflow: visible;
    transform: translateX(0.08em);
}

.hero-title-cursor.is-positioned {
    visibility: visible;
}

.cursor {
    display: inline-block;
    color: var(--accent-3);
    -webkit-text-fill-color: currentColor;
    font-weight: 300;
    animation: blink 0.55s step-end infinite;
    width: 0;
    overflow: visible;
    transform: translateX(5px);
}

.hero-title-cursor.cursor {
    animation: blink 0.393s step-end infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.company-name {
    font-size: clamp(0.9rem, 3.2vw, 24px);
    color: var(--text-main);
    font-weight: 200;
    letter-spacing: normal;
    margin-bottom: clamp(0.7rem, 2.5vw, 1rem);
    opacity: 0;
    display: flex;
    align-items: center;
    gap: clamp(0.3rem, 1vw, 0.4rem);
    align-self: end;
}

.company-name>span:last-child {
    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-weight: 400;
}

.hero-logo-shell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-logo-img {
    position: relative;
    z-index: 1;
    height: 1.22em;
    width: auto;
}

.company-name.visible {
    animation: fadeInUp 1s ease forwards;
}

.subtitle {
    font-size: 1.3rem;
    color: var(--text-muted);
    max-width: 600px;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeInUp 1s ease 2s forwards;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    visibility: hidden;
    transform: translateY(20px);
    transition: transform 1s ease;
    align-self: start;
    margin-top: 1.5rem;
}

.hero-actions.visible {
    visibility: visible;
    transform: translateY(0);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Mock Content Sections */
.content-section {
    padding: 8rem 5%;
    position: relative;
    background: var(--bg-dark);
    z-index: 5;
    scroll-snap-align: start;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.content-section h2 {
    font-size: 3rem;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #fff, var(--text-muted));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.015em;
}

.content-section>.container>p {
    color: var(--text-muted);
    font-size: 1.2rem;
    margin-bottom: 4rem;
    font-weight: 200;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: start;
}

.feature-column {
    padding: 1.2rem 1rem 0 0;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.feature-column h3 {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.feature-list {
    list-style: none;
    display: grid;
    gap: 0.9rem;
    color: var(--text-muted);
    font-weight: 100;
}

.feature-list li {
    position: relative;
    padding-left: 1.35rem;
    line-height: 1.6;
}

.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68rem;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
}

#features.features-embed-section {
    padding: 0;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: transparent;
    position: relative;
}

.master-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: visible;
    scroll-snap-align: start;
    background: transparent;
    z-index: 5;
}

.master-frame-shell {
    position: relative;
    width: min(106vw, 1580px);
    height: min(100vh, 940px);
}

.master-frame-shell--mobile {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

.master-embedded-host,
.master-mini-embedded-host {
    position: absolute;
    inset: 0;
    border: 0;
    display: block;
    background: transparent;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.master-embedded-host {
    z-index: 2;
}

.master-mini-embedded-host {
    z-index: 2;
}

.master-embedded-host.is-loaded,
.master-mini-embedded-host.is-loaded {
    opacity: 1;
    /* The logo supplies the arrival motion; show its light immediately. */
    transition-duration: 0s;
}

@media (orientation: portrait) and (max-width: 768px) {
    .master-frame-shell--desktop {
        display: none;
    }

    .master-frame-shell--mobile {
        display: flex !important;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Capabilities Preview Section */
.cap-preview-section {
    --accent-cyan: #00F0FF;
    --accent-magenta: #FF0055;
    --accent-green: #00FF66;

    --cap-preview-visual-inset: clamp(18px, 2vw, 28px);
    --cap-preview-black-top-trim: 40px;
    --cap-preview-black-left-trim: 60px;
    --cap-preview-black-bottom-trim: 4px;

    --cap-preview-border-color: rgba(0, 0, 0, 0.15);
    height: 100vh;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    z-index: 5;
    background: var(--cap-preview-surface-bg);
    transition: background-color var(--cap-preview-surface-transition-duration) var(--cap-preview-surface-transition-easing);
    isolation: isolate;
    font-family: var(--font-google-sans-flex);
}

@media (min-width: 769px) {
    .cap-preview-top-contour--mobile {
        display: none;
    }
}

@media (max-width: 768px) {
    .cap-preview-top-contour--desktop {
        display: none;
    }
}

.cap-preview-top-contour {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 20px;
    z-index: 10;
    pointer-events: none;
}

.cap-preview-top-contour--mobile {
    height: 15px;
}

.cap-preview-top-contour-fill {
    fill: var(--bg-dark);
}

.cap-preview-top-contour-edge {
    fill: none;
    stroke: var(--cap-preview-border-color);
    stroke-width: 2px;
    transform: translateY(1px);
}

.cap-preview-copy {
    width: 100%;
    margin-right: 0;
    position: relative;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
    align-self: stretch;
    padding: 0;
    padding-inline: 4vw;
    padding-inline: 4cqw;
}

.cap-preview-copy {
    background: transparent;
    border-radius: 0;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    transform: none;
    filter: blur(18px);
    opacity: 0;
    will-change: filter, opacity;
    transition: filter 1.2s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
    box-shadow: none;
}

.cap-preview-section.is-copy-visible .cap-preview-copy {
    transform: none;
    filter: none;
    opacity: 1;
}

.cap-preview-copy > h2 {
    position: relative;
    transition: color 0.05s ease;
}

.cap-preview-section.is-copy-inverted .cap-preview-copy > h2 {
    text-shadow: none !important;
}

.cap-preview-section.is-copy-inverted {
    --cap-preview-border-color: rgba(255, 255, 255, 0.15);
}

.cap-preview-section.is-copy-inverted .cap-preview-copy {
    color: #fefefe;
}

.cap-preview-section.is-copy-inverted .cap-preview-copy h2,
.cap-preview-section.is-copy-inverted .cap-preview-copy p,
.cap-preview-section.is-copy-inverted .cap-preview-copy .cap-preview-note strong,
.cap-preview-section.is-copy-inverted .cap-preview-copy .cap-preview-note p {
    color: #fefefe;
}

.cap-preview-copy>h2,
.cap-preview-copy>p,
.cap-preview-note {
    opacity: 0;
    transform: translateY(22px);
    will-change: transform, opacity;
}

.cap-preview-section.is-copy-visible .cap-preview-copy>h2,
.cap-preview-section.is-copy-visible .cap-preview-note {
    animation: cap-preview-reveal-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cap-preview-section.is-copy-visible .cap-preview-copy>h2 {
    animation-delay: 0.78s;
}

.cap-preview-section.is-copy-visible.is-heading-typed .cap-preview-copy>p {
    animation: cap-preview-fade-in 1s ease forwards;
}

.cap-preview-section.is-copy-visible .cap-preview-note:nth-child(1) {
    animation-delay: 1.24s;
}

.cap-preview-section.is-copy-visible .cap-preview-note:nth-child(2) {
    animation-delay: 1.34s;
}

.cap-preview-copy h2 {
    position: relative;
    font-family: var(--font-google-sans-flex);
    font-size: clamp(2.15rem, 4vw, 3.45rem);
    width: fit-content;
    max-width: none;
    min-height: calc(1.06em * 2);
    margin-bottom: 1.5rem;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    line-height: 1.06;
    letter-spacing: -0.03em;
    white-space: normal;
    color: #262626;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}

.cap-preview-typewriter {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.cap-preview-type-line {
    display: block;
    white-space: nowrap;
}

.cap-preview-type-char {
    opacity: 0;
}

.cap-preview-type-char.is-visible {
    opacity: 1;
}

.cap-preview-cursor {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 0;
    transform: translateX(0.08em);
}

.cap-preview-section.is-copy-erasing .cap-preview-copy>p,
.cap-preview-section.is-copy-erasing .cap-preview-note,
.cap-preview-section.is-copy-erasing .cap-preview-copy>h2 {
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    transition: opacity 180ms ease, transform 180ms ease;
}

.cap-preview-title-line {
    display: block;
    width: fit-content;
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
}

.cap-preview-section.is-copy-visible .cap-preview-title-line:nth-child(1) {
    animation: cap-preview-type-reveal 0.24s steps(18, end) forwards 0.86s;
}

.cap-preview-section.is-copy-visible .cap-preview-title-line:nth-child(2) {
    animation: cap-preview-type-reveal 0.24s steps(18, end) forwards 1.02s;
}

.cap-preview-section.is-copy-visible .cap-preview-title-line:nth-child(3) {
    animation: cap-preview-type-reveal 0.24s steps(18, end) forwards 1.18s;
}

.cap-preview-copy>p {
    max-width: 560px;
    color: #424242;
    font-family: var(--font-google-sans-flex);
    font-size: clamp(1.25rem, 1.65vw, 1.5rem);
    line-height: 1.6;
    text-wrap: pretty;
}

.cap-preview-lead {
    max-width: 560px;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    font-synthesis: none;
    letter-spacing: 0;
    text-wrap: pretty;
}

.cap-preview-lead span {
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.cap-preview-section.is-copy-inverted .cap-preview-copy > .cap-preview-lead {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
    pointer-events: none;
}

.cap-preview-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
    margin-top: 1.75rem;
    max-width: 860px;
}

.cap-preview-note {
    max-width: 31ch;
    background: transparent;
    border: 0;
    padding: 0;
}

.cap-preview-note strong {
    display: block;
    margin-bottom: 0.28rem;
    color: #000000;
    font-family: var(--font-google-sans-flex);
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.45;
}

.cap-preview-note p {
    color: #000000;
    font-family: var(--font-google-sans-flex);
    font-size: 0.98rem;
    line-height: 1.62;
}

.cap-preview-visual {
    width: 100%;
    display: flex;
    min-height: 0;
    align-self: stretch;
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-right: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    container-type: inline-size;
}

@media screen and (min-width: 1758px) {
    .cap-preview-visual {
        padding: 0;
    }
}

.cap-preview-visual {
    --cap-preview-visual-text: #050505;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: hidden;
    pointer-events: auto;
    transform: none;
    filter: blur(18px);
    opacity: 0;
    will-change: filter, opacity;
    transition: filter 1.2s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.cap-preview-section.is-copy-inverted .cap-preview-visual {
    --cap-preview-visual-text: #fefefe;
}

.cap-preview-section.is-copy-visible .cap-preview-visual {
    transform: none;
    filter: none;
    opacity: 1;
}

.cap-preview-section::after {
    content: none;
    grid-column: 2;
    grid-row: 1;
    z-index: 0;
    transform: none;
    filter: blur(18px);
    opacity: 0;
    transition: filter 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    pointer-events: none;
}

.cap-preview-section.is-copy-visible::after {
    transform: none;
    filter: none;
    opacity: 1;
}

.cap-preview-visual-card {
    position: relative;
    z-index: 1;
    width: min(100%, clamp(462px, 70cqw, 1024px));
    height: auto;
    max-width: 100%;
    max-height: 100%;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    display: grid;
    min-width: 0;
    min-height: 0;
    margin-inline: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;
}

.cap-preview-frame-shell {
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    max-width: 100%;
    flex: 1 1 auto;
    align-self: stretch;
    display: grid;
    position: relative;
    z-index: 2;
    transform: none;
    opacity: 1;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    color: #7c3aed;
    mix-blend-mode: normal;
    pointer-events: none;
}

.cap-preview-section.is-copy-visible .cap-preview-frame-shell {
    transform: none;
    opacity: 1;
}

.cap-preview-frame-shell text,
.cap-preview-frame-shell p,
.cap-preview-frame-shell span {
    color: currentColor !important;
}

.cap-preview-mounting {
    --mounting-08-ink: #050505;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    font-family: "Montserrat", "Segoe UI", sans-serif;
}

.cap-preview-mounting-embed {
    --qiell-violet: #896bff;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    background: transparent;
    overflow: hidden;
    display: grid;
    place-items: center;
    position: relative;
    isolation: isolate;
    margin-bottom: 0;
    clip-path: none;
    border-radius: inherit;
    pointer-events: none;
}

.cap-preview-diagram-root {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 260ms ease;
}

.cap-preview-section.is-diagram-pending .cap-preview-diagram-root {
    opacity: 0;
}

.cap-preview-diagram-shell {
    width: clamp(calc(100% + 140px), calc(100% + 18cqw), calc(100% + 220px));
    max-width: none;
    aspect-ratio: 1080 / 820;
    container-type: inline-size;
    display: grid;
    place-items: center;
    justify-self: center;
    position: relative;
    isolation: isolate;
}

.cap-preview-mounting-embed .mounting-08-3d {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: transparent;
    color: #111;
    font-family: "Manrope", "Aptos", sans-serif;
    filter: saturate(1.18) brightness(1.04) contrast(1.12);
    overflow: hidden;
    pointer-events: none;
}

.cap-preview-mounting-embed .triangle-stage {
    --triangle-stage-width: 1080;
    --triangle-stage-height: 820;
    --triangle-stage-shift-x: 10.4%;
    --triangle-scene-width: 62.962963%;
    --triangle-scene-height: calc(var(--triangle-scene-width) * 520 / 680);
    --triangle-scene-offset-x: calc(var(--triangle-scene-width) * 176 / 680);
    --triangle-scene-offset-y: calc(var(--triangle-scene-width) * 254 / 680 * var(--triangle-stage-width) / var(--triangle-stage-height));
    --triangle-corner-x: calc(var(--triangle-stage-shift-x) + var(--triangle-scene-offset-x) + (var(--triangle-scene-width) * 516 / 680));
    --triangle-corner-y: calc(var(--triangle-scene-height) * 118 / 520);
    --triangle-node-ui-scale: 1;
    --node-shift-y: clamp(10px, 2.1cqw, 22px);
    --triangle-anchor-top-x: 50%;
    --triangle-anchor-top-y: 22.692308%;
    --triangle-anchor-left-x: 24.117647%;
    --triangle-anchor-left-y: 71.538462%;
    --triangle-anchor-right-x: 75.882353%;
    --triangle-anchor-right-y: 71.538462%;
    --triangle-anchor-top-right-x: 75.882353%;
    --triangle-anchor-top-right-y: 22.692308%;
    --triangle-adjust-najima-x: -7.4cqw;
    --triangle-adjust-najima-y: -0.8cqw;
    --triangle-adjust-data-x: -10cqw;
    --triangle-adjust-data-y: 3.2cqw;
    --triangle-adjust-web-x: -4.8cqw;
    --triangle-adjust-web-y: 8.1cqw;
    --triangle-adjust-panel-x: 5.8cqw;
    --triangle-adjust-panel-y: 3.2cqw;
    --triangle-adjust-umi-y: 7.9cqw;
    --triangle-node-gap-top: 2.1cqw;
    --triangle-node-gap-side-left: 2.2cqw;
    --triangle-node-gap-side-right: 2cqw;
    --triangle-node-gap-side-tight: 2cqw;
    --triangle-node-gap-inline-tight: 1cqw;
    --triangle-node-gap-corner-x: 1.8cqw;
    --triangle-node-gap-corner-y: 1.3cqw;
    --triangle-chroma-cyan-x: 0px;
    --triangle-chroma-magenta-x: 0px;
    --triangle-chroma-blur: 0px;
    --triangle-chroma-shadow-alpha: 0;
    --triangle-chroma-text-alpha: 0;
    position: relative;
    width: 100%;
    aspect-ratio: var(--triangle-stage-width) / var(--triangle-stage-height);
    min-height: 0;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    flex: 0 0 auto;
    container-type: inline-size;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 680ms ease, transform 680ms cubic-bezier(0.2, 0.9, 0.2, 1);
    pointer-events: none;
}

.cap-preview-mounting-embed .triangle-stage.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cap-preview-mounting-embed .triangle-stage.is-scene-three-visible {
    --triangle-chroma-cyan-x: 0px;
    --triangle-chroma-magenta-x: 0px;
    --triangle-chroma-blur: 0px;
    --triangle-chroma-shadow-alpha: 0;
    --triangle-chroma-text-alpha: 0;
}

.cap-preview-mounting-embed .triangle-stage.is-extrusion-complete {
    --triangle-chroma-cyan-x: 11px;
    --triangle-chroma-magenta-x: -11px;
    --triangle-chroma-blur: 5.1px;
    --triangle-chroma-shadow-alpha: 1;
    --triangle-chroma-text-alpha: 0.9;
}

.cap-preview-mounting-embed .flat-stage,
.cap-preview-mounting-embed .wireframe-shell {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cap-preview-mounting-embed .flat-stage {
    transition: opacity 820ms ease, transform 820ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.cap-preview-mounting-embed .triangle-stage.is-flat-fading .flat-stage {
    opacity: 0.025;
    transform: scale(0.972);
}

.cap-preview-mounting-embed .triangle-scene {
    --triangle-node-base-translate: translate(
        calc(-50% + var(--node-offset-x, 0px)),
        calc(-50% + var(--node-offset-y, 0px))
    );
    --node-label-width: min(160px, 28cqw);
    --node-label-align: center;
    position: absolute;
    pointer-events: none;
    transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.cap-preview-mounting-embed .triangle-stage.is-instant-intro-visible .triangle-scene,
.cap-preview-mounting-embed .triangle-stage.is-instant-intro-visible .triangle-connector-layer,
.cap-preview-mounting-embed .triangle-stage.is-instant-intro-visible .triangle-connector,
.cap-preview-mounting-embed .triangle-stage.is-instant-intro-visible .node,
.cap-preview-mounting-embed .triangle-stage.is-instant-intro-visible .node-corner {
    transition: none !important;
}

.cap-preview-mounting-embed .triangle-stage.is-instant-intro-visible .triangle-connector {
    animation: none !important;
}

.cap-preview-mounting-embed .triangle-stage.is-layout-syncing .node,
.cap-preview-mounting-embed .triangle-stage.is-layout-syncing .node-corner {
    transition: none;
}

.cap-preview-mounting-embed .triangle-scene-one,
.cap-preview-mounting-embed .triangle-scene-two,
.cap-preview-mounting-embed .triangle-scene-three {
    width: var(--triangle-scene-width);
    aspect-ratio: 680 / 520;
}

.cap-preview-mounting-embed .triangle-scene-one {
    left: var(--triangle-stage-shift-x);
    top: 0;
}

.cap-preview-mounting-embed .triangle-scene-two {
    left: calc(var(--triangle-stage-shift-x) + var(--triangle-scene-offset-x));
    top: var(--triangle-scene-offset-y);
    opacity: 0;
    transform: translateY(14px) scale(0.96);
}

.cap-preview-mounting-embed .triangle-scene-three {
    left: calc(var(--triangle-stage-shift-x) + var(--triangle-scene-offset-x));
    top: 0;
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
}

.cap-preview-mounting-embed .triangle-stage.is-collapsing .triangle-scene,
.cap-preview-mounting-embed .triangle-stage.is-collapsing .node-corner,
.cap-preview-mounting-embed .triangle-stage.is-collapsing .triangle-connector-layer {
    transition-duration: 360ms;
}

.cap-preview-mounting-embed .triangle-stage.is-collapsing .triangle-scene .node,
.cap-preview-mounting-embed .triangle-stage.is-collapsing .node-corner,
.cap-preview-mounting-embed .triangle-stage:not(.is-showing-nodes) .triangle-scene .node,
.cap-preview-mounting-embed .triangle-stage:not(.is-showing-nodes) .node-corner,
.cap-preview-mounting-embed .triangle-stage.is-hiding-nodes .triangle-scene .node,
.cap-preview-mounting-embed .triangle-stage.is-hiding-nodes .node-corner {
    opacity: 0 !important;
    visibility: hidden;
}

.cap-preview-mounting-embed .triangle-stage:not(.is-showing-nodes) .triangle-scene .node,
.cap-preview-mounting-embed .triangle-stage:not(.is-showing-nodes) .node-corner {
    transform: var(--triangle-node-base-translate) scale(0.985);
}

.cap-preview-mounting-embed .triangle-stage:not(.is-showing-nodes) .triangle-scene .node,
.cap-preview-mounting-embed .triangle-stage:not(.is-showing-nodes) .node-corner,
.cap-preview-mounting-embed .triangle-stage.is-hiding-nodes .triangle-scene .node,
.cap-preview-mounting-embed .triangle-stage.is-hiding-nodes .node-corner {
    transition-delay: 0s !important;
}

.cap-preview-mounting-embed .triangle-stage.is-hiding-nodes .triangle-scene .node,
.cap-preview-mounting-embed .triangle-stage.is-hiding-nodes .node-corner {
    transition: opacity 120ms ease;
}

.cap-preview-mounting-embed .triangle-stage.is-showing-nodes .triangle-scene .node,
.cap-preview-mounting-embed .triangle-stage.is-showing-nodes .node-corner {
    visibility: visible;
    transition: opacity 900ms ease, transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s !important;
}

.cap-preview-mounting-embed .triangle-stage.is-wireframe-takeover .triangle-map,
.cap-preview-mounting-embed .triangle-stage.is-wireframe-takeover .triangle-connector-layer {
    opacity: 0;
    transition: opacity 180ms ease;
}

.cap-preview-mounting-embed .triangle-scene-two.is-active,
.cap-preview-mounting-embed .triangle-scene-three.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cap-preview-mounting-embed .triangle-map,
.cap-preview-mounting-embed .wireframe-map,
.cap-preview-mounting-embed .triangle-connector-layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.cap-preview-mounting-embed .triangle-connector-layer {
    transition: opacity 360ms ease;
}

.cap-preview-mounting-embed .triangle-outline,
.cap-preview-mounting-embed .triangle-connector {
    fill: none;
    stroke-width: 4.4;
    stroke-linecap: butt;
    shape-rendering: geometricPrecision;
    filter:
        drop-shadow(var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, var(--triangle-chroma-shadow-alpha)))
        drop-shadow(var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, var(--triangle-chroma-shadow-alpha)));
    transition: filter 380ms ease;
}

.cap-preview-mounting-embed .triangle-outline {
    opacity: 0.9;
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
}

.cap-preview-mounting-embed .triangle-connector {
    stroke: url(#triangle-connector-stroke);
    opacity: 0;
    transition: opacity 240ms ease;
}

.cap-preview-mounting-embed .triangle-connector-layer.is-active .triangle-connector {
    opacity: 0.9;
    animation: draw-connector 720ms ease forwards;
}

.cap-preview-mounting-embed .triangle-outline-left {
    stroke: url(#triangle-stroke-left);
}

.cap-preview-mounting-embed .triangle-outline-right {
    stroke: url(#triangle-stroke-right);
}

.cap-preview-mounting-embed .triangle-outline-base {
    stroke: url(#triangle-stroke-base);
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
}

.cap-preview-mounting-embed .triangle-outline-left-two {
    stroke: url(#triangle-stroke-left-two);
}

.cap-preview-mounting-embed .triangle-outline-right-two {
    stroke: url(#triangle-stroke-right-two);
}

.cap-preview-mounting-embed .triangle-outline-base-two {
    stroke: url(#triangle-stroke-base-two);
}

.cap-preview-mounting-embed .triangle-outline-left-three {
    stroke: url(#triangle-stroke-left-three);
}

.cap-preview-mounting-embed .triangle-outline-right-three {
    stroke: url(#triangle-stroke-right-three);
}

.cap-preview-mounting-embed .triangle-outline-top {
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
}

.cap-preview-mounting-embed .triangle-outline-top-three {
    stroke: url(#triangle-stroke-top-three);
}

.cap-preview-mounting-embed .triangle-scene.is-active .triangle-outline-left {
    animation: draw-path 760ms ease forwards 120ms;
}

.cap-preview-mounting-embed .triangle-scene.is-active .triangle-outline-right {
    animation: draw-path 760ms ease forwards 260ms;
}

.cap-preview-mounting-embed .triangle-scene.is-active .triangle-outline-base,
.cap-preview-mounting-embed .triangle-scene.is-active .triangle-outline-top {
    animation: draw-path 720ms ease forwards 420ms;
}

.cap-preview-mounting-embed .node {
    top: var(--node-anchor-y, 50%);
    left: var(--node-anchor-x, 50%);
    position: absolute;
    display: grid;
    justify-items: center;
    gap: clamp(1px, 0.35cqw, 3px);
    opacity: 0;
    transform: var(--triangle-node-base-translate) scale(0.96);
    transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
    z-index: 1;
}

.cap-preview-mounting-embed .triangle-scene.is-active .node {
    opacity: 1;
}

.cap-preview-mounting-embed .node-corner {
    top: var(--triangle-corner-y);
    left: var(--triangle-corner-x);
    width: min(190px, 24cqw);
    z-index: 3;
    --triangle-node-base-translate: translate(
        calc(-50% + var(--triangle-node-gap-corner-x)),
        calc(-100% + var(--triangle-node-gap-corner-y) + var(--node-shift-y))
    );
    transform: var(--triangle-node-base-translate) scale(0.96);
    transform-origin: center bottom;
}

.cap-preview-mounting-embed .triangle-stage.is-scene-three-visible .node-corner {
    opacity: 1;
    transform: var(--triangle-node-base-translate) scale(1);
}

.cap-preview-mounting-embed .triangle-scene-one .node-top {
    --node-anchor-x: calc(var(--triangle-anchor-top-x) + var(--triangle-adjust-najima-x));
    --node-anchor-y: calc(var(--triangle-anchor-top-y) + var(--triangle-adjust-najima-y));
    --node-offset-y: calc(-50% - var(--triangle-node-gap-top) + var(--node-shift-y));
    transition-delay: 520ms;
}

.cap-preview-mounting-embed .triangle-scene-one.is-active .node-top {
    transform: var(--triangle-node-base-translate) scale(1);
}

.cap-preview-mounting-embed .triangle-scene-one .node-left,
.cap-preview-mounting-embed .triangle-scene-one .node-right {
    --node-anchor-y: var(--triangle-anchor-left-y);
}

.cap-preview-mounting-embed .triangle-scene-one .node-left {
    --node-anchor-x: calc(var(--triangle-anchor-left-x) + var(--triangle-adjust-data-x));
    --node-anchor-y: calc(var(--triangle-anchor-left-y) + var(--triangle-adjust-data-y));
    --node-offset-x: calc(-50% - var(--triangle-node-gap-side-left));
    --node-offset-y: var(--node-shift-y);
    transition-delay: 680ms;
}

.cap-preview-mounting-embed .triangle-scene-one .node-right {
    --node-anchor-x: calc(var(--triangle-anchor-right-x) + var(--triangle-adjust-panel-x));
    --node-anchor-y: calc(var(--triangle-anchor-right-y) + var(--triangle-adjust-panel-y));
    --node-offset-x: calc(50% + var(--triangle-node-gap-side-right));
    --node-offset-y: var(--node-shift-y);
    transition-delay: 760ms;
}

.cap-preview-mounting-embed .triangle-scene-one.is-active .node-left {
    transform: var(--triangle-node-base-translate) scale(1);
}

.cap-preview-mounting-embed .triangle-scene-one.is-active .node-right {
    transform: var(--triangle-node-base-translate) scale(1);
}

.cap-preview-mounting-embed .triangle-scene-two .node-left {
    --node-anchor-x: calc(var(--triangle-anchor-left-x) + var(--triangle-adjust-web-x));
    --node-anchor-y: calc(var(--triangle-anchor-left-y) + var(--triangle-adjust-web-y));
    --node-offset-x: calc(-50% - var(--triangle-node-gap-side-tight));
    --node-offset-y: calc(18% + var(--node-shift-y));
    transition-delay: 220ms;
}

.cap-preview-mounting-embed .triangle-scene-two .node-right {
    display: inline-flex;
    align-items: center;
    gap: clamp(2px, 0.7cqw, 4px);
    justify-items: unset;
    --node-anchor-x: var(--triangle-anchor-right-x);
    --node-anchor-y: calc(var(--triangle-anchor-right-y) + var(--triangle-adjust-umi-y));
    --node-label-width: auto;
    --node-label-align: left;
    --node-offset-x: calc(50% + var(--triangle-node-gap-inline-tight) + clamp(20px, 3.2cqw, 26px));
    --node-offset-y: calc(58% + var(--node-shift-y));
    transition-delay: 320ms;
}

.cap-preview-mounting-embed .triangle-scene-two.is-active .node-left {
    transform: var(--triangle-node-base-translate) scale(1);
}

.cap-preview-mounting-embed .triangle-scene-two.is-active .node-right {
    transform: var(--triangle-node-base-translate) scale(1);
}

.cap-preview-mounting-embed .najima-lockup {
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.9cqw, 6px);
}

.cap-preview-mounting-embed .najima-mark {
    width: clamp(36px, 6.8cqw, 46px);
    height: clamp(36px, 6.8cqw, 46px);
    display: block;
    transform: translateY(1px);
}

.cap-preview-mounting-embed .najima-word,
.cap-preview-mounting-embed .node-label {
    color: var(--cap-preview-visual-text) !important;
    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-weight: 400;
    text-shadow:
        var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, var(--triangle-chroma-text-alpha)),
        var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, var(--triangle-chroma-text-alpha));
    transition: text-shadow 380ms ease;
}

.cap-preview-mounting-embed .najima-word {
    font-size: clamp(12px, 2.35cqw, 17px);
    line-height: 1;
    letter-spacing: -0.02em;
}

.cap-preview-mounting-embed .icon-shell {
    display: grid;
    place-items: center;
    width: clamp(34px, 6.8cqw, 45px);
    height: clamp(34px, 6.8cqw, 45px);
    color: #fff;
    transform: translateY(clamp(4px, 0.8cqw, 8px));
}

.cap-preview-mounting-embed .icon-shell svg {
    width: clamp(22px, 4.6cqw, 29px);
    height: clamp(22px, 4.6cqw, 29px);
    filter:
        drop-shadow(var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, calc(var(--triangle-chroma-shadow-alpha) * 0.9)))
        drop-shadow(var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, calc(var(--triangle-chroma-shadow-alpha) * 0.9)));
    transition: filter 380ms ease;
}

.cap-preview-mounting-embed .icon-shell img {
    width: clamp(24px, 4.9cqw, 29px);
    height: clamp(24px, 4.9cqw, 29px);
    display: block;
    filter:
        drop-shadow(var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, calc(var(--triangle-chroma-shadow-alpha) * 0.82)))
        drop-shadow(var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, calc(var(--triangle-chroma-shadow-alpha) * 0.82)));
    transition: filter 380ms ease;
}

.cap-preview-mounting-embed .node-label {
    width: var(--node-label-width);
    margin: 0;
    font-size: clamp(12px, 2.3cqw, 17px);
    line-height: 1.1;
    text-align: var(--node-label-align);
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.cap-preview-mounting-embed .node-label-only .node-label {
    min-height: clamp(34px, 6.8cqw, 45px);
    display: grid;
    place-items: center;
    transform: translateY(clamp(4px, 0.8cqw, 8px));
}

.cap-preview-mounting-embed .node-corner .node-label {
    max-width: min(190px, 24cqw);
    font-size: clamp(12px, 2.3cqw, 17px);
    line-height: 1;
    text-align: center;
    margin-top: -4px;
}

.cap-preview-mounting-embed .node-corner.node-label-only .node-label {
    margin-top: 0;
    transform: translateY(clamp(8px, 1.4cqw, 12px));
}

.cap-preview-mounting-embed .node-corner .icon-shell {
    transform: translateY(clamp(8px, 1.4cqw, 12px));
}

.cap-preview-mounting-embed .triangle-scene-two .node-label {
    white-space: normal;
}

.cap-preview-mounting-embed .triangle-scene-two .node-right .node-label {
    max-width: none;
    font-size: clamp(12px, 2.3cqw, 17px);
    line-height: 1.1;
    white-space: nowrap;
}

.cap-preview-mounting-embed .triangle-scene-two .node-right .icon-shell img {
    width: clamp(28px, 5.8cqw, 39px);
    height: clamp(28px, 5.8cqw, 39px);
    transform: translateY(clamp(-7px, -0.8cqw, -3px));
}

.cap-preview-mounting-embed .wireframe-shell {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 680ms ease, transform 900ms cubic-bezier(0.16, 0.84, 0.24, 1);
    pointer-events: none;
}

.cap-preview-mounting-embed .wireframe-shell.is-instant-visible {
    transition: none;
}

.cap-preview-mounting-embed .triangle-stage.is-wireframe-visible .wireframe-shell {
    opacity: 1;
    transform: scale(1);
}

.cap-preview-mounting-embed .wireframe-aura {
    display: none;
}

.cap-preview-mounting-embed .wireframe-face {
    fill: url(#wireframe-face);
    stroke: none;
    mix-blend-mode: multiply;
}

.cap-preview-mounting-embed .wireframe-line {
    fill: none;
    stroke-linecap: butt;
    vector-effect: non-scaling-stroke;
    filter:
        drop-shadow(var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(64, 185, 236, calc(var(--triangle-chroma-shadow-alpha) * 1.12)))
        drop-shadow(var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, calc(var(--triangle-chroma-shadow-alpha) * 1.12)));
    shape-rendering: geometricPrecision;
    transition: filter 380ms ease;
}

.cap-preview-mounting-embed .wireframe-line.is-front-face,
.cap-preview-mounting-embed .wireframe-line.is-front {
    stroke: #7c6cff;
}

.cap-preview-mounting-embed .wireframe-line.is-spine {
    stroke: #40b9ec;
}

.cap-preview-mounting-embed .wireframe-line.is-back-face,
.cap-preview-mounting-embed .wireframe-line.is-back {
    stroke: #40b9ec;
}

.cap-preview-mounting-embed .wireframe-point {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.6;
    filter:
        drop-shadow(var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(64, 185, 236, calc(var(--triangle-chroma-shadow-alpha) * 1.06)))
        drop-shadow(var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, calc(var(--triangle-chroma-shadow-alpha) * 1.06)));
    transition: filter 380ms ease;
}

.cap-preview-mounting-embed .wireframe-point.is-front-point {
    color: #7c6cff;
}

.cap-preview-mounting-embed .wireframe-point.is-back-point {
    color: #40b9ec;
}

.cap-preview-mounting-embed .triangle-stage.is-extrusion-complete .wireframe-line,
.cap-preview-mounting-embed .triangle-stage.is-extrusion-complete .wireframe-point,
.cap-preview-mounting-embed .triangle-stage.is-extrusion-complete .icon-shell svg,
.cap-preview-mounting-embed .triangle-stage.is-extrusion-complete .icon-shell img {
    animation: cap-preview-chroma-interference 5.8s ease-in-out infinite;
}

.cap-preview-mounting-embed .triangle-stage.is-extrusion-complete .najima-word,
.cap-preview-mounting-embed .triangle-stage.is-extrusion-complete .node-label {
    animation: cap-preview-chroma-text-interference 5.8s ease-in-out infinite;
}

@media (max-width: 760px) {
    .cap-preview-mounting-embed .triangle-stage.is-extrusion-complete {
        --triangle-chroma-blur: 0px;
        --triangle-chroma-shadow-alpha: 0.42;
        --triangle-chroma-text-alpha: 0.36;
    }

    .cap-preview-visual-card {
        width: min(100%, 560px);
        height: auto;
        max-height: none;
        aspect-ratio: 1 / 1;
    }

    .cap-preview-diagram-shell {
        width: calc(100% + 92px);
    }

    .cap-preview-mounting-embed .mounting-08-3d {
        padding: 0;
    }
}

@media (max-width: 560px) {
    .cap-preview-visual-card {
        width: min(100%, 430px);
        height: auto;
        max-height: none;
        aspect-ratio: 1 / 1;
    }

    .cap-preview-diagram-shell {
        width: calc(100% + 64px);
    }
}

@keyframes draw-path {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes draw-connector {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes cap-preview-chroma-interference {
    0%,
    13.24%,
    49.66%,
    100% {
        filter: none;
    }

    18.21% {
        filter:
            drop-shadow(var(--triangle-chroma-cyan-x) 0 calc(var(--triangle-chroma-blur) * 0.45) rgba(44, 242, 255, calc(var(--triangle-chroma-shadow-alpha) * 0.18)))
            drop-shadow(var(--triangle-chroma-magenta-x) 0 calc(var(--triangle-chroma-blur) * 0.45) rgba(255, 58, 167, calc(var(--triangle-chroma-shadow-alpha) * 0.18)));
    }

    24.83% {
        filter:
            drop-shadow(var(--triangle-chroma-cyan-x) 0 calc(var(--triangle-chroma-blur) * 0.72) rgba(44, 242, 255, calc(var(--triangle-chroma-shadow-alpha) * 0.46)))
            drop-shadow(var(--triangle-chroma-magenta-x) 0 calc(var(--triangle-chroma-blur) * 0.72) rgba(255, 58, 167, calc(var(--triangle-chroma-shadow-alpha) * 0.46)));
    }

    31.45% {
        filter:
            drop-shadow(var(--triangle-chroma-cyan-x) 0 calc(var(--triangle-chroma-blur) * 0.92) rgba(44, 242, 255, calc(var(--triangle-chroma-shadow-alpha) * 0.82)))
            drop-shadow(var(--triangle-chroma-magenta-x) 0 calc(var(--triangle-chroma-blur) * 0.92) rgba(255, 58, 167, calc(var(--triangle-chroma-shadow-alpha) * 0.82)));
    }

    38.07% {
        filter:
            drop-shadow(var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, var(--triangle-chroma-shadow-alpha)))
            drop-shadow(var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, var(--triangle-chroma-shadow-alpha)));
    }

    41.38% {
        filter:
            drop-shadow(var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, var(--triangle-chroma-shadow-alpha)))
            drop-shadow(var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, var(--triangle-chroma-shadow-alpha)));
    }

    42.7% {
        filter:
            drop-shadow(var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, var(--triangle-chroma-shadow-alpha)))
            drop-shadow(var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, var(--triangle-chroma-shadow-alpha)));
    }

    42.77% {
        filter:
            drop-shadow(var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, var(--triangle-chroma-shadow-alpha)))
            drop-shadow(var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, var(--triangle-chroma-shadow-alpha)));
    }

    42.79% {
        filter: none;
    }

    56.28%,
    61.24% {
        filter: none;
    }

    60.58% {
        filter: none;
    }

    61.9% {
        filter:
            drop-shadow(calc(var(--triangle-chroma-cyan-x) * 0.5) 0 calc(var(--triangle-chroma-blur) * 0.92) rgba(44, 242, 255, calc(var(--triangle-chroma-shadow-alpha) * 0.82)))
            drop-shadow(calc(var(--triangle-chroma-magenta-x) * 0.5) 0 calc(var(--triangle-chroma-blur) * 0.92) rgba(255, 58, 167, calc(var(--triangle-chroma-shadow-alpha) * 0.82)));
    }

    62.3% {
        filter: none;
    }

    63.98% {
        filter: none;
    }

    64.1% {
        filter:
            drop-shadow(calc(var(--triangle-chroma-cyan-x) * 0.62) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, calc(var(--triangle-chroma-shadow-alpha) * 0.96)))
            drop-shadow(calc(var(--triangle-chroma-magenta-x) * 0.62) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, calc(var(--triangle-chroma-shadow-alpha) * 0.96)));
    }

    65.14% {
        filter: none;
    }
}

@keyframes cap-preview-chroma-text-interference {
    0%,
    13.24%,
    49.66%,
    100% {
        text-shadow: none;
    }

    18.21% {
        text-shadow:
            var(--triangle-chroma-cyan-x) 0 calc(var(--triangle-chroma-blur) * 0.45) rgba(44, 242, 255, calc(var(--triangle-chroma-text-alpha) * 0.16)),
            var(--triangle-chroma-magenta-x) 0 calc(var(--triangle-chroma-blur) * 0.45) rgba(255, 58, 167, calc(var(--triangle-chroma-text-alpha) * 0.16));
    }

    24.83% {
        text-shadow:
            var(--triangle-chroma-cyan-x) 0 calc(var(--triangle-chroma-blur) * 0.72) rgba(44, 242, 255, calc(var(--triangle-chroma-text-alpha) * 0.42)),
            var(--triangle-chroma-magenta-x) 0 calc(var(--triangle-chroma-blur) * 0.72) rgba(255, 58, 167, calc(var(--triangle-chroma-text-alpha) * 0.42));
    }

    31.45% {
        text-shadow:
            var(--triangle-chroma-cyan-x) 0 calc(var(--triangle-chroma-blur) * 0.92) rgba(44, 242, 255, calc(var(--triangle-chroma-text-alpha) * 0.76)),
            var(--triangle-chroma-magenta-x) 0 calc(var(--triangle-chroma-blur) * 0.92) rgba(255, 58, 167, calc(var(--triangle-chroma-text-alpha) * 0.76));
    }

    38.07% {
        text-shadow:
            var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, var(--triangle-chroma-text-alpha)),
            var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, var(--triangle-chroma-text-alpha));
    }

    41.38% {
        text-shadow:
            var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, var(--triangle-chroma-text-alpha)),
            var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, var(--triangle-chroma-text-alpha));
    }

    42.7% {
        text-shadow:
            var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, var(--triangle-chroma-text-alpha)),
            var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, var(--triangle-chroma-text-alpha));
    }

    42.77% {
        text-shadow:
            var(--triangle-chroma-cyan-x) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, var(--triangle-chroma-text-alpha)),
            var(--triangle-chroma-magenta-x) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, var(--triangle-chroma-text-alpha));
    }

    42.79% {
        text-shadow: none;
    }

    56.28%,
    61.24% {
        text-shadow: none;
    }

    60.58% {
        text-shadow: none;
    }

    61.9% {
        text-shadow:
            calc(var(--triangle-chroma-cyan-x) * 0.5) 0 calc(var(--triangle-chroma-blur) * 0.92) rgba(44, 242, 255, calc(var(--triangle-chroma-text-alpha) * 0.76)),
            calc(var(--triangle-chroma-magenta-x) * 0.5) 0 calc(var(--triangle-chroma-blur) * 0.92) rgba(255, 58, 167, calc(var(--triangle-chroma-text-alpha) * 0.76));
    }

    62.3% {
        text-shadow: none;
    }

    63.98% {
        text-shadow: none;
    }

    64.1% {
        text-shadow:
            calc(var(--triangle-chroma-cyan-x) * 0.62) 0 var(--triangle-chroma-blur) rgba(44, 242, 255, calc(var(--triangle-chroma-text-alpha) * 0.96)),
            calc(var(--triangle-chroma-magenta-x) * 0.62) 0 var(--triangle-chroma-blur) rgba(255, 58, 167, calc(var(--triangle-chroma-text-alpha) * 0.96));
    }

    65.14% {
        text-shadow: none;
    }
}

.cap-preview-copy::before,
.cap-preview-copy::after,
.cap-preview-visual::before,
.cap-preview-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity, background-position, filter;
}

.cap-preview-copy::before,
.cap-preview-visual::before {
    background:
        linear-gradient(rgba(255, 0, 145, 0.34), rgba(255, 0, 145, 0.34)) 4% 12% / 34% 18px no-repeat,
        linear-gradient(rgba(0, 255, 255, 0.28), rgba(0, 255, 255, 0.28)) 58% 26% / 22% 26px no-repeat,
        linear-gradient(rgba(255, 246, 0, 0.22), rgba(255, 246, 0, 0.22)) 12% 62% / 46% 14px no-repeat,
        repeating-linear-gradient(to bottom,
            transparent 0 14px,
            rgba(0, 255, 255, 0.92) 14px 17px,
            transparent 17px 33px,
            rgba(255, 246, 0, 0.76) 33px 37px,
            transparent 37px 58px,
            rgba(0, 142, 255, 0.86) 58px 63px,
            transparent 63px 88px),
        repeating-linear-gradient(to bottom,
            transparent 0 18px,
            rgba(255, 0, 145, 0.24) 18px 44px,
            transparent 44px 82px,
            rgba(0, 255, 255, 0.2) 82px 118px,
            transparent 118px 178px),
        repeating-linear-gradient(to bottom,
            transparent 0 22px,
            rgba(85, 255, 180, 0.84) 22px 27px,
            transparent 27px 46px,
            rgba(103, 0, 255, 0.66) 46px 52px,
            transparent 52px 79px,
            rgba(255, 0, 187, 0.62) 79px 86px,
            transparent 86px 126px),
        repeating-linear-gradient(to bottom,
            transparent 0 40px,
            rgba(255, 106, 0, 0.52) 40px 72px,
            transparent 72px 128px,
            rgba(0, 255, 255, 0.4) 128px 154px,
            transparent 154px 220px),
        repeating-linear-gradient(to right,
            transparent 0 11%,
            rgba(255, 255, 255, 0.08) 11% 13%,
            transparent 13% 29%,
            rgba(0, 255, 255, 0.09) 29% 31%,
            transparent 31% 47%,
            rgba(255, 0, 140, 0.07) 47% 49%,
            transparent 49% 100%),
        linear-gradient(90deg, rgba(0, 255, 255, 0.24), rgba(0, 255, 255, 0.03));
    background-position: 4% 12%, 58% 26%, 12% 62%, 0 0, 0 -28px, 0 14px, 0 -18px, 0 0, 0 0;
}

.cap-preview-copy::after,
.cap-preview-visual::after {
    background:
        linear-gradient(rgba(0, 255, 255, 0.24), rgba(0, 255, 255, 0.24)) 62% 9% / 28% 20px no-repeat,
        linear-gradient(rgba(255, 106, 0, 0.28), rgba(255, 106, 0, 0.28)) 8% 41% / 18% 32px no-repeat,
        linear-gradient(rgba(103, 0, 255, 0.24), rgba(103, 0, 255, 0.24)) 54% 74% / 32% 16px no-repeat,
        repeating-linear-gradient(to bottom,
            transparent 0 12px,
            rgba(255, 0, 145, 0.9) 12px 16px,
            transparent 16px 31px,
            rgba(255, 106, 0, 0.8) 31px 35px,
            transparent 35px 57px,
            rgba(0, 255, 255, 0.52) 57px 62px,
            transparent 62px 92px),
        repeating-linear-gradient(to bottom,
            transparent 0 20px,
            rgba(255, 246, 0, 0.22) 20px 48px,
            transparent 48px 88px,
            rgba(103, 0, 255, 0.24) 88px 126px,
            transparent 126px 188px),
        repeating-linear-gradient(to bottom,
            transparent 0 24px,
            rgba(210, 0, 255, 0.84) 24px 30px,
            transparent 30px 49px,
            rgba(38, 255, 0, 0.7) 49px 54px,
            transparent 54px 83px,
            rgba(255, 0, 72, 0.8) 83px 90px,
            transparent 90px 132px),
        repeating-linear-gradient(to bottom,
            transparent 0 46px,
            rgba(255, 246, 0, 0.4) 46px 78px,
            transparent 78px 138px,
            rgba(103, 0, 255, 0.34) 138px 166px,
            transparent 166px 236px),
        repeating-linear-gradient(to right,
            transparent 0 8%,
            rgba(255, 0, 145, 0.08) 8% 10%,
            transparent 10% 23%,
            rgba(255, 246, 0, 0.08) 23% 25%,
            transparent 25% 44%,
            rgba(0, 255, 255, 0.08) 44% 46%,
            transparent 46% 100%),
        linear-gradient(90deg, rgba(255, 0, 140, 0.24), rgba(255, 0, 140, 0.03));
    background-position: 62% 9%, 8% 41%, 54% 74%, 0 0, 0 18px, 0 12px, 0 -20px, 0 0, 0 0;
}

.cap-preview-copy::before,
.cap-preview-copy::after {
    mix-blend-mode: normal;
    opacity: 0;
}

.cap-preview-copy::before {
    filter: saturate(1.8) contrast(1.18) brightness(1.02);
}

.cap-preview-copy::after {
    filter: saturate(1.9) contrast(1.2) brightness(1.02);
}

.cap-preview-visual::before,
.cap-preview-visual::after {
    mix-blend-mode: screen;
    filter: saturate(1.35) contrast(1.18);
}

.cap-preview-diagram-frame {
    display: block;
    width: 100%;
    aspect-ratio: 1080 / 820;
    min-height: 615px;
    border: 0;
    background: #010101;
    pointer-events: none;
    filter: hue-rotate(16deg) saturate(2.05) brightness(1.28) contrast(1.18);
}

/* AI Node Map Section */
@keyframes cap-preview-reveal-up {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

@keyframes cap-preview-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cap-preview-type-reveal {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.ai-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    scroll-snap-align: start;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(8, 9, 11, 0) 0%, rgba(6, 7, 9, 0.9) 40%, rgba(3, 4, 5, 1) 80%);
    z-index: 5;
}

.ai-section-content {
    text-align: center;
    z-index: 10;
    margin-top: 6rem;
    pointer-events: none;
    min-height: 120px;
}

@media (min-width: 769px) {
    .ai-section-content {
        position: absolute;
        top: 11rem;
        left: 7%;
        margin-top: 0;
        max-width: 940px;
        text-align: left;
    }

    .ai-section-content .glow-text {
        font-size: 3.7rem;
        font-weight: 400;
        line-height: 1.08;
    }

    .ai-section-content .section-subtitle {
        max-width: 760px;
        font-size: 1.65rem;
        line-height: 1.4;
        text-transform: none;
        letter-spacing: 0.01em;
    }
}

.glow-text {
    background: linear-gradient(135deg, #fff, var(--text-muted));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3.5rem;
    font-weight: 530;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.section-subtitle {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 200;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.5;
}

.ai-node-desc-wrap {
    position: relative;
    display: inline-block;
    margin-top: 4.2rem;
}

.ai-node-desc {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    max-width: min(420px, calc(100vw - 108px));
    color: #ffffff;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.01em;
    min-height: 3.2em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.ai-node-desc.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ai-node-desc-triangle {
    position: absolute;
    top: 50%;
    left: calc(100% + 16px);
    width: 92px;
    aspect-ratio: 352 / 254;
    opacity: 0;
    transform: translateY(-50%) scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.ai-node-desc-triangle svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ai-node-desc-square {
    width: 78px;
    aspect-ratio: 1 / 1;
}

.ai-node-desc-najima-glyph {
    width: 112px;
    aspect-ratio: 1 / 1;
}

.ai-node-desc-triangle-line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: butt;
    shape-rendering: geometricPrecision;
    vector-effect: non-scaling-stroke;
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(124, 108, 255, 0.15));
}

.ai-node-desc-triangle-left {
    stroke: url(#ai-desc-triangle-left);
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
}

.ai-node-desc-triangle-right {
    stroke: url(#ai-desc-triangle-right);
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
}

.ai-node-desc-triangle-base {
    stroke: url(#ai-desc-triangle-base);
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
}

.ai-node-desc-wrap.has-service-triangle .ai-node-desc-triangle {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.ai-node-desc-wrap.has-service-triangle .ai-node-desc-triangle-right-angle {
    opacity: 0;
}

.ai-node-desc-wrap.has-service-triangle .ai-node-desc-triangle-inverted-right-angle {
    opacity: 0;
}

.ai-node-desc-wrap.has-service-triangle .ai-node-desc-triangle-messaging,
.ai-node-desc-wrap.has-service-triangle .ai-node-desc-triangle-predictive,
.ai-node-desc-wrap.has-service-triangle .ai-node-desc-square,
.ai-node-desc-wrap.has-service-triangle .ai-node-desc-najima-glyph {
    opacity: 0;
}

.ai-node-desc-wrap.has-service-triangle .ai-node-desc-triangle-left {
    animation: draw-path 520ms ease forwards 60ms;
}

.ai-node-desc-wrap.has-service-triangle .ai-node-desc-triangle-right {
    animation: draw-path 520ms ease forwards 140ms;
}

.ai-node-desc-wrap.has-service-triangle .ai-node-desc-triangle-base {
    animation: draw-path 500ms ease forwards 220ms;
}

.ai-node-desc-right-triangle-vertical {
    stroke: url(#ai-desc-right-triangle-vertical);
    stroke-dasharray: 254;
    stroke-dashoffset: 254;
}

.ai-node-desc-right-triangle-base {
    stroke: url(#ai-desc-right-triangle-base);
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
}

.ai-node-desc-right-triangle-diagonal {
    stroke: url(#ai-desc-right-triangle-diagonal);
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}

.ai-node-desc-history-triangle-vertical {
    stroke: url(#ai-desc-history-triangle-vertical);
    stroke-dasharray: 254;
    stroke-dashoffset: 254;
}

.ai-node-desc-history-triangle-top {
    stroke: url(#ai-desc-history-triangle-top);
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
}

.ai-node-desc-history-triangle-diagonal {
    stroke: url(#ai-desc-history-triangle-diagonal);
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}

.ai-node-desc-messaging-triangle-bottom {
    stroke: url(#ai-desc-messaging-triangle-bottom);
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
}

.ai-node-desc-messaging-triangle-vertical {
    stroke: url(#ai-desc-messaging-triangle-vertical);
    stroke-dasharray: 254;
    stroke-dashoffset: 254;
}

.ai-node-desc-messaging-triangle-diagonal {
    stroke: url(#ai-desc-messaging-triangle-diagonal);
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}

.ai-node-desc-predictive-triangle-top {
    stroke: url(#ai-desc-predictive-triangle-top);
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
}

.ai-node-desc-predictive-triangle-vertical {
    stroke: url(#ai-desc-predictive-triangle-vertical);
    stroke-dasharray: 254;
    stroke-dashoffset: 254;
}

.ai-node-desc-predictive-triangle-diagonal {
    stroke: url(#ai-desc-predictive-triangle-diagonal);
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}

.ai-node-desc-square-left {
    stroke: url(#ai-desc-square-left);
    stroke-dasharray: 254;
    stroke-dashoffset: 254;
}

.ai-node-desc-square-top {
    stroke: url(#ai-desc-square-top);
    stroke-dasharray: 254;
    stroke-dashoffset: 254;
}

.ai-node-desc-square-right {
    stroke: url(#ai-desc-square-right);
    stroke-dasharray: 254;
    stroke-dashoffset: 254;
}

.ai-node-desc-square-bottom {
    stroke: url(#ai-desc-square-bottom);
    stroke-dasharray: 254;
    stroke-dashoffset: 254;
}

.ai-node-desc-najima-glyph svg {
    filter: drop-shadow(0 0 10px rgba(124, 108, 255, 0.22));
}

.ai-node-desc-najima-outline {
    fill: none;
    stroke: url(#ai-desc-najima-gradient);
    stroke-width: 3;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0.92;
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 0 8px rgba(124, 108, 255, 0.18));
}

.ai-node-desc-wrap.has-inventory-triangle .ai-node-desc-triangle {
    opacity: 0;
}

.ai-node-desc-wrap.has-inventory-triangle .ai-node-desc-triangle-right-angle {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.ai-node-desc-wrap.has-inventory-triangle .ai-node-desc-triangle-inverted-right-angle {
    opacity: 0;
}

.ai-node-desc-wrap.has-inventory-triangle .ai-node-desc-triangle-messaging,
.ai-node-desc-wrap.has-inventory-triangle .ai-node-desc-triangle-predictive,
.ai-node-desc-wrap.has-inventory-triangle .ai-node-desc-square,
.ai-node-desc-wrap.has-inventory-triangle .ai-node-desc-najima-glyph {
    opacity: 0;
}

.ai-node-desc-wrap.has-inventory-triangle .ai-node-desc-right-triangle-vertical {
    animation: draw-path 480ms ease forwards 60ms;
}

.ai-node-desc-wrap.has-inventory-triangle .ai-node-desc-right-triangle-base {
    animation: draw-path 500ms ease forwards 140ms;
}

.ai-node-desc-wrap.has-inventory-triangle .ai-node-desc-right-triangle-diagonal {
    animation: draw-path 560ms ease forwards 220ms;
}

.ai-node-desc-wrap.has-history-triangle .ai-node-desc-triangle {
    opacity: 0;
}

.ai-node-desc-wrap.has-history-triangle .ai-node-desc-triangle-inverted-right-angle {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.ai-node-desc-wrap.has-history-triangle .ai-node-desc-triangle-right-angle,
.ai-node-desc-wrap.has-history-triangle .ai-node-desc-triangle-messaging,
.ai-node-desc-wrap.has-history-triangle .ai-node-desc-triangle-predictive,
.ai-node-desc-wrap.has-history-triangle .ai-node-desc-square,
.ai-node-desc-wrap.has-history-triangle .ai-node-desc-najima-glyph {
    opacity: 0;
}

.ai-node-desc-wrap.has-history-triangle .ai-node-desc-history-triangle-vertical {
    animation: draw-path 480ms ease forwards 60ms;
}

.ai-node-desc-wrap.has-history-triangle .ai-node-desc-history-triangle-top {
    animation: draw-path 500ms ease forwards 140ms;
}

.ai-node-desc-wrap.has-history-triangle .ai-node-desc-history-triangle-diagonal {
    animation: draw-path 560ms ease forwards 220ms;
}

.ai-node-desc-wrap.has-messaging-triangle .ai-node-desc-triangle {
    opacity: 0;
}

.ai-node-desc-wrap.has-messaging-triangle .ai-node-desc-triangle-messaging {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.ai-node-desc-wrap.has-messaging-triangle .ai-node-desc-messaging-triangle-bottom {
    animation: draw-path 500ms ease forwards 60ms;
}

.ai-node-desc-wrap.has-messaging-triangle .ai-node-desc-messaging-triangle-vertical {
    animation: draw-path 480ms ease forwards 140ms;
}

.ai-node-desc-wrap.has-messaging-triangle .ai-node-desc-messaging-triangle-diagonal {
    animation: draw-path 560ms ease forwards 220ms;
}

.ai-node-desc-wrap.has-predictive-triangle .ai-node-desc-triangle {
    opacity: 0;
}

.ai-node-desc-wrap.has-predictive-triangle .ai-node-desc-triangle-predictive {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.ai-node-desc-wrap.has-predictive-triangle .ai-node-desc-predictive-triangle-top {
    animation: draw-path 500ms ease forwards 60ms;
}

.ai-node-desc-wrap.has-predictive-triangle .ai-node-desc-predictive-triangle-vertical {
    animation: draw-path 480ms ease forwards 140ms;
}

.ai-node-desc-wrap.has-predictive-triangle .ai-node-desc-predictive-triangle-diagonal {
    animation: draw-path 560ms ease forwards 220ms;
}

.ai-node-desc-wrap.has-data-square .ai-node-desc-triangle {
    opacity: 0;
}

.ai-node-desc-wrap.has-data-square .ai-node-desc-square {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.ai-node-desc-wrap.has-data-square .ai-node-desc-square-left {
    animation: draw-path 480ms ease forwards 60ms;
}

.ai-node-desc-wrap.has-data-square .ai-node-desc-square-top {
    animation: draw-path 500ms ease forwards 140ms;
}

.ai-node-desc-wrap.has-data-square .ai-node-desc-square-right {
    animation: draw-path 480ms ease forwards 220ms;
}

.ai-node-desc-wrap.has-data-square .ai-node-desc-square-bottom {
    animation: draw-path 500ms ease forwards 300ms;
}

.ai-node-desc-wrap.has-najima-glyph .ai-node-desc-triangle {
    opacity: 0;
}

.ai-node-desc-wrap.has-najima-glyph .ai-node-desc-najima-glyph {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.ai-node-desc-wrap.has-najima-glyph .ai-node-desc-najima-outline {
    animation: draw-path 620ms ease forwards 80ms;
}

@media (min-width: 769px) {
    .ai-section-content .ai-node-desc-wrap {
        margin-top: 5rem;
    }

    .ai-section-content .ai-node-desc {
        max-width: 420px;
    }
}

#graph-container {
    position: relative;
    width: 100%;
    flex: 1;
    /* Take remaining height */
    min-height: 60vh;
    overflow: hidden;
}

#ai-agent .mounting-09 {
    width: 100%;
    min-height: 100%;
    padding: 28px;
    font-family: "Outfit", "Segoe UI", sans-serif;
}

#ai-agent .sequence-stage {
    --sequence-scene-one-width: 38%;
    --sequence-scene-two-width: 68%;
    --sequence-scene-one-top: 28.5%;
    --sequence-scene-two-top: 30%;
    --sequence-stage-lift: 52px;
    --sequence-stage-shift-x: 30%;
    position: relative;
    width: min(100%, 1080px);
    aspect-ratio: 1080 / 820;
    min-height: 820px;
    margin: calc(-1 * var(--sequence-stage-lift)) auto 0;
    opacity: 0;
    transform: translateX(var(--sequence-stage-shift-x));
    transition: opacity 520ms ease;
}

#ai-agent .sequence-stage.is-visible {
    opacity: 1;
    transform: translateX(var(--sequence-stage-shift-x));
}

#ai-agent .sequence-scene {
    position: absolute;
    pointer-events: none;
}

#ai-agent .sequence-scene-one {
    width: var(--sequence-scene-one-width);
    aspect-ratio: 1080 / 820;
    left: 50%;
    top: var(--sequence-scene-one-top);
    opacity: 0;
    transform: translate(-50%, 0) scale(1);
    transition: opacity 420ms ease;
}

#ai-agent .sequence-scene-one.is-active {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

#ai-agent .sequence-scene-two {
    width: var(--sequence-scene-two-width);
    aspect-ratio: 1080 / 820;
    left: 50%;
    top: var(--sequence-scene-two-top);
    opacity: 0;
    transform: translate(-50%, 0) scale(1);
    transition: opacity 420ms ease;
}

#ai-agent .sequence-scene-two.is-active {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    pointer-events: none;
}

#ai-agent .sequence-map {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

#ai-agent .sequence-connector {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    shape-rendering: geometricPrecision;
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(124, 108, 255, 0.15));
}

#ai-agent .sequence-one-connector {
    stroke: url(#sequence-stroke-main);
    stroke-width: 5;
    stroke-dasharray: 144;
    stroke-dashoffset: 144;
}

#ai-agent .sequence-scene-one.is-active .sequence-one-connector {
    animation: draw-path 760ms ease forwards 180ms;
}

#ai-agent .connector-upper-left {
    stroke: url(#sequence-two-stroke-upper-left);
}

#ai-agent .connector-upper-right {
    stroke: url(#sequence-two-stroke-upper-right);
}

#ai-agent .connector-lower-left {
    stroke: url(#sequence-two-stroke-lower-left);
}

#ai-agent .connector-center {
    stroke: url(#sequence-two-stroke-center);
}

#ai-agent .connector-lower-right {
    stroke: url(#sequence-two-stroke-lower-right);
}

#ai-agent .connector-upper-left,
#ai-agent .connector-upper-right {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
}

#ai-agent .connector-lower-left,
#ai-agent .connector-lower-right {
    stroke-dasharray: 390;
    stroke-dashoffset: 390;
}

#ai-agent .connector-center {
    stroke-dasharray: 330;
    stroke-dashoffset: 330;
}

#ai-agent .sequence-scene-two.is-active .connector-upper-left {
    animation: draw-path 520ms ease forwards 220ms;
}

#ai-agent .sequence-scene-two.is-active .connector-upper-right {
    animation: draw-path 520ms ease forwards 300ms;
}

#ai-agent .sequence-scene-two.is-active .connector-lower-left {
    animation: draw-path 600ms ease forwards 420ms;
}

#ai-agent .sequence-scene-two.is-active .connector-center {
    animation: draw-path 560ms ease forwards 500ms;
}

#ai-agent .sequence-scene-two.is-active .connector-lower-right {
    animation: draw-path 600ms ease forwards 580ms;
}

#ai-agent .node {
    position: absolute;
    display: grid;
    justify-items: center;
    gap: 2px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
    z-index: 1;
}

#ai-agent .sequence-scene.is-active .node {
    opacity: 1;
}

/* Scene 1 nodes should appear only after the first connector finishes drawing. */
#ai-agent .sequence-scene-one.is-active .node {
    opacity: 0;
}

#ai-agent .sequence-scene-one.is-active.nodes-visible .node {
    opacity: 1;
}

#ai-agent .node-top {
    left: 50%;
    top: 34.5%;
    z-index: 4;
    transform: translate(-50%, calc(-100% - 4px));
    transition: opacity 680ms ease;
}

#ai-agent .sequence-scene.is-active .node-top {
    transform: translate(-50%, calc(-100% - 4px));
}

#ai-agent .sequence-scene-one .node-top .node-label {
    width: auto;
    text-wrap: nowrap;
}

#ai-agent .scene-one-najima {
    left: 50%;
    top: 72%;
    transform: translate(-50%, calc(-100% - 8px)) scale(1);
    transition: opacity 680ms ease;
}

#ai-agent .sequence-scene-one.is-active .scene-one-najima {
    transform: translate(-50%, calc(-100% - 8px)) scale(1);
}

#ai-agent .scene-two-service {
    left: 33.5%;
    top: 47.853659%;
    transform: translate(calc(-100% - 18px), -50%) scale(0.96);
    transition-delay: 720ms;
}

#ai-agent .sequence-scene-two.is-active .scene-two-service {
    transform: translate(calc(-100% - 18px), -50%) scale(1);
}

#ai-agent .scene-two-messaging {
    left: 67.5%;
    top: 47.853659%;
    transform: translate(18px, -50%) scale(0.96);
    transition-delay: 800ms;
}

#ai-agent .sequence-scene-two.is-active .scene-two-messaging {
    transform: translate(18px, -50%) scale(1);
}

#ai-agent .scene-two-inventory {
    left: 34.777778%;
    top: 68.658537%;
    transform: translate(calc(-100% - 18px), -52%) scale(0.96);
    transition-delay: 920ms;
}

#ai-agent .sequence-scene-two.is-active .scene-two-inventory {
    transform: translate(calc(-100% - 18px), -52%) scale(1);
}

#ai-agent .scene-two-history {
    left: 50%;
    top: 67.317073%;
    transform: translate(-50%, 18px) scale(0.96);
    transition-delay: 1000ms;
}

#ai-agent .sequence-scene-two.is-active .scene-two-history {
    transform: translate(-50%, 0) scale(1);
}

#ai-agent .scene-two-predictive {
    left: 66.222222%;
    top: 66.658537%;
    transform: translate(18px, -52%) scale(0.96);
    transition-delay: 1080ms;
}

#ai-agent .sequence-scene-two.is-active .scene-two-predictive {
    transform: translate(18px, -52%) scale(1);
}

#ai-agent .najima-lockup {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#ai-agent .najima-mark {
    width: 56px;
    height: 56px;
    display: block;
    transform: translateY(1px);
}

#ai-agent .najima-word,
#ai-agent .node-label {
    color: #ffffff;
    font-family: "Metropolis", var(--font-heading);
    font-weight: 200;
}

#ai-agent .najima-word {
    font-weight: 200;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.02em;
}

#ai-agent .icon-shell {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: #ffffff;
    transform: translateY(8px);
}

#ai-agent .icon-shell svg {
    width: 42px;
    height: 42px;
}

#ai-agent .node-label {
    margin: -4px 0 0;
    font-size: 18px;
    line-height: 1.1;
    text-align: center;
    letter-spacing: -0.03em;
    width: min(220px, 26vw);
    text-wrap: balance;
}

#ai-agent .sequence-scene-two .node-label {
    width: min(210px, 24vw);
}

@keyframes draw-path {
    to {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 760px) {
    #ai-agent .mounting-09 {
        padding: 18px;
    }

    #ai-agent .sequence-stage {
        --sequence-scene-one-width: 42%;
        --sequence-scene-two-width: 76%;
        --sequence-scene-one-top: 29.5%;
        --sequence-scene-two-top: 31%;
        --sequence-stage-lift: 36px;
        min-height: 760px;
    }

    #ai-agent .node-top {
        top: 35%;
    }

    #ai-agent .scene-one-najima {
        top: 72.5%;
    }

    #ai-agent .scene-two-service {
        left: 35.5%;
        top: 45.5%;
    }

    #ai-agent .scene-two-messaging {
        left: 64.5%;
        top: 48.5%;
    }

    #ai-agent .scene-two-inventory {
        top: 69.5%;
    }

    #ai-agent .scene-two-predictive {
        top: 66.5%;
    }

    #ai-agent .scene-two-history {
        top: 68%;
    }

    #ai-agent .najima-mark {
        width: 48px;
        height: 48px;
    }

    #ai-agent .najima-word,
    #ai-agent .node-label {
        font-size: 16px;
    }

    #ai-agent .icon-shell {
        width: 56px;
        height: 56px;
    }

    #ai-agent .icon-shell svg {
        width: 38px;
        height: 38px;
    }

    #ai-agent .sequence-scene-two .node-label {
        width: min(180px, 26vw);
    }
}

@media (max-width: 560px) {
    #ai-agent .mounting-09 {
        padding: 14px;
    }

    #ai-agent .sequence-stage {
        --sequence-scene-one-width: 48%;
        --sequence-scene-two-width: 88%;
        --sequence-scene-one-top: 31.5%;
        --sequence-scene-two-top: 33%;
        --sequence-stage-lift: 22px;
        min-height: 680px;
    }

    #ai-agent .node-top {
        top: 39.5%;
    }

    #ai-agent .scene-one-najima {
        top: 73%;
    }

    #ai-agent .scene-two-service {
        left: 36.8%;
        top: 46.5%;
    }

    #ai-agent .scene-two-messaging {
        left: 63.2%;
        top: 49.5%;
    }

    #ai-agent .scene-two-inventory {
        top: 70.5%;
    }

    #ai-agent .scene-two-predictive {
        top: 67.5%;
    }

    #ai-agent .scene-two-history {
        top: 68.8%;
    }

    #ai-agent .najima-lockup {
        gap: 4px;
    }

    #ai-agent .najima-mark {
        width: 42px;
        height: 42px;
    }

    #ai-agent .najima-word,
    #ai-agent .node-label {
        font-size: 14px;
    }

    #ai-agent .icon-shell {
        width: 52px;
        height: 52px;
    }

    #ai-agent .icon-shell svg {
        width: 34px;
        height: 34px;
    }

    #ai-agent .sequence-scene-two .node-label {
        width: min(150px, 30vw);
    }
}

#graph-links {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

#graph-links line {
    stroke: rgba(79, 70, 229, 0.42);
    stroke-width: 2.4px;
    filter: drop-shadow(0 0 4px rgba(79, 70, 229, 0.56));
    transition: stroke 0.3s;
}

#graph-nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.ai-node {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)));
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.95rem;
    cursor: grab;
    user-select: none;
    line-height: 1.2;
    opacity: 0;
    animation: nodeEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, floatingNode var(--float-duration, 4s) ease-in-out infinite alternate var(--float-delay, 0.8s);
}

.ai-node-halo {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        0 0 25px 5px color-mix(in srgb, var(--accent-3) 22%, transparent),
        0 0 45px 12px color-mix(in srgb, var(--accent-3) 10%, transparent);
    z-index: -2;
    pointer-events: none;
    transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.ai-node-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #050507;
    border: 1px solid rgba(186, 98, 255, 0.15);
    box-shadow: inset 0 0 15px rgba(186, 98, 255, 0.08);
    z-index: -1;
    pointer-events: none;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.ai-node-label {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    width: 100%;
    height: 100%;
    color: var(--text-main);
    font-weight: 600;
    text-align: center;
}

@keyframes nodeEntrance {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0);
    }

    100% {
        opacity: 1;
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-55% + var(--dy, 0px))) scale(1);
    }
}

@keyframes centerNodeEntrance {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0);
    }

    100% {
        opacity: 1;
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1);
    }
}

@keyframes floatingNode {
    0% {
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-55% + var(--dy, 0px))) scale(1);
    }

    100% {
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-45% + var(--dy, 0px))) scale(1);
    }
}

.ai-node:active {
    cursor: grabbing;
}

.ai-node:hover {
    z-index: 10;
}

.ai-node:hover .ai-node-core {
    border-color: rgba(186, 98, 255, 0.35);
    box-shadow: inset 0 0 25px rgba(186, 98, 255, 0.2);
}

.ai-node:hover .ai-node-halo {
    transform: scale(1);
    box-shadow:
        0 0 35px 10px color-mix(in srgb, var(--accent-3) 35%, transparent),
        0 0 70px 20px color-mix(in srgb, var(--accent-3) 25%, transparent);
}

.ai-node.center-node {
    font-size: 1.4rem;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0);
    animation: centerNodeEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, pulsePlanet 5s infinite ease-in-out 0.8s;
}

.ai-node.center-node .ai-node-core {
    background: #040406;
    border: 1px solid rgba(222, 146, 255, 0.2);
    box-shadow: inset 0 0 30px rgba(222, 146, 255, 0.12);
}

.ai-node.center-node .ai-node-halo {
    inset: 2px;
    background: transparent;
    filter: none;
    transform: scale(1);
    box-shadow:
        0 0 45px 10px color-mix(in srgb, var(--accent-3) 32%, transparent),
        0 0 85px 20px color-mix(in srgb, var(--accent-3) 20%, transparent),
        0 0 140px 37px color-mix(in srgb, var(--accent-3) 8%, transparent);
}

.ai-node.center-node .ai-node-label {
    font-weight: 700;
}

.ai-node.center-node:hover {
    animation-play-state: paused;
}

.ai-node.center-node:hover .ai-node-core {
    border-color: rgba(222, 146, 255, 0.45);
    box-shadow: inset 0 0 45px rgba(222, 146, 255, 0.25);
}

.ai-node.center-node:hover .ai-node-halo {
    transform: scale(1);
    box-shadow:
        0 0 60px 17px color-mix(in srgb, var(--accent-3) 45%, transparent),
        0 0 120px 32px color-mix(in srgb, var(--accent-3) 30%, transparent),
        0 0 180px 52px color-mix(in srgb, var(--accent-3) 15%, transparent);
}

@keyframes pulsePlanet {
    0% {
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1);
    }

    50% {
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.02);
    }

    100% {
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1);
    }
}

@property --bg-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

/* Node Info Card */
.info-card {
    position: absolute;
    width: 300px;
    top: 50%;
    /* El espacio interior crea el grosor del borde donde viaja la luz animada */
    padding: 2px;
    border-radius: 17px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 20;
    text-align: left;
    border: none;
    /* Sombras estáticas base: oscura base + glow vibrante extra fijo suavizado  */
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.9),
        0 0 15px rgba(139, 92, 246, 0.7),
        /* Resplandor sólido levemente más suave, equilibrado con el animado */
        0 0 30px rgba(79, 70, 229, 0.4);
    /* Halo secundario de amplio alcance moderado */
}

/* Contenido interior opaco para ocultar el fondo y agregar el borde fijo interior */
.info-card-inner {
    background: #08080e;
    border-radius: 15px;
    /* Ligeramente menor que la tarjeta principal */
    padding: 1.8rem;
    position: relative;
    z-index: 10;
    /* Removemos borde físico interior para no chocar ni crear rebordes negros */
    border: none;
}

/* Capas del gradiente móvil (Borde base y Halo exterior) */
.info-card::before,
.info-card::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Ocupa el tamaño del padding donde va el borde */
    border-radius: 17px;
    /* Doble capa: El destello viajero por encima de un contorno liso y sólido */
    background:
        conic-gradient(from var(--bg-angle),
            /* --- Primer Cometa (0% al 50%) --- */
            rgba(139, 92, 246, 0) 0%,
            rgba(139, 92, 246, 0) 20%,
            #8b5cf6 30%,
            #22d3ee 37.5%,
            #4f46e5 44%,
            rgba(139, 92, 246, 0) 50%,

            /* --- Segundo Cometa Opuesto (50% al 100%) --- */
            rgba(139, 92, 246, 0) 50%,
            rgba(139, 92, 246, 0) 70%,
            #8b5cf6 80%,
            #ec4899 87.5%,
            #d946ef 94%,
            rgba(139, 92, 246, 0) 100%),
        rgba(139, 92, 246, 0.4);
    z-index: -1;
}

/* El halo desenfocado que se mueve sincrónicamente (Capa trasera) */
.info-card::after {
    filter: blur(15px) brightness(1.7);
    /* Aumentamos el brillo para darle más intensidad lumínica */
    /* Reducido para igualar el "grosor" del halo estático */
    z-index: -2;
    /* Quitamos el margen negativo expansivo para que quede pegado al riel */
    inset: 0;
}



.info-card h3 {
    font-size: 1.25rem;
    color: var(--text-main);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.info-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.info-card.fixed-left {
    left: 22%;
    top: 58%;
    transform: translateY(-50%) scale(0.95) translateX(-20px);
}

.info-card.fixed-right {
    right: 12%;
    top: 58%;
    transform: translateY(-50%) scale(0.95) translateX(20px);
}

.info-card.fixed-left.visible,
.info-card.fixed-right.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1) translateX(0);
}

/* Automation Section */
/* ── index.html overrides (base rules live in montage-card.css) ── */

/* Automation Section (Sticky Horizontal Slide) */
.automation-track-container {
    --automation-track-scroll-distance: 150vh;
    position: relative;
    z-index: 5;
    background: #010101;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* Ensure the background covers the full track width if needed */
}

.automation-track-snap-anchor {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.automation-track-snap-anchor--start {
    top: 0;
}

.automation-track-snap-anchor--receipts {
    top: var(--automation-track-scroll-distance);
}

.automation-track-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    container-type: inline-size;
}

.automation-track-inner {
    display: flex;
    flex-wrap: nowrap;
    width: 200vw; /* Two sections side by side */
    height: 100%;
    will-change: transform;
}

.automation-section {
    position: relative;
    width: 100vw;
    flex: 0 0 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #010101;
    padding: 0 5%;
    box-sizing: border-box;
}

#automation-receipts.automation-section {
    flex-direction: row-reverse;
}

.automation-track-spacer {
    height: var(--automation-track-scroll-distance);
    pointer-events: none;
}

/* Responsive Overrides to Disable Horizontal Slide on Small Screens */
@media (max-width: 1024px) {
    .automation-track-container {
        display: block;
    }
    .automation-track-sticky {
        position: static;
        height: auto;
        overflow: visible;
        display: block;
    }
    .automation-track-inner {
        display: block;
        width: 100%;
        height: auto;
        transform: none !important;
    }
    .automation-section {
        width: 100%;
        height: auto;
        padding: calc(var(--nav-height) + 2rem) 5% 4rem;
        flex: none;
    }
    .automation-track-spacer {
        display: none;
    }

    .automation-track-snap-anchor {
        display: none;
    }
}

#automation-receipts .video-card,
#automation .video-card {
    left: 0;
}

#automation .video-card,
#automation-receipts .video-card {
    top: 20px;
    transform: translate(0, 0) scale(0.52);
    transform-origin: center center;
    opacity: 0.82;
    filter: saturate(0.88);
    will-change: transform, opacity, filter;
    transition:
        opacity 180ms linear,
        filter 180ms linear;
}

#automation.is-mounted .video-card,
#automation-receipts.is-mounted .video-card {
    transform: none;
    opacity: 1;
    filter: none;
    will-change: auto;
}

.automation-text .section-description {
    color: #ffffff;
}

#automation .automation-text .glow-text {
    width: max-content;
    white-space: nowrap;
}

.video-card-inner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#automation-receipts .video-card-inner > .viewport {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    transform: none;
    transform-origin: center center;
    background: #ffffff;
}

#automation-receipts #mounting07 {
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* ── index.html responsive overrides ── */

@media (max-width: 1230px) {
    #automation.automation-section,
    #automation-receipts.automation-section {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 2rem;
        padding: 4rem 4%;
    }

    #automation .automation-text,
    #automation-receipts .automation-text {
        order: 0;
        max-width: 100%;
        text-align: center;
    }

    #automation .automation-text h2,
    #automation-receipts .automation-text h2 {
        text-align: center;
    }

    #automation .video-card,
    #automation-receipts .video-card {
        order: 1;
        width: 100%;
        max-width: min(92vw, 768px);
        margin: 0 auto;
    }
}

@media (max-width: 630px) {
    #automation .video-card,
    #automation-receipts .video-card {
        transform: translate(0, 0) scale(0.72);
    }

    #automation .video-card,
    #automation-receipts .video-card {
        max-width: 520px;
    }

    #automation .video-card-inner,
    #automation-receipts .video-card-inner {
        height: auto;
        max-height: none;
    }

    #automation .video-card-inner > .viewport,
    #automation-receipts .video-card-inner > .viewport {
        height: auto;
        aspect-ratio: auto;
    }
}

@media (min-width: 1025px) and (max-width: 1279px) {
    #automation .automation-text,
    #automation-receipts .automation-text {
        max-width: 500px;
    }

    #automation .automation-text .glow-text,
    #automation-receipts .automation-text .glow-text {
        font-size: clamp(2.45rem, 2.05rem + 0.78vw, 2.85rem);
        line-height: 1.1;
    }

    #automation .automation-text .section-description,
    #automation-receipts .automation-text .section-description {
        font-size: clamp(1.15rem, 1.5vw, 1.35rem);
        line-height: 1.6;
    }
}

@media (min-width: 769px) and (max-width: 1230px) {
    #automation.automation-section,
    #automation-receipts.automation-section {
        align-items: flex-start;
    }

    #automation .automation-text,
    #automation-receipts .automation-text {
        width: 100%;
        max-width: 860px;
        text-align: left;
    }

    #automation .automation-text .glow-text,
    #automation-receipts .automation-text .glow-text {
        font-size: clamp(2.2rem, 1.95rem + 0.7vw, 2.55rem);
        line-height: 1.08;
    }

    #automation .automation-text .section-description,
    #automation-receipts .automation-text .section-description {
        font-size: clamp(1.15rem, 1.5vw, 1.35rem);
        line-height: 1.6;
    }

    #automation .automation-text h2,
    #automation-receipts .automation-text h2,
    #automation .automation-text .section-description,
    #automation-receipts .automation-text .section-description {
        text-align: left;
    }

    #automation .video-card,
    #automation-receipts .video-card {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #automation .video-card,
    #automation-receipts .video-card {
        transition: none;
        transform: none;
        opacity: 1;
        filter: none;
    }
}

/* Crop the surrounding whitespace and let the scene's responsive sizing compact its content. */
.automation-showcase-frame {
    display: contents;
}

@media (min-width: 631px) {
    .automation-showcase-frame {
        container-type: inline-size;
        display: grid;
        place-items: center;
        flex: 1;
        min-width: 0;
        max-width: 768px;
    }

    :is(#automation, #automation-receipts) .automation-showcase-frame > .video-card {
        width: calc(100% * 600 / 768);
        max-width: 600px;
        margin: 0;
    }

    :is(#automation, #automation-receipts) .automation-showcase-frame .video-card-inner > .viewport {
        position: absolute;
        width: calc((100cqw - 4px) * 0.88);
        height: calc((100cqw - 4px) * 0.88);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 631px) and (max-width: 1230px) {
    .automation-showcase-frame {
        flex: none;
        order: 1;
        width: 100%;
        max-width: min(92vw, 768px);
        margin-inline: auto;
    }
}

@media (min-width: 769px) and (max-width: 1230px) {
    .automation-showcase-frame {
        margin-inline: 0;
    }
}

/* Smoke and Mirrors Styles */
.viewport {
    --sm-bg: #ffffff;
    --sm-panel: #121216;
    --sm-panel-strong: #121216;
    --sm-panel-soft: rgba(255, 255, 255, 0.04);
    --sm-border: rgba(255, 255, 255, 0.08);
    --sm-text-main: #f4f2ff;
    --sm-text-muted: #a8c0eb;
    --sm-text-soft: #89a7db;
    --sm-accent: #6597e7;
    --sm-accent-warm: #7eaaf0;
    --sm-accent-alert: #a9c4f4;
    --sm-accent-soft: rgba(101, 151, 231, 0.08);
    --sm-accent-ring: rgba(101, 151, 231, 0.14);
    --sm-accent-ring-strong: rgba(101, 151, 231, 0.72);
    --sm-accent-glow: rgba(101, 151, 231, 0.22);
    --sm-bubble-surface: #303139;
    --sm-button-fill-dark: #121216;
    --sm-button-border-dark: rgba(255, 255, 255, 0.12);
    --sm-button-fill-light: #ffffff;
    --sm-button-border-light: #000000;
    --sm-button-text-dark: #ffffff;
    --sm-button-text-light: #000000;
    --sm-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
    --sm-font-main: var(--font-google-sans-flex);
    --sm-font-alt: "JetBrains Mono", "IBM Plex Mono", monospace;

    font-family: var(--sm-font-main);
    color: var(--sm-text-main);
    background: var(--sm-bg);
}

* {
    box-sizing: border-box;
}

.viewport {
    width: min(100% - 24px, 768px);
    height: auto;
    min-height: 340px;
    display: grid;
    place-items: center;
    padding: 12px;
}

.scene-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: grid;
    align-items: center;
    padding: 36px 34px;
    isolation: isolate;
}

.ambient {
    position: absolute;
    pointer-events: none;
    display: none;
}

.ambient-one {
    inset: auto auto 8% -10%;
}

.ambient-two {
    inset: 8% -12% auto auto;
}

.conversation {
    position: relative;
    z-index: 1;
}

.conversation {
    display: grid;
    gap: 16px;
    justify-items: stretch;
    width: min(100%, 612px);
    justify-self: center;
    transition: opacity 260ms ease;
}

.conversation.is-transitioning-out {
    pointer-events: none;
}

.conversation.is-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.message-card {
    position: relative;
    border-radius: 28px;
    padding: 18px 18px 16px;
    border: 1px solid var(--sm-border);
    backdrop-filter: none;
}

.message-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.message-card-user {
    background: var(--sm-panel);
    justify-self: end;
    width: fit-content;
    max-width: min(88%, 560px);
    margin-left: auto;
    border-bottom-right-radius: 8px;
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition:
        opacity 260ms ease,
        transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1.1);
}

.message-card-user.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.message-card-user::after {
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.message-card-agent {
    padding: 4px 0 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    min-height: 420px;
    transform: none;
    opacity: 1;
    transition: none;
}

.message-card-agent.is-visible {
    opacity: 1;
    transform: none;
}

.message-card-agent::after {
    display: none;
}

.message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--sm-text-soft);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.prompt-line {
    min-height: 0;
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 400;
    text-align: right;
    transform: translateX(0);
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.reply-lead {
    margin: 14px 0 0;
    min-height: 66px;
    color: #000000;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 400;
    white-space: pre-line;
    transform: translateX(0);
    transition:
        opacity 280ms ease,
        transform 280ms ease;
}

.metrics {
    display: grid;
    gap: 10px;
    margin-top: 0;
}

.metric-row {
    display: grid;
    gap: 6px;
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: var(--sm-panel);
    border: 1px solid var(--sm-accent-ring);
    transform: translateY(12px);
    opacity: 0;
    transition:
        opacity 380ms ease,
        transform 380ms ease,
        border-color 380ms ease,
        background-color 380ms ease;
}

.metric-row.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.conversation.is-transitioning-out .message-card-user {
    opacity: 0;
    transform: translate3d(-52px, 0, 0) scale(0.98);
}

.conversation.is-transitioning-out .reply-lead {
    opacity: 0;
    transform: translate3d(-64px, 0, 0);
    transition-delay: 50ms;
}

.conversation.is-transitioning-out .metric-row {
    opacity: 0;
    transform: translate3d(-72px, 0, 0);
    transition-duration: 300ms;
}

.conversation.is-transitioning-out .metric-row:nth-child(1) {
    transition-delay: 90ms;
}

.conversation.is-transitioning-out .metric-row:nth-child(2) {
    transition-delay: 130ms;
}

.conversation.is-transitioning-out .metric-row:nth-child(3) {
    transition-delay: 170ms;
}

.conversation.is-transitioning-out .metric-row:nth-child(4) {
    transition-delay: 210ms;
}

.metric-row-alert {
    background: var(--sm-panel);
    border-color: var(--sm-accent-ring);
}

.metric-row-alert {
    position: relative;
    overflow: visible;
}

.metric-inline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.metric-inline-row .metric-value {
    flex: 1 1 auto;
}

.metric-label,
.metric-value {
    display: block;
}

.metric-label {
    color: var(--sm-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.metric-value {
    color: var(--sm-text-main);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
}

.metric-note {
    margin: 0;
    color: var(--sm-text-soft);
    font-size: 12px;
    line-height: 1.35;
}

.metric-action-wrap {
    position: relative;
    flex: 0 0 auto;
    width: fit-content;
}

.metric-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 3px;
    background: #4a4a50;
    color: #fff;
    clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    isolation: isolate;
    font: inherit;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: normal;
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    box-shadow: none;
    transition:
        opacity 260ms ease,
        transform 260ms ease,
        box-shadow 180ms ease;
}

.metric-action::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: var(--sm-button-fill-dark);
    clip-path: inherit;
    pointer-events: none;
}

.metric-action.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.metric-action.is-pressed {
    transform: translateY(1px) scale(0.97);
    box-shadow: none;
}

.metric-cursor {
    position: absolute;
    right: -16px;
    bottom: -14px;
    width: 32px;
    height: 32px;
    color: #050505;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.42));
    opacity: 0;
    transform: translate3d(30px, 16px, 0) scale(0.84);
    transition:
        opacity 180ms ease,
        transform 760ms cubic-bezier(0.18, 0.88, 0.26, 1);
    pointer-events: none;
}

.metric-cursor svg {
    width: 100%;
    height: 100%;
}

.metric-cursor.is-visible {
    opacity: 1;
}

.metric-cursor.is-approaching {
    opacity: 1;
    transform: translate3d(-16px, -2px, 0) scale(1);
}

.metric-cursor.is-clicking {
    transform: translate3d(-12px, 0, 0) scale(0.92);
}

.next-sequence {
    position: absolute;
    inset: 36px 34px;
    z-index: 2;
    display: grid;
    align-items: center;
    opacity: 0;
    transform: translate3d(52px, 0, 0);
    pointer-events: none;
    transition:
        opacity 520ms ease,
        transform 520ms cubic-bezier(0.22, 0.82, 0.22, 1);
}

.next-sequence.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.next-sequence.is-transitioning-up {
    opacity: 0;
    transform: translate3d(0, -54px, 0);
}

.chat-shell {
    display: grid;
    gap: 14px;
    width: min(100%, 612px);
    justify-self: center;
    padding: 22px;
    border-radius: 28px;
    background: rgb(10, 15, 26);
    border: 0;
    box-shadow: none;
}

.chat-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 8px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.chat-contact {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.chat-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgb(38, 124, 78);
    color: #eafff1;
    font-size: 16px;
    font-weight: 700;
}

.chat-contact-copy {
    display: grid;
    gap: 7px;
    padding-top: 3px;
}

.chat-name,
.chat-presence {
    margin: 0;
}

.chat-name {
    color: var(--sm-text-main);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}

.chat-presence {
    color: #8db09a;
    font-size: 13px;
    line-height: 1.4;
}

.chat-channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(37, 211, 102, 0.16);
    border: 1px solid rgba(37, 211, 102, 0.18);
    color: #92f5b6;
    font-size: 12px;
    font-weight: 600;
}

.chat-thread {
    display: grid;
    gap: 12px;
    padding: 6px 2px 2px;
    min-height: 0;
    align-content: start;
}

.chat-bubble {
    display: grid;
    gap: 8px;
    max-width: 82%;
    padding: 14px 16px 12px;
    border-radius: 20px;
    opacity: 0;
    transition:
        opacity 320ms ease,
        transform 320ms ease;
}

.chat-bubble-agent {
    justify-self: end;
    min-height: 98px;
    background: rgb(27, 120, 76);
    color: #effff4;
    border: 1px solid transparent;
    border-bottom-right-radius: 8px;
    transform: translateY(12px);
    transition:
        opacity 320ms ease,
        transform 320ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease;
}

.chat-bubble-agent.is-ai-composing {
    border: 1px solid var(--sm-accent);
    box-shadow:
        0 0 0 2px var(--sm-accent-ring),
        0 0 18px var(--sm-accent-glow);
}

.chat-bubble-supplier {
    justify-self: start;
    min-height: 68px;
    background: rgb(24, 31, 41);
    color: #eef3f7;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom-left-radius: 8px;
    transform: translateY(12px);
}

.chat-bubble.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.chat-bubble-text {
    margin: 0;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 400;
}

.chat-time {
    justify-self: end;
    color: rgba(239, 255, 244, 0.72);
    font-size: 11px;
    font-weight: 500;
}

.chat-meta {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 5px;
}

.chat-status {
    display: inline-flex;
    width: 20px;
    height: 12px;
    color: #5cc8ff;
}

.chat-status svg {
    width: 100%;
    height: 100%;
}

.chat-bubble-supplier .chat-time {
    color: rgba(224, 231, 238, 0.62);
}

.third-sequence {
    position: absolute;
    inset: 36px 34px;
    z-index: 3;
    display: grid;
    align-items: center;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    pointer-events: none;
    transition: opacity 520ms ease;
}

.third-sequence.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.update-shell {
    display: grid;
    gap: 12px;
    width: min(100%, 612px);
    min-height: 230px;
    justify-self: center;
    align-content: start;
}

.update-bubble {
    display: grid;
    align-items: start;
    min-height: 0;
    padding: 0;
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 320ms ease,
        transform 320ms ease;
}

.update-bubble.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.update-text {
    display: block;
    margin: 0;
    color: #000000;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 400;
    white-space: pre-line;
}

.update-user-card {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    width: fit-content;
    max-width: min(72%, 220px);
    min-height: 0;
    padding: 12px 18px;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
}

.update-user-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.update-user-text {
    min-height: 0;
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.35;
}

#update-text {
    min-height: 54px;
}

#update-followup-text {
    min-height: 27px;
}

#mounting01 {
    --scene-scale: 1;
    --scene-unit: calc(1px * var(--scene-scale));
}

@media (min-width: 631px) {
    #mounting01 {
        padding: calc(36 * var(--scene-unit)) calc(34 * var(--scene-unit));
    }

    #mounting01 .conversation {
        gap: calc(16 * var(--scene-unit));
        width: min(100%, calc(612 * var(--scene-unit)));
    }

    #mounting01 .message-card {
        border-radius: calc(28 * var(--scene-unit));
        padding: calc(18 * var(--scene-unit)) calc(18 * var(--scene-unit)) calc(16 * var(--scene-unit));
    }

    #mounting01 .message-card-user {
        max-width: min(88%, calc(560 * var(--scene-unit)));
        border-bottom-right-radius: calc(8 * var(--scene-unit));
        transform: translateY(calc(14 * var(--scene-unit))) scale(0.96);
    }

    #mounting01 .message-card-agent {
        padding-top: calc(4 * var(--scene-unit));
        min-height: calc(420 * var(--scene-unit));
    }

    #mounting01 .prompt-line,
    #mounting01 .reply-lead,
    #mounting01 .update-text,
    #mounting01 .update-user-text {
        font-size: calc(20 * var(--scene-unit));
    }

    #mounting01 .reply-lead {
        margin-top: calc(14 * var(--scene-unit));
        min-height: calc(66 * var(--scene-unit));
    }

    #mounting01 .metrics {
        gap: calc(10 * var(--scene-unit));
    }

    #mounting01 .metric-row {
        gap: calc(6 * var(--scene-unit));
        padding: calc(14 * var(--scene-unit)) calc(14 * var(--scene-unit)) calc(12 * var(--scene-unit));
        border-radius: calc(18 * var(--scene-unit));
        transform: translateY(calc(12 * var(--scene-unit)));
    }

    #mounting01 .conversation.is-transitioning-out .message-card-user {
        transform: translate3d(calc(-52 * var(--scene-unit)), 0, 0) scale(0.98);
    }

    #mounting01 .conversation.is-transitioning-out .reply-lead {
        transform: translate3d(calc(-64 * var(--scene-unit)), 0, 0);
    }

    #mounting01 .conversation.is-transitioning-out .metric-row {
        transform: translate3d(calc(-72 * var(--scene-unit)), 0, 0);
    }

    #mounting01 .metric-inline-row {
        gap: calc(12 * var(--scene-unit));
    }

    #mounting01 .metric-label {
        font-size: calc(11 * var(--scene-unit));
    }

    #mounting01 .metric-value {
        font-size: calc(18 * var(--scene-unit));
    }

    #mounting01 .metric-action {
        min-height: calc(34 * var(--scene-unit));
        padding: 0 calc(14 * var(--scene-unit));
        font-size: calc(18 * var(--scene-unit));
        transform: translateY(calc(6 * var(--scene-unit))) scale(0.96);
    }

    #mounting01 .metric-cursor {
        right: calc(-16 * var(--scene-unit));
        bottom: calc(-14 * var(--scene-unit));
        width: calc(32 * var(--scene-unit));
        height: calc(32 * var(--scene-unit));
        transform: translate3d(calc(30 * var(--scene-unit)), calc(16 * var(--scene-unit)), 0) scale(0.84);
    }

    #mounting01 .metric-cursor.is-approaching {
        transform: translate3d(calc(-16 * var(--scene-unit)), calc(-2 * var(--scene-unit)), 0) scale(1);
    }

    #mounting01 .metric-cursor.is-clicking {
        transform: translate3d(calc(-12 * var(--scene-unit)), 0, 0) scale(0.92);
    }

    #mounting01 .next-sequence,
    #mounting01 .third-sequence {
        inset: calc(36 * var(--scene-unit)) calc(34 * var(--scene-unit));
    }

    #mounting01 .next-sequence {
        transform: translate3d(calc(52 * var(--scene-unit)), 0, 0);
    }

    #mounting01 .next-sequence.is-visible {
        transform: translate3d(0, 0, 0);
    }

    #mounting01 .next-sequence.is-transitioning-up {
        transform: translate3d(0, calc(-54 * var(--scene-unit)), 0);
    }

    #mounting01 .chat-shell {
        gap: calc(14 * var(--scene-unit));
        width: min(100%, calc(612 * var(--scene-unit)));
        padding: calc(22 * var(--scene-unit));
        border-radius: calc(28 * var(--scene-unit));
    }

    #mounting01 .chat-topbar {
        gap: calc(12 * var(--scene-unit));
        min-height: calc(64 * var(--scene-unit));
        padding: calc(8 * var(--scene-unit)) 0 calc(18 * var(--scene-unit));
    }

    #mounting01 .chat-contact {
        gap: calc(12 * var(--scene-unit));
    }

    #mounting01 .chat-avatar {
        width: calc(42 * var(--scene-unit));
        height: calc(42 * var(--scene-unit));
        font-size: calc(16 * var(--scene-unit));
    }

    #mounting01 .chat-contact-copy {
        gap: calc(7 * var(--scene-unit));
        padding-top: calc(3 * var(--scene-unit));
    }

    #mounting01 .chat-name {
        font-size: calc(16 * var(--scene-unit));
    }

    #mounting01 .chat-presence {
        font-size: calc(13 * var(--scene-unit));
    }

    #mounting01 .chat-channel {
        min-height: calc(30 * var(--scene-unit));
        padding: 0 calc(12 * var(--scene-unit));
        font-size: calc(12 * var(--scene-unit));
    }

    #mounting01 .chat-thread {
        gap: calc(12 * var(--scene-unit));
        padding: calc(6 * var(--scene-unit)) calc(2 * var(--scene-unit)) calc(2 * var(--scene-unit));
    }

    #mounting01 .chat-bubble {
        gap: calc(8 * var(--scene-unit));
        padding: calc(14 * var(--scene-unit)) calc(16 * var(--scene-unit)) calc(12 * var(--scene-unit));
    }

    #mounting01 .chat-bubble-agent {
        min-height: calc(98 * var(--scene-unit));
        border-bottom-right-radius: calc(8 * var(--scene-unit));
        transform: translateY(calc(12 * var(--scene-unit)));
    }

    #mounting01 .chat-bubble-supplier {
        min-height: calc(68 * var(--scene-unit));
        border-bottom-left-radius: calc(8 * var(--scene-unit));
        transform: translateY(calc(12 * var(--scene-unit)));
    }

    #mounting01 .chat-bubble-text {
        font-size: calc(17 * var(--scene-unit));
    }

    #mounting01 .chat-time {
        font-size: calc(11 * var(--scene-unit));
    }

    #mounting01 .chat-meta {
        gap: calc(5 * var(--scene-unit));
    }

    #mounting01 .chat-status {
        width: calc(20 * var(--scene-unit));
        height: calc(12 * var(--scene-unit));
    }

    #mounting01 .update-shell {
        gap: calc(12 * var(--scene-unit));
        width: min(100%, calc(612 * var(--scene-unit)));
        min-height: calc(230 * var(--scene-unit));
        padding-top: calc(56 * var(--scene-unit));
    }

    #mounting01 .update-bubble {
        transform: translateY(calc(10 * var(--scene-unit)));
    }

    #mounting01 .update-user-card {
        max-width: min(72%, calc(220 * var(--scene-unit)));
        padding: calc(12 * var(--scene-unit)) calc(18 * var(--scene-unit));
        transform: translateY(calc(10 * var(--scene-unit))) scale(0.96);
    }

    #mounting01 #update-text {
        min-height: calc(54 * var(--scene-unit));
    }

    #mounting01 #update-followup-text {
        min-height: calc(27 * var(--scene-unit));
    }
}

#mounting01 .update-shell {
    align-content: start;
    padding-top: calc(56 * var(--scene-unit));
}

@media (max-width: 630px) {
    .scene-card {
        padding: 28px 24px;
    }

    .message-card {
        border-radius: 24px;
        padding: 16px;
    }

    .message-card-agent {
        padding-top: 4px;
        min-height: 380px;
    }

    .reply-lead {
        min-height: 78px;
        font-size: clamp(17px, 3vw, 20px);
    }

    .metric-value {
        font-size: clamp(17px, 3vw, 18px);
    }

    .next-sequence {
        inset: 28px 24px;
    }

    .third-sequence {
        inset: 28px 24px;
    }

    .chat-shell {
        width: 100%;
        padding: 18px;
        border-radius: 24px;
    }

    .chat-bubble {
        max-width: 88%;
    }

    .chat-thread {
        min-height: 0;
    }

    .chat-bubble-text {
        font-size: 15px;
    }

    .update-shell {
        width: 100%;
        min-height: 210px;
    }

    #mounting01 .update-shell {
        padding-top: 38px;
    }

    .update-bubble {
        min-height: 0;
    }

    .update-user-card {
        max-width: min(78%, 220px);
        min-height: 0;
        padding: 10px 16px;
    }

    .update-text {
        font-size: clamp(17px, 3vw, 20px);
    }

    .update-user-text {
        font-size: clamp(17px, 3vw, 20px);
    }

    #update-text {
        min-height: 46px;
    }

    #update-followup-text {
        min-height: 23px;
    }
}

/* Receipts Montage */
#mounting07 {
    --scene-scale: 1;
    --scene-unit: calc(1px * var(--scene-scale));
    background: #ffffff;
    padding: var(--receipt-scene-pad-y, 36px) var(--receipt-scene-pad-x, 34px);
    --receipt-scene-pad-y: 36px;
    --receipt-scene-pad-x: 34px;
    --receipt-panel-width: 612px;
    --receipt-conversation-width: 612px;
    --receipt-conversation-max-width: calc(100% - 68px);
    --receipt-conversation-used-width: min(var(--receipt-conversation-width), var(--receipt-conversation-max-width));
    --receipt-conversation-height: min(500px, calc(100% - 72px));
    --receipt-conversation-start-top: 56px;
    --receipt-conversation-gap: 52px;
    --receipt-shell-padding: 22px;
    --receipt-shell-gap: 16px;
    --receipt-shell-radius: 30px;
    --receipt-modal-padding: 22px;
    --receipt-modal-radius: 28px;
    --receipt-modal-overlay-padding: 28px;
    --receipt-status-pill-padding-x: 14px;
    --receipt-status-row-padding-y: 16px;
    --receipt-status-row-padding-x: 18px;
    --receipt-detail-gap: 18px;
    --receipt-detail-padding-y: 12px;
    --receipt-dropzone-padding: 18px;
    --receipt-dropzone-gap: 10px;
    --receipt-compose-min-height: 74px;
    --receipt-compose-padding-y: 14px;
    --receipt-compose-padding-x: 16px;
    --receipt-compose-gap: 10px;
    --receipt-send-min-height: 56px;
    --receipt-send-min-width: 86px;
    --receipt-send-padding-x: 16px;
    --receipt-drag-width: 176px;
    --receipt-drag-padding: 16px;
    --receipt-font-kicker: 11px;
    --receipt-font-caption: 13px;
    --receipt-font-meta: 15px;
    --receipt-font-body: 20px;
    --receipt-font-title: 19px;
    --receipt-font-modal-title: 28px;
    --receipt-font-value: 17px;
    --receipt-line-body: 1.35;
    --receipt-line-tight: 1.25;
}

#mounting07 .upload-sequence {
    position: relative;
    z-index: 1;
    width: min(100%, var(--receipt-panel-width));
    justify-self: center;
    align-self: center;
    display: grid;
    align-content: center;
    min-height: 340px;
}

#mounting07 .message-card {
    border-radius: 28px;
    padding: 18px 18px 16px;
}

#mounting07 .prompt-line,
#mounting07 .reply-lead {
    font-size: var(--receipt-font-body);
    line-height: var(--receipt-line-body);
}

#mounting07 .conversation-sequence {
    position: absolute;
    top: calc((100% - var(--receipt-conversation-height)) / 2 + 20px);
    bottom: auto;
    left: 0;
    right: 0;
    z-index: 2;
    width: var(--receipt-conversation-used-width);
    max-width: none;
    height: var(--receipt-conversation-height);
    margin-inline: auto;
    justify-self: center;
    align-self: center;
    --slot-user-primary: 56px;
    --slot-agent-primary: 168px;
    --slot-user-confirm: 332px;
    --slot-agent-final: 448px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease, top 320ms ease;
}

#mounting07 .conversation-sequence.is-visible {
    opacity: 1;
    top: calc((100% - var(--receipt-conversation-height)) / 2);
}

#mounting07 .conversation-sequence > .message-card[aria-hidden="true"] {
    visibility: hidden;
    pointer-events: none;
}

#mounting07 .conversation-sequence > .message-card {
    position: absolute;
    margin: 0;
}

#mounting07 .conversation-sequence .message-card-user {
    transform: none;
    transition: opacity 220ms ease;
}

#mounting07 .conversation-sequence .message-card-user.is-visible {
    transform: none;
}

#mounting07 .conversation-sequence .message-card-agent {
    display: grid;
    align-content: start;
    gap: 0;
    padding: 0;
    min-height: 0;
}

#mounting07 #receipt-user-card {
    top: var(--slot-user-primary);
    right: 0;
}

#mounting07 #receipt-reply-card {
    top: var(--slot-agent-primary);
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    transform: none;
    transition: opacity 260ms ease;
}

#mounting07 #receipt-reply-card.is-visible {
    opacity: 1;
}

#mounting07 #receipt-user-card-confirm {
    top: var(--slot-user-confirm);
    right: 0;
}

#mounting07 #receipt-reply-card-final {
    top: var(--slot-agent-final);
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    transform: none;
    transition: opacity 260ms ease;
}

#mounting07 #receipt-reply-card-final.is-visible {
    opacity: 1;
}

#mounting07 .conversation-sequence .reply-lead {
    margin: 0;
    min-height: 0;
}

#mounting07 .reply-status {
    display: none;
    position: absolute;
    top: 28px;
    left: 0;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 0;
    color: #4b5563;
    font-size: var(--receipt-font-meta);
    font-weight: 600;
    line-height: var(--receipt-line-body);
    opacity: 0;
    transition: opacity 220ms ease;
}

#mounting07 .reply-status.is-visible {
    display: inline-flex;
    opacity: 1;
    animation: receipt-reply-status-breathe 1.2s ease-in-out infinite;
}

#mounting07 .reply-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--sm-accent);
    box-shadow: 0 0 0 rgba(101, 151, 231, 0.55);
    animation: receipt-reply-status-pulse 1.2s ease-in-out infinite;
    flex: 0 0 auto;
}

@keyframes receipt-reply-status-pulse {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(101, 151, 231, 0.38);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(101, 151, 231, 0);
    }

    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(101, 151, 231, 0);
    }
}

@keyframes receipt-reply-status-breathe {
    0%,
    100% {
        color: #4b5563;
    }

    50% {
        color: #6b7280;
    }
}

#mounting07 .reply-followup {
    margin: 0;
    padding-top: 0;
    min-height: 0;
    max-width: 100%;
    color: #111827;
    font-size: var(--receipt-font-body);
    font-weight: 400;
    line-height: var(--receipt-line-body);
    white-space: pre-line;
    opacity: 0;
    transition: opacity 260ms ease;
}

#mounting07 .reply-followup.is-visible {
    opacity: 1;
}

#mounting07 .review-shell {
    position: relative;
    display: grid;
    gap: var(--receipt-shell-gap);
    padding: var(--receipt-shell-padding);
    border-radius: var(--receipt-shell-radius);
    background: var(--sm-panel);
    border: 1px solid var(--sm-border);
    box-shadow: none;
    transition: opacity 320ms ease, transform 320ms ease, border-color 320ms ease;
}

#mounting07 .review-shell.is-exiting-down {
    opacity: 0;
    transform: translateY(88px) scale(0.98);
    border-color: var(--sm-accent-ring);
    pointer-events: none;
}

#mounting07 .review-shell.is-hidden {
    display: none;
}

#mounting07 .student-modal-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--receipt-modal-overlay-padding);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease;
}

#mounting07 .student-modal-overlay.is-visible {
    opacity: 1;
}

#mounting07 .student-modal {
    position: relative;
    width: min(100%, 480px);
    padding: var(--receipt-modal-padding);
    border-radius: var(--receipt-modal-radius);
    background: var(--sm-panel);
    border: 1px solid var(--sm-border);
    box-shadow: none;
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: opacity 320ms ease, transform 320ms ease;
}

#mounting07 .student-modal-overlay.is-visible .student-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#mounting07 .student-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

#mounting07 .student-modal-kicker,
#mounting07 .student-label,
#mounting07 .student-status-label {
    display: block;
    color: #7c8798;
    font-size: var(--receipt-font-kicker);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#mounting07 .student-modal-kicker {
    margin: 0 0 8px;
}

#mounting07 .student-modal-title {
    margin: 0;
    color: var(--sm-text-main);
    font-size: var(--receipt-font-modal-title);
    line-height: 1.15;
    font-weight: 600;
}

#mounting07 .student-status-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 var(--receipt-status-pill-padding-x);
    border-radius: 999px;
    font-size: var(--receipt-font-caption);
    font-weight: 700;
    transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease, transform 260ms ease;
}

#mounting07 .student-status-value.is-pending {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.22);
    color: #ffd38a;
}

#mounting07 .student-status-value.is-paid {
    background: rgba(42, 190, 120, 0.14);
    border: 1px solid rgba(42, 190, 120, 0.22);
    color: #9ef0c3;
    transform: scale(1.02);
}

#mounting07 .student-modal-body {
    display: grid;
    gap: 18px;
    margin-top: 20px;
}

#mounting07 .student-modal-actions {
    display: flex;
    justify-content: flex-end;
}

#mounting07 .student-accept-btn {
    position: relative;
    min-width: 110px;
    min-height: 46px;
    padding: 0 18px;
    border: none;
    border-radius: 3px;
    background: #4a4a50;
    color: #fff;
    clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    isolation: isolate;
    font: inherit;
    font-size: var(--receipt-font-value);
    font-weight: 300;
    letter-spacing: normal;
    transition: transform 180ms ease, filter 180ms ease, background-color 220ms ease, color 220ms ease;
}

#mounting07 .student-accept-btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: var(--sm-button-fill-dark);
    clip-path: inherit;
    pointer-events: none;
}

#mounting07 .student-accept-btn.is-ready {
    background: #4a4a50;
    color: #fff;
}

#mounting07 .student-accept-btn.is-active {
    transform: scale(0.93);
    filter: brightness(1.12);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.22);
}

#mounting07 .student-details {
    display: grid;
    gap: 0;
}

#mounting07 .student-detail {
    display: grid;
    grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
    gap: var(--receipt-detail-gap);
    align-items: center;
    padding: var(--receipt-detail-padding-y) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#mounting07 .student-detail:last-child {
    border-bottom: 0;
}

#mounting07 .student-value {
    color: var(--sm-text-main);
    font-size: var(--receipt-font-value);
    line-height: 1.3;
    font-weight: 500;
}

#mounting07 .student-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--receipt-status-row-padding-y) var(--receipt-status-row-padding-x);
    border-radius: 20px;
    background: var(--sm-accent-soft);
    border: 1px solid var(--sm-accent-ring);
    transition: border-color 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
}

#mounting07 .student-status-row.is-updated {
    border-color: var(--sm-accent-ring-strong);
    background: rgba(101, 151, 231, 0.1);
}

#mounting07 .student-status-row.is-flashing {
    border-color: rgba(101, 151, 231, 0.62);
    background: rgba(101, 151, 231, 0.12);
    box-shadow:
        0 0 0 1px rgba(101, 151, 231, 0.24),
        0 0 24px rgba(101, 151, 231, 0.22),
        inset 0 0 18px rgba(101, 151, 231, 0.08);
}

#mounting07 .modal-action-cursor {
    z-index: 55;
    transform: translate3d(220px, 180px, 0) scale(0.84);
}

#mounting07 .dropzone-label {
    color: var(--sm-text-muted);
    font-size: var(--receipt-font-kicker);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#mounting07 .receipt-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: stretch;
    padding: 4px 0;
    min-height: 148px;
}

#mounting07 .receipt-dropzone,
#mounting07 .drag-ghost,
#mounting07 .compose-input {
    border-radius: 22px;
}

#mounting07 .drag-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    gap: 10px;
    align-content: start;
    width: var(--receipt-drag-width);
    padding: var(--receipt-drag-padding);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 245, 250, 0.99) 100%);
    border: 1px solid rgba(28, 28, 36, 0.08);
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-160px, -120px, 0) scale(0.9);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16);
    transition: opacity 180ms ease, transform 1170ms ease-out;
}

#mounting07 .drag-ghost.is-visible {
    opacity: 1;
}

#mounting07 .receipt-file-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--sm-accent-soft);
    color: var(--sm-accent);
    font-size: var(--receipt-font-kicker);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#mounting07 .receipt-file-copy,
#mounting07 .dropzone-file-copy {
    display: grid;
    gap: 4px;
}

#mounting07 .receipt-file-name,
#mounting07 .dropzone-file-name,
#mounting07 .dropzone-title,
#mounting07 .dropzone-hint,
#mounting07 .dropzone-file-status {
    margin: 0;
}

#mounting07 .receipt-file-name,
#mounting07 .dropzone-file-name {
    color: var(--sm-text-main);
    font-size: var(--receipt-font-meta);
    line-height: 1.3;
    font-weight: 600;
}

#mounting07 .receipt-file-name {
    color: #17171d;
}

#mounting07 .dropzone-hint,
#mounting07 .dropzone-file-status {
    color: #8f9aad;
    font-size: var(--receipt-font-caption);
    line-height: var(--receipt-line-body);
    font-weight: 500;
}

#mounting07 .receipt-dropzone {
    position: relative;
    display: grid;
    gap: var(--receipt-dropzone-gap);
    padding: var(--receipt-dropzone-padding);
    border: 1px dashed var(--sm-accent-ring);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(101, 151, 231, 0.03) 100%);
    transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

#mounting07 .receipt-dropzone.is-ready {
    transform: none;
}

#mounting07 .receipt-dropzone.is-complete {
    border-style: solid;
    border-color: rgba(101, 151, 231, 0.46);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(101, 151, 231, 0.08) 100%);
}

#mounting07 .dropzone-copy {
    display: grid;
    gap: 8px;
}

#mounting07 .dropzone-title {
    color: #f7f9ff;
    font-size: var(--receipt-font-title);
    line-height: var(--receipt-line-tight);
    font-weight: 600;
}

#mounting07 .dropzone-label {
    color: #aeb8cb;
}

#mounting07 .dropzone-file-name {
    color: #f4f7ff;
}

#mounting07 .dropzone-file-status {
    color: #9ca9bf;
}

#mounting07 .dropzone-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 260ms ease, transform 260ms ease;
}

#mounting07 .dropzone-file.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#mounting07 .dropzone-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #f8fbff;
    flex: 0 0 auto;
}

#mounting07 .dropzone-file-icon svg {
    width: 100%;
    height: 100%;
}

#mounting07 .upload-cursor {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
    width: 32px;
    height: 32px;
    color: #050505;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.42));
    opacity: 0;
    pointer-events: none;
    z-index: 40;
    transform: translate3d(-220px, -120px, 0) scale(0.84);
    transition: opacity 260ms ease, transform 1230ms ease-out;
}

#mounting07 .upload-cursor svg {
    width: 100%;
    height: 100%;
}

#mounting07 .upload-cursor.is-visible {
    opacity: 1;
}

#mounting07 .upload-cursor::before,
#mounting07 .upload-cursor::after {
    content: "";
    position: absolute;
    opacity: 0;
    transition: opacity 90ms linear;
}

#mounting07 .upload-cursor.is-text svg {
    opacity: 0;
}

#mounting07 .upload-cursor.is-text::before {
    left: 15px;
    top: 5px;
    width: 1.6px;
    height: 22px;
    border-radius: 1px;
    background: #f8fbff;
    opacity: 1;
}

#mounting07 .upload-cursor.is-text::after {
    left: 11px;
    top: 5px;
    width: 10px;
    height: 22px;
    background:
        linear-gradient(#f8fbff, #f8fbff) top center / 10px 1.6px no-repeat,
        linear-gradient(#f8fbff, #f8fbff) bottom center / 10px 1.6px no-repeat;
    opacity: 1;
}

#mounting07 .compose-panel {
    display: grid;
    gap: var(--receipt-compose-gap);
    padding: 0;
    background: transparent;
    border: 0;
}

#mounting07 .compose-row {
    display: flex;
    align-items: center;
    gap: var(--receipt-compose-gap);
}

#mounting07 .compose-input {
    flex: 1 1 auto;
    min-height: var(--receipt-compose-min-height);
    padding: var(--receipt-compose-padding-y) var(--receipt-compose-padding-x);
    background: transparent;
    border: 1px solid var(--sm-accent-ring);
    color: var(--sm-text-main);
    text-align: left;
    transition: border-color 220ms ease, background-color 220ms ease;
}

#mounting07 .compose-input.is-focused {
    border-color: var(--sm-accent);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 0 0 2px var(--sm-accent-ring);
}

#mounting07 .compose-text {
    display: inline;
    color: #f8fbff;
    font-size: var(--receipt-font-meta);
    font-weight: 600;
    line-height: 1.45;
    white-space: pre-wrap;
}

#mounting07 .compose-caret {
    display: inline-block;
    width: 1.5px;
    height: 18px;
    margin-left: 0;
    vertical-align: -3px;
    background: #ffffff;
    opacity: 0;
}

#mounting07 .compose-input.is-focused .compose-caret {
    opacity: 1;
    animation: receipt-compose-caret-blink 0.9s steps(1, end) infinite;
}

#mounting07 .compose-send {
    position: relative;
    flex: 0 0 auto;
    min-width: var(--receipt-send-min-width);
    min-height: var(--receipt-send-min-height);
    padding: 0 var(--receipt-send-padding-x);
    border: none;
    border-radius: 3px;
    background: #4a4a50;
    color: #fff;
    clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    isolation: isolate;
    font: inherit;
    font-size: var(--receipt-font-meta);
    font-weight: 300;
    letter-spacing: normal;
    box-shadow: none;
    transition: transform 180ms ease, filter 180ms ease;
}

#mounting07 .compose-send::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: var(--sm-button-fill-dark);
    clip-path: inherit;
    pointer-events: none;
}

#mounting07 .compose-send.is-active {
    transform: scale(0.96);
    filter: brightness(1.05);
}

@keyframes receipt-compose-caret-blink {
    0%,
    49% {
        opacity: 1;
    }

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

@media (min-width: 631px) {
    #mounting07 {
        --receipt-scene-pad-y: calc(36 * var(--scene-unit));
        --receipt-scene-pad-x: calc(34 * var(--scene-unit));
        --receipt-panel-width: calc(612 * var(--scene-unit));
        --receipt-conversation-width: calc(612 * var(--scene-unit));
        --receipt-conversation-max-width: calc(100% - 68 * var(--scene-unit));
        --receipt-conversation-height: min(calc(500 * var(--scene-unit)), calc(100% - 72 * var(--scene-unit)));
        --receipt-conversation-start-top: calc(56 * var(--scene-unit));
        --receipt-conversation-gap: calc(52 * var(--scene-unit));
        --receipt-shell-padding: calc(22 * var(--scene-unit));
        --receipt-shell-gap: calc(16 * var(--scene-unit));
        --receipt-shell-radius: calc(30 * var(--scene-unit));
        --receipt-modal-padding: calc(22 * var(--scene-unit));
        --receipt-modal-radius: calc(28 * var(--scene-unit));
        --receipt-modal-overlay-padding: calc(28 * var(--scene-unit));
        --receipt-status-pill-padding-x: calc(14 * var(--scene-unit));
        --receipt-status-row-padding-y: calc(16 * var(--scene-unit));
        --receipt-status-row-padding-x: calc(18 * var(--scene-unit));
        --receipt-detail-gap: calc(18 * var(--scene-unit));
        --receipt-detail-padding-y: calc(12 * var(--scene-unit));
        --receipt-dropzone-padding: calc(18 * var(--scene-unit));
        --receipt-dropzone-gap: calc(10 * var(--scene-unit));
        --receipt-compose-min-height: calc(74 * var(--scene-unit));
        --receipt-compose-padding-y: calc(14 * var(--scene-unit));
        --receipt-compose-padding-x: calc(16 * var(--scene-unit));
        --receipt-compose-gap: calc(10 * var(--scene-unit));
        --receipt-send-min-height: calc(56 * var(--scene-unit));
        --receipt-send-min-width: calc(86 * var(--scene-unit));
        --receipt-send-padding-x: calc(16 * var(--scene-unit));
        --receipt-drag-width: calc(176 * var(--scene-unit));
        --receipt-drag-padding: calc(16 * var(--scene-unit));
        --receipt-font-kicker: calc(11 * var(--scene-unit));
        --receipt-font-caption: calc(13 * var(--scene-unit));
        --receipt-font-meta: calc(15 * var(--scene-unit));
        --receipt-font-body: calc(20 * var(--scene-unit));
        --receipt-font-title: calc(19 * var(--scene-unit));
        --receipt-font-modal-title: calc(28 * var(--scene-unit));
        --receipt-font-value: calc(17 * var(--scene-unit));
    }

    #mounting07 .upload-sequence {
        min-height: calc(340 * var(--scene-unit));
    }

    #mounting07 .message-card {
        border-radius: calc(28 * var(--scene-unit));
        padding: calc(18 * var(--scene-unit)) calc(18 * var(--scene-unit)) calc(16 * var(--scene-unit));
    }

    #mounting07 .conversation-sequence {
        --slot-user-primary: calc(56 * var(--scene-unit));
        --slot-agent-primary: calc(168 * var(--scene-unit));
        --slot-user-confirm: calc(332 * var(--scene-unit));
        --slot-agent-final: calc(448 * var(--scene-unit));
        top: calc((100% - var(--receipt-conversation-height)) / 2 + 20 * var(--scene-unit));
    }

    #mounting07 .conversation-sequence.is-visible {
        top: calc((100% - var(--receipt-conversation-height)) / 2);
    }

    #mounting07 .reply-status {
        top: calc(28 * var(--scene-unit));
        gap: calc(8 * var(--scene-unit));
    }

    #mounting07 .reply-status::before {
        width: calc(7 * var(--scene-unit));
        height: calc(7 * var(--scene-unit));
    }

    #mounting07 .review-shell.is-exiting-down {
        transform: translateY(calc(88 * var(--scene-unit))) scale(0.98);
    }

    #mounting07 .student-modal {
        width: min(100%, calc(480 * var(--scene-unit)));
        transform: translateY(calc(18 * var(--scene-unit))) scale(0.98);
    }

    #mounting07 .student-modal-header {
        gap: calc(16 * var(--scene-unit));
    }

    #mounting07 .student-modal-kicker {
        margin-bottom: calc(8 * var(--scene-unit));
    }

    #mounting07 .student-modal-body {
        gap: calc(18 * var(--scene-unit));
        margin-top: calc(20 * var(--scene-unit));
    }

    #mounting07 .student-accept-btn {
        min-width: calc(110 * var(--scene-unit));
        min-height: calc(46 * var(--scene-unit));
        padding: 0 calc(18 * var(--scene-unit));
        border-radius: 3px;
    }

    #mounting07 .student-detail {
        grid-template-columns: minmax(0, calc(140 * var(--scene-unit))) minmax(0, 1fr);
    }

    #mounting07 .student-status-row {
        gap: calc(12 * var(--scene-unit));
        border-radius: calc(20 * var(--scene-unit));
    }

    #mounting07 .modal-action-cursor {
        transform: translate3d(calc(220 * var(--scene-unit)), calc(180 * var(--scene-unit)), 0) scale(0.84);
    }

    #mounting07 .receipt-stage {
        padding: calc(4 * var(--scene-unit)) 0;
        min-height: calc(148 * var(--scene-unit));
    }

    #mounting07 .receipt-dropzone,
    #mounting07 .drag-ghost,
    #mounting07 .compose-input {
        border-radius: calc(22 * var(--scene-unit));
    }

    #mounting07 .drag-ghost {
        gap: calc(10 * var(--scene-unit));
        transform: translate3d(calc(-160 * var(--scene-unit)), calc(-120 * var(--scene-unit)), 0) scale(0.9);
    }

    #mounting07 .receipt-file-badge {
        min-height: calc(28 * var(--scene-unit));
        padding: 0 calc(10 * var(--scene-unit));
    }

    #mounting07 .receipt-file-copy,
    #mounting07 .dropzone-file-copy {
        gap: calc(4 * var(--scene-unit));
    }

    #mounting07 .dropzone-copy {
        gap: calc(8 * var(--scene-unit));
    }

    #mounting07 .dropzone-file {
        gap: calc(12 * var(--scene-unit));
        transform: translateY(calc(10 * var(--scene-unit)));
    }

    #mounting07 .dropzone-file-icon {
        width: calc(22 * var(--scene-unit));
        height: calc(22 * var(--scene-unit));
    }

    #mounting07 .upload-cursor {
        margin-top: calc(-16 * var(--scene-unit));
        margin-left: calc(-16 * var(--scene-unit));
        width: calc(32 * var(--scene-unit));
        height: calc(32 * var(--scene-unit));
        transform: translate3d(calc(-220 * var(--scene-unit)), calc(-120 * var(--scene-unit)), 0) scale(0.84);
    }

    #mounting07 .upload-cursor.is-text::before {
        left: calc(15 * var(--scene-unit));
        top: calc(5 * var(--scene-unit));
        width: calc(1.6 * var(--scene-unit));
        height: calc(22 * var(--scene-unit));
        border-radius: calc(1 * var(--scene-unit));
    }

    #mounting07 .upload-cursor.is-text::after {
        left: calc(11 * var(--scene-unit));
        top: calc(5 * var(--scene-unit));
        width: calc(10 * var(--scene-unit));
        height: calc(22 * var(--scene-unit));
        background:
            linear-gradient(#f8fbff, #f8fbff) top center / calc(10 * var(--scene-unit)) calc(1.6 * var(--scene-unit)) no-repeat,
            linear-gradient(#f8fbff, #f8fbff) bottom center / calc(10 * var(--scene-unit)) calc(1.6 * var(--scene-unit)) no-repeat;
    }

    #mounting07 .compose-caret {
        width: calc(1.5 * var(--scene-unit));
        height: calc(18 * var(--scene-unit));
        vertical-align: calc(-3 * var(--scene-unit));
    }

    #mounting07 .compose-send {
        border-radius: 3px;
    }
}

@media (max-width: 630px) {
    #mounting07 {
        --receipt-scene-pad-y: 20px;
        --receipt-scene-pad-x: 18px;
        --receipt-panel-width: 100%;
        --receipt-conversation-max-width: calc(100% - 30px);
        --receipt-conversation-height: min(490px, calc(100% - 48px));
        --receipt-conversation-start-top: 48px;
        --receipt-conversation-gap: 22px;
        --receipt-font-kicker: 9px;
        --receipt-font-caption: 11px;
        --receipt-font-meta: clamp(11px, 3vw, 13px);
        --receipt-font-body: clamp(13px, 3.9vw, 15px);
        --receipt-font-title: clamp(15px, 4.2vw, 17px);
        --receipt-font-modal-title: clamp(18px, 5.4vw, 21px);
        --receipt-font-value: clamp(13px, 3.4vw, 15px);
        --receipt-shell-padding: 14px;
        --receipt-shell-gap: 10px;
        --receipt-modal-padding: 15px;
        --receipt-modal-overlay-padding: 14px;
        --receipt-dropzone-padding: 13px;
        --receipt-drag-width: min(176px, calc(100% - 28px));
        --receipt-status-row-padding-y: 11px;
        --receipt-status-row-padding-x: 13px;
        --receipt-detail-gap: 10px;
        --receipt-detail-padding-y: 8px;
        --receipt-compose-min-height: 54px;
        --receipt-send-min-height: 44px;
        --receipt-send-min-width: 0px;
        --receipt-send-padding-x: 14px;
    }

    #mounting07 .upload-sequence {
        min-height: clamp(340px, 50vh, 420px);
    }

    #mounting07 .conversation-sequence {
        width: min(var(--receipt-conversation-width), 100%);
        --slot-user-primary: 48px;
        --slot-agent-primary: 138px;
        --slot-user-confirm: 258px;
        --slot-agent-final: 336px;
    }

    #mounting07 .conversation-sequence .message-card,
    #mounting07 .conversation-sequence .prompt-line,
    #mounting07 .conversation-sequence .reply-lead,
    #mounting07 .conversation-sequence .reply-status,
    #mounting07 .conversation-sequence .reply-followup {
        text-align: left;
    }

    #mounting07 #receipt-reply-card,
    #mounting07 #receipt-reply-card-final {
        width: 85%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    #mounting07 #receipt-user-card,
    #mounting07 #receipt-user-card-confirm {
        width: fit-content;
        max-width: min(85%, 260px);
        left: auto;
        right: 0;
        margin: 0;
    }

    #mounting07 .receipt-stage {
        min-height: 170px;
    }

    #mounting07 .compose-row {
        flex-direction: column;
        align-items: stretch;
    }

    #mounting07 .compose-send {
        width: 100%;
    }

    #mounting07 .student-status-row {
        align-items: flex-start;
        flex-direction: column;
    }

    #mounting07 .student-details {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 16px;
        row-gap: 12px;
    }

    #mounting07 .student-detail {
        grid-template-columns: 1fr;
        padding: 4px 0;
        border-bottom: 0;
    }
}

@media (max-width: 630px) {
    #mounting01.scene-card,
    #mounting07.scene-card {
        padding: 24px 24px;
    }

    #mounting01 .conversation {
        gap: 8px;
        min-height: clamp(340px, 50vh, 420px);
        align-content: center;
    }

    #mounting01 .message-card,
    #mounting07 .message-card {
        border-radius: 24px;
        padding: 16px;
    }

    #mounting01 .prompt-line,
    #mounting01 .reply-lead,
    #mounting01 .update-text,
    #mounting01 .update-user-text,
    #mounting07 .prompt-line,
    #mounting07 .reply-lead,
    #mounting07 .reply-followup {
        font-size: clamp(13px, 0.8rem + 0.18vw, 15px);
        line-height: 1.34;
    }

    #mounting01 .metric-value,
    #mounting01 .chat-bubble-text {
        font-size: clamp(12px, 0.75rem + 0.16vw, 14px);
    }

    #mounting01 .message-card-agent {
        padding-top: 4px;
        min-height: 294px;
    }

    #mounting01 .reply-lead {
        min-height: 40px;
        margin-top: 6px;
    }

    #mounting01 .metrics {
        gap: 6px;
    }

    #mounting01 .metric-row {
        gap: 4px;
        padding: 10px 12px 8px;
    }

    #mounting01 .next-sequence,
    #mounting01 .third-sequence {
        inset: 28px 24px;
    }

    #mounting01 .chat-shell {
        width: 100%;
        padding: 18px;
        border-radius: 24px;
    }

    #mounting01 .chat-bubble {
        max-width: 88%;
    }

    #mounting01 .chat-thread {
        min-height: 0;
    }

    #mounting01 .update-shell {
        width: 100%;
        min-height: 210px;
        padding-top: 38px;
    }

    #mounting01 .update-bubble {
        min-height: 0;
    }

    #mounting01 .update-user-card {
        max-width: min(78%, 220px);
        min-height: 0;
        padding: 10px 16px;
    }

    #mounting01 #update-text {
        min-height: 46px;
    }

    #mounting01 #update-followup-text {
        min-height: 23px;
    }
}

@media (max-width: 420px) and (max-height: 700px) {
    #mounting01.scene-card {
        padding: 20px 16px;
    }

    #mounting01 .conversation {
        gap: 10px;
    }

    #mounting01 .message-card {
        padding: 12px;
        border-radius: 20px;
    }

    #mounting01 .message-card-user {
        max-width: min(84%, 220px);
    }

    #mounting01 .message-card-agent {
        min-height: 0;
    }

    #mounting01 .reply-lead {
        margin-top: 4px;
        min-height: 42px;
        font-size: 13px;
        line-height: 1.28;
    }

    #mounting01 .metrics {
        gap: 6px;
    }

    #mounting01 .metric-row {
        gap: 4px;
        padding: 10px 12px 9px;
        border-radius: 16px;
    }

    #mounting01 .metric-label {
        font-size: 9px;
        letter-spacing: 0.07em;
    }

    #mounting01 .metric-value {
        font-size: 12px;
        line-height: 1.12;
    }

    #mounting01 .metric-inline-row {
        gap: 8px;
    }

    #mounting01 .metric-action {
        min-height: 28px;
        padding: 0 10px;
        font-size: 12px;
        clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    }
}

/* Global Mobile Typography Overrides */
@media (max-width: 768px) {
    html {
        scroll-snap-type: y mandatory;
        scroll-padding-top: 0;
    }

    :root {
        --nav-height: 64px;
        --mobile-section-height: 100vh;
        --mobile-section-height: 100dvh;
    }

    body {
        padding-top: 0;
    }

    .hero,
    .content-section,
    .master-section,
    .cap-preview-section,
    .ai-section,
    .automation-section {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        scroll-margin-top: 0;
    }

    .hero {
        margin-top: 0;
    }

    .automation-track-container {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
        scroll-margin-top: 0;
    }

    .hero,
    .master-section,
    .cap-preview-section,
    .automation-section {
        min-height: var(--mobile-section-height);
        height: var(--mobile-section-height);
    }

    .automation-section {
        padding-block: 0;
        justify-content: flex-start;
        gap: 0;
    }

    #automation.automation-section,
    #automation-receipts.automation-section {
        padding-top: 0;
        padding-bottom: 0;
    }

    #automation .automation-text,
    #automation-receipts .automation-text {
        flex: none;
    }

    #automation .video-card,
    #automation-receipts .video-card {
        top: 0;
    }

    #automation-receipts.automation-section {
        padding-bottom: 3rem;
    }

    #automation .automation-text .glow-text,
    #automation-receipts .automation-text .glow-text {
        color: #ffffff;
        background: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        -webkit-text-fill-color: #ffffff;
        opacity: 1;
        filter: none;
        font-size: clamp(1.65rem, 6vw, 2.1rem);
        line-height: 1.08;
    }

    #automation .automation-text .glow-text {
        width: auto;
        white-space: normal;
    }

    #automation .automation-text .section-description,
    #automation-receipts .automation-text .section-description {
        color: #ffffff;
        opacity: 1;
        transform: none;
        will-change: opacity;
    }

    #automation .automation-text .section-description,
    #automation-receipts .automation-text .section-description {
        max-width: 19.5rem;
        margin-inline: auto;
        font-size: 0.98rem;
        line-height: 1.48;
    }

    .chat-presence,
    .chat-time,
    .chat-bubble-supplier .chat-time {
        color: #ffffff;
        opacity: 1;
    }

    #mounting01 .message-card-agent,
    #mounting01 .reply-lead,
    #mounting01 .chat-bubble,
    #mounting01 .chat-bubble-text,
    #mounting01 .update-bubble,
    #mounting01 .update-text,
    #mounting07 .conversation-sequence .message-card,
    #mounting07 .conversation-sequence .prompt-line,
    #mounting07 .conversation-sequence .reply-lead,
    #mounting07 .conversation-sequence .reply-status,
    #mounting07 .conversation-sequence .reply-followup {
        text-align: left;
    }

    .hero {
        overflow-x: hidden;
    }

    .hero-content {
        min-height: 100%;
        padding-top: 0;
        padding-bottom: 1.5rem;
    }

    .hero-title {
        font-size: clamp(1.65rem, 8.0vw, 2.7rem);
        width: fit-content;
        min-height: auto;
    }

    .hero-title-anchor-line {
        white-space: nowrap;
    }

    .cap-preview-section {
        overflow: hidden;
    }

    .cap-preview-copy {
        padding: 0 6%;
        min-height: 0;
        z-index: 2;
        align-items: center;
        text-align: center;
    }

    .cap-preview-typewriter {
        align-items: center;
        text-align: center;
    }

    .cap-preview-copy h2 {
        font-size: clamp(1.85rem, 4.4vw, 2.18rem);
        line-height: 1.08;
        letter-spacing: 0;
        min-height: calc(1.08em * 2);
        white-space: normal;
        text-wrap: balance;
    }

    .cap-preview-copy > p {
        font-size: 1.05rem;
        max-width: 20.5rem;
        color: #424242;
        opacity: 0;
        transform: none;
        will-change: opacity;
        text-align: center;
    }

    .cap-preview-section.is-copy-visible.is-heading-typed .cap-preview-copy > p {
        animation-name: cap-preview-fade-in;
    }

    .cap-preview-visual {
        grid-column: 1;
        grid-row: 2;
        min-height: 0;
        padding: 0;
    }

    .cap-preview-visual-card {
        width: min(100%, 430px);
        height: auto;
        max-height: none;
        padding: 0;
        border-radius: 0;
        aspect-ratio: 1 / 1;
    }

    .cap-preview-frame-shell {
        transform: none;
        opacity: 1;
    }

    .cap-preview-section.is-copy-visible .cap-preview-frame-shell {
        transform: none;
    }

    .glow-text {
        font-size: 2.2rem;
    }

    .section-subtitle {
        font-size: 0.95rem;
    }

    .ai-node-desc {
        max-width: 82%;
        min-height: 2.8em;
    }

    .ai-node-desc-wrap {
        margin-top: 2.6rem;
    }

    .ai-node-desc-triangle {
        left: calc(100% + 10px);
        width: 68px;
    }

    .ai-node-desc-square {
        width: 60px;
    }

    .ai-node-desc-najima-glyph {
        width: 88px;
    }

    .ai-section {
        min-height: 850px;
    }
}

@media (max-width: 560px) {
    .cap-preview-copy h2 {
        font-size: clamp(1.62rem, 5vw, 1.82rem);
    }
}

@media (max-width: 420px) {
    .cap-preview-copy h2 {
        font-size: 1.58rem;
    }
}

/* One centered stage; only the text changes position on the first scroll. */
.cap-preview-section > .cap-preview-copy {
    position: relative;
    width: 100%;
    max-width: 1758px;
    height: 100%;
    margin-inline: auto;
    padding-block: 0;
    transition: filter 1.2s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.cap-preview-section > .cap-preview-copy h2,
.cap-preview-section > .cap-preview-copy > p {
    margin-left: 0;
    /* Layout changes once; script.js animates the rendered lines with transforms. */
    transition: none;
    font-optical-sizing: none;
}

.cap-preview-lead-line {
    display: block;
    width: fit-content;
    max-width: 100%;
}

.cap-preview-section.is-intro-expanded .cap-preview-lead-line {
    margin-inline: auto;
}

.cap-preview-type-line,
.cap-preview-lead-line {
    transform-origin: top left;
    /* Keep text on the same compositing layer when the animation finishes. */
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.cap-preview-section.is-intro-expanded > .cap-preview-copy h2,
.cap-preview-section.is-intro-expanded > .cap-preview-copy > p {
    width: min(90vw, 1100px);
    margin-left: max(0px, calc((100% - min(90vw, 1100px)) / 2));
    text-align: center;
}

.cap-preview-section.is-intro-expanded > .cap-preview-copy h2 {
    font-size: clamp(3rem, 5.5vw, 6.6rem);
}

.cap-preview-section.is-intro-expanded .cap-preview-typewriter {
    width: 100%;
    align-items: center;
    text-align: center;
}

.cap-preview-section.is-intro-expanded > .cap-preview-copy > p {
    max-width: 1100px;
    font-size: clamp(1.35rem, 2vw, 2rem);
}

@media (max-width: 768px) {
    .cap-preview-section > .cap-preview-copy {
        padding: 0 5vw;
    }

    .cap-preview-section > .cap-preview-copy h2,
    .cap-preview-section > .cap-preview-copy > p {
        position: relative;
        top: calc(-25vh + 1.5rem);
        top: calc(-25dvh + 1.5rem);
        transition: none;
    }

    .cap-preview-lead-line {
        margin-inline: auto;
    }

    .cap-preview-section.is-intro-expanded > .cap-preview-copy h2,
    .cap-preview-section.is-intro-expanded > .cap-preview-copy > p {
        top: 0;
        margin-left: 0;
    }

    .cap-preview-section.is-intro-expanded > .cap-preview-copy h2 {
        width: 90vw;
        font-size: clamp(1.9rem, 7vw, 3rem);
    }

    .cap-preview-section.is-intro-expanded > .cap-preview-copy > p {
        max-width: 90vw;
        font-size: clamp(1.1rem, 4vw, 1.45rem);
    }

    #capabilities-preview > .cap-preview-copy > h2 {
        margin-bottom: 1rem;
    }

    #capabilities-preview > .cap-preview-copy > .cap-preview-lead {
        width: 100%;
        max-width: 100%;
        font-size: clamp(0.95rem, 3.7vw, 1.1rem);
        line-height: 1.5;
        text-align: center;
    }

    #capabilities-preview .cap-preview-service {
        display: block;
    }

    #capabilities-preview .cap-preview-service-separator {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cap-preview-section > .cap-preview-copy,
    .cap-preview-section > .cap-preview-copy h2,
    .cap-preview-section > .cap-preview-copy > p {
        transition-duration: 0ms;
    }
}