/* Bespoke composition for the on-site AI program, in the visual language of
   the program's presentation deck: a dark cover with the blue button as an
   object, sunlit paper sections, glass panels, tilted illustration cards and
   large light-weight figures. Controls, icons, colors and type come from the
   shared design system; every tint is derived from a token with color-mix. */
.ai-training {
    --at-glass-lift: 0 2px 0 color-mix(in srgb, var(--color-surface) 40%, transparent), 0 5px 0 color-mix(in srgb, var(--color-palette-primary) 12%, transparent), 0 10px 14px color-mix(in srgb, var(--color-text-dark) 6%, transparent), 0 32px 56px -8px color-mix(in srgb, var(--color-text-dark) 16%, transparent);
    --at-card-lift: 0 32px 56px -28px color-mix(in srgb, var(--color-palette-primary) 40%, transparent), 0 3px 8px color-mix(in srgb, var(--color-text-dark) 8%, transparent);
    --at-hairline: linear-gradient(90deg, color-mix(in srgb, var(--color-muted) 50%, transparent) 0%, transparent 100%);
    --at-type-figure: calc(var(--type-size-hero) * 1.5);
    background: var(--color-surface);
    color: var(--color-text-dark);
    text-transform: none;
}

/* Owner request, 2026-09-26: this enterprise program uses authored sentence
   casing, including shared controls. Other Eesier pages keep their casing. */
.ai-training .btn,
.ai-training .eesier-accordion > .eesier-accordion-item > .eesier-accordion-summary {
    text-transform: none;
}

.ai-training .content-inner { max-width: 1280px; padding-inline: var(--space-medium); }

.ai-training main { overflow: clip; }

.ai-training main section { position: relative; padding-block: calc(var(--space-large) * 2); scroll-margin-top: var(--space-large); }

.ai-training main :is(h1, h2, h3, p, ol, ul, dl, figure) { margin: 0; }

.ai-training main p { font-size: var(--type-size-base); line-height: 1.7; }

.ai-training main :is(h1, h2, h3) { hyphens: manual; text-wrap: balance; }

.ai-training main h1 { font-size: var(--type-size-hero); font-weight: 600; line-height: 1.06; letter-spacing: -0.045em; }

.ai-training main h2 { font-size: var(--type-size-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.035em; }

.ai-training main h3 { font-size: var(--type-size-heading); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }

.ai-training main a { overflow-wrap: anywhere; }

.ai-training main a:focus-visible,
.ai-training main summary:focus-visible {
    outline: 3px solid var(--color-palette-primary);
    outline-offset: var(--space-tight);
}

.ai-training main .btn { flex-shrink: 0; gap: var(--space-small); }

.ai-training main .eicon { width: var(--icon-size); height: var(--icon-size); }


/* HEADER — SITS ON TOP OF THE DARK COVER */

.ai-training .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}

.ai-training .header .header-nav-link { color: var(--color-text-on-dark); opacity: 0.75; }

.ai-training .header .header-nav-link:hover,
.ai-training .header .header-nav-link--active { color: var(--color-text-on-dark); opacity: 1; }

.ai-training .header .logo { filter: brightness(0) invert(1); }

.ai-training .header .mobile-menu-btn { color: var(--color-text-on-dark); }

.ai-training .header:has(.mobile-nav--open) .logo { filter: none; }

.ai-training .header:has(.mobile-nav--open) .mobile-menu-btn { color: var(--color-text-dark); }


/* SHARED PAGE PRIMITIVES */

.ai-training .at-stack { display: flex; flex-direction: column; gap: calc(var(--space-large) * 1.5); }

.ai-training .at-split { display: flex; align-items: flex-start; gap: var(--space-large); }

.ai-training .at-split > * { flex: 1 1 0; min-width: 0; }

.ai-training .at-section-heading { display: flex; flex-direction: column; gap: var(--space-medium); max-width: 720px; }

.ai-training .at-section-heading p { color: var(--color-muted); }

.ai-training main .at-overline { color: var(--color-palette-primary); font-size: var(--type-size-small); font-weight: 700; letter-spacing: 0.02em; text-align: left; }

.ai-training main .at-overline--on-dark { color: var(--color-palette-secondary); }

.ai-training .at-rule { display: block; width: calc(var(--space-large) * 1.5); height: 4px; border-radius: var(--radius-pill); background: var(--color-palette-primary); }

.ai-training .at-pill {
    display: inline-flex;
    align-items: center;
    height: var(--control-height);
    padding-inline: var(--space-medium);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-surface);
    background: var(--color-palette-primary-surface);
    color: var(--color-palette-primary);
    font-size: var(--type-size-base);
    font-weight: 700;
    white-space: nowrap;
}

/* GLASS — THE DECK'S FROSTED PANEL: A LIGHT GRADIENT, A WHITE HAIRLINE AND A LAYERED LIFT */
.ai-training .at-glass {
    background: linear-gradient(140deg, color-mix(in srgb, var(--color-surface) 72%, transparent) 0%, color-mix(in srgb, var(--color-surface) 35%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--color-surface) 80%, transparent);
    border-radius: var(--radius-standard);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: inset 0 2px 0 var(--color-surface), inset 2px 0 0 color-mix(in srgb, var(--color-surface) 63%, transparent), inset -1px -2px 1px color-mix(in srgb, var(--color-palette-primary) 20%, transparent), var(--at-glass-lift);
}

.ai-training .at-glass--on-dark {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-palette-secondary) 20%, transparent) 0%, color-mix(in srgb, var(--color-canvas-dark) 60%, transparent) 100%);
    border-color: color-mix(in srgb, var(--color-palette-secondary) 27%, transparent);
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--color-text-on-dark) 50%, transparent), inset 2px 0 0 color-mix(in srgb, var(--color-text-on-dark) 20%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--color-canvas-dark) 60%, transparent), 0 2px 3px color-mix(in srgb, var(--color-canvas-dark) 40%, transparent), 0 40px 64px -4px color-mix(in srgb, var(--color-canvas-dark) 40%, transparent);
}

/* BADGE — THE DECK'S PRESSED NUMBER TILE: A WHITE FACE WITH A STACKED BLUE BASE */
.ai-training .at-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--space-large) * 2);
    height: calc(var(--space-large) * 2);
    border-radius: var(--radius-standard);
    border: 2px solid color-mix(in srgb, var(--color-palette-primary) 30%, var(--color-surface));
    background: linear-gradient(175deg, var(--color-surface) 0%, var(--color-palette-primary-surface) 100%);
    box-shadow: inset 0 3px 0 var(--color-surface), inset 0 -3px 2px color-mix(in srgb, var(--color-text-dark) 11%, transparent), 0 5px 0 color-mix(in srgb, var(--color-palette-secondary) 45%, var(--color-surface)), 0 13px 0 color-mix(in srgb, var(--color-palette-primary) 70%, var(--color-text-dark)), 0 15px 3px color-mix(in srgb, var(--color-text-dark) 25%, transparent), 0 24px 28px color-mix(in srgb, var(--color-palette-primary) 22%, transparent), 0 48px 64px -12px color-mix(in srgb, var(--color-palette-primary) 30%, transparent);
    color: color-mix(in srgb, var(--color-palette-primary) 70%, var(--color-text-dark));
    font-size: var(--type-size-display);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}

.ai-training .at-badge::after {
    content: "";
    position: absolute;
    inset: var(--space-tight);
    border: 2px solid var(--color-surface);
    border-radius: calc(var(--radius-standard) - var(--space-tight));
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--color-palette-primary) 18%, var(--color-surface)), 0 1px 0 color-mix(in srgb, var(--color-palette-primary) 18%, var(--color-surface));
    pointer-events: none;
}

.ai-training .at-badge--on-dark {
    border-color: color-mix(in srgb, var(--color-palette-secondary) 40%, transparent);
    background: linear-gradient(175deg, color-mix(in srgb, var(--color-palette-secondary) 25%, var(--color-surface-dark)) 0%, var(--color-surface-dark) 100%);
    box-shadow: inset 0 3px 0 color-mix(in srgb, var(--color-text-on-dark) 20%, transparent), inset 0 -3px 2px color-mix(in srgb, var(--color-canvas-dark) 60%, transparent), 0 5px 0 color-mix(in srgb, var(--color-palette-primary) 60%, var(--color-canvas-dark)), 0 13px 0 var(--color-palette-primary), 0 15px 3px color-mix(in srgb, var(--color-canvas-dark) 50%, transparent), 0 24px 28px color-mix(in srgb, var(--color-canvas-dark) 40%, transparent);
    color: var(--color-text-on-dark);
}

.ai-training .at-badge--on-dark::after {
    border-color: color-mix(in srgb, var(--color-text-on-dark) 14%, transparent);
    box-shadow: none;
}

/* NUMBERS — THE DECK'S LARGE LIGHT FIGURES */
.ai-training .at-number {
    display: block;
    color: var(--color-palette-primary);
    font-size: var(--at-type-figure);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.ai-training .at-number > span { font-size: var(--type-size-display); font-weight: 500; letter-spacing: 0; }


/* HERO — THE COVER: NAVY, A BLUE GLOW, THE BUTTON AS AN OBJECT AND A GLASS CARD */

.ai-training .at-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-large);
    min-height: 100vh;
    min-height: 100svh;
    padding-block: calc(var(--space-large) * 2.5) calc(var(--space-large) * 1.5);
    background: var(--color-canvas-dark);
    color: var(--color-text-on-dark);
    overflow: hidden;
}

.ai-training .at-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--color-palette-primary) 65%, transparent) 0%, color-mix(in srgb, var(--color-palette-primary) 20%, transparent) 24%, transparent 46%);
    pointer-events: none;
}

.ai-training .at-hero .at-hero__layout { display: flex; align-items: center; gap: 0; width: 100%; }

.ai-training .at-hero .at-hero__object { flex: 0 0 40%; min-width: 0; }

.ai-training .at-hero .at-hero__object img {
    display: block;
    width: 118%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
    transform: rotate(-14deg);
    filter: drop-shadow(0 48px 64px color-mix(in srgb, var(--color-canvas-dark) 70%, transparent));
}

/* Layout bleed: the glass card overlaps the object, like the deck's cover. */
.ai-training .at-hero .at-hero__card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-medium);
    margin-left: calc(-1 * var(--space-large) * 2);
    padding: calc(var(--space-large) * 1.5);
    border-radius: var(--radius-standard);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-palette-secondary) 22%, transparent) 0%, color-mix(in srgb, var(--color-canvas-dark) 62%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--color-palette-secondary) 27%, transparent);
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--color-text-on-dark) 50%, transparent), inset 2px 0 0 color-mix(in srgb, var(--color-text-on-dark) 20%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--color-canvas-dark) 60%, transparent), 0 2px 3px color-mix(in srgb, var(--color-canvas-dark) 40%, transparent), 0 40px 64px -4px color-mix(in srgb, var(--color-canvas-dark) 40%, transparent);
}

.ai-training .at-hero h1 { font-size: calc(var(--type-size-display) * 1.5); color: color-mix(in srgb, var(--color-text-on-dark) 96%, var(--color-palette-secondary)); }

.ai-training .at-hero h1 span { color: var(--color-palette-secondary); }

.ai-training .at-hero .at-lead { max-width: 52ch; color: var(--color-muted-on-dark); text-align: left; hyphens: manual; }

.ai-training .at-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-small); }

.ai-training main .at-hero__note { font-size: var(--type-size-small); color: var(--color-muted-on-dark); text-align: left; }

.ai-training .at-hero .at-hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-small); list-style: none; }

.ai-training .at-hero .at-hero__facts li {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    min-height: var(--control-height);
    padding: var(--space-small) var(--space-medium);
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--color-text-on-dark) 14%, transparent);
    background: color-mix(in srgb, var(--color-text-on-dark) 7%, transparent);
    color: var(--color-muted-on-dark);
    font-size: var(--type-size-small);
    font-weight: 600;
}

.ai-training .at-hero .at-hero__facts li strong { color: var(--color-palette-secondary); font-size: var(--type-size-heading); font-weight: 500; letter-spacing: -0.02em; }


/* STATEMENT — THE SUNLIT ROOM, THE THESIS AND THE TWO-COLUMN GLASS CARD */

.ai-training .at-statement {
    background: var(--color-palette-background) url("../img/ai-training/room.webp") center / cover no-repeat;
}

.ai-training .at-statement .at-statement__heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-medium); max-width: 1000px; }

.ai-training main .at-statement__kicker { color: var(--color-muted); font-size: var(--type-size-display); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; text-align: left; hyphens: manual; }

.ai-training main .at-statement__kicker span { color: var(--color-palette-primary); }

.ai-training main .at-statement h2 { font-size: var(--type-size-hero); line-height: 1.02; letter-spacing: -0.045em; }

.ai-training .at-statement h2 span { color: var(--color-palette-primary); }

.ai-training .at-statement .at-statement__rule { display: flex; align-items: center; gap: var(--space-medium); }

.ai-training main .at-statement__thesis { max-width: 26em; font-size: var(--type-size-page); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--color-muted); text-align: left; hyphens: manual; }

.ai-training main .at-statement__thesis strong { color: var(--color-text-dark); font-weight: 700; }

.ai-training .at-statement .at-statement__card { display: flex; align-items: stretch; gap: var(--space-large); max-width: 1120px; padding: var(--space-large); }

.ai-training .at-statement .at-statement__card::before {
    content: "";
    position: absolute;
    left: var(--space-large);
    top: 0;
    width: calc(var(--space-large) + var(--space-small));
    height: 4px;
    border-radius: 0 0 var(--radius-pill) var(--radius-pill);
    background: var(--color-palette-primary);
}

.ai-training .at-statement .at-statement__card p { flex: 1 1 0; color: var(--color-muted); }

.ai-training .at-statement .at-statement__card p:first-of-type { flex: 1.3 1 0; }

.ai-training .at-statement .at-statement__card p strong { color: var(--color-text-dark); }

.ai-training .at-statement .at-statement__divider { flex: 0 0 2px; align-self: stretch; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-muted) 40%, transparent) 22%, color-mix(in srgb, var(--color-muted) 40%, transparent) 78%, transparent 100%); }


/* MODULES — TWO PRESSED TILES AND THE IN-LOCO STATEMENT */

.ai-training .at-modules { background: var(--color-surface); }

.ai-training .at-module-pair { display: flex; gap: var(--space-medium); }

.ai-training .at-module {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-medium);
    padding: var(--space-large);
    border-radius: var(--radius-standard);
    border: 1px solid color-mix(in srgb, var(--color-palette-primary) 12%, transparent);
    background: linear-gradient(160deg, var(--color-palette-primary-surface) 0%, var(--color-surface) 100%);
    color: var(--color-text-dark);
    text-decoration: none;
    box-shadow: var(--at-glass-lift);
    transition: transform var(--motion-standard) var(--ease-travel), box-shadow var(--motion-standard) var(--ease-travel), border-color var(--motion-quick) var(--ease-state);
}

.ai-training .at-module:hover { border-color: color-mix(in srgb, var(--color-palette-primary) 45%, transparent); transform: translateY(calc(-1 * var(--space-tight))); }

.ai-training .at-module .at-badge { margin-bottom: var(--space-small); }

.ai-training .at-module--infrastructure {
    border-color: color-mix(in srgb, var(--color-palette-secondary) 20%, transparent);
    background: linear-gradient(160deg, var(--color-surface-dark) 0%, var(--color-canvas-dark) 100%);
    color: var(--color-text-on-dark);
}

.ai-training .at-module--infrastructure::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-palette-primary) 45%, transparent) 0%, transparent 55%);
    pointer-events: none;
}

.ai-training .at-module p { flex-grow: 1; color: var(--color-muted); }

.ai-training .at-module--infrastructure p { color: var(--color-muted-on-dark); }

.ai-training .at-module .at-module__label { color: var(--color-palette-primary); font-size: var(--type-size-small); font-weight: 700; }

.ai-training .at-module--infrastructure .at-module__label { color: var(--color-palette-secondary); }

.ai-training .at-module .at-module__link { display: flex; align-items: center; gap: var(--space-small); font-weight: 700; text-decoration: underline; text-underline-offset: var(--space-tight); }

.ai-training .at-inloco { display: flex; align-items: center; gap: var(--space-large); padding: var(--space-large); border-radius: var(--radius-standard); background: var(--color-palette-background); }

.ai-training main .at-inloco__number { flex: 0 0 auto; color: var(--color-palette-primary); font-size: var(--at-type-figure); font-weight: 300; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; text-align: left; }

.ai-training main .at-inloco__number span { font-size: var(--type-size-display); font-weight: 500; letter-spacing: 0; }

.ai-training .at-inloco .at-inloco__copy { display: flex; flex-direction: column; gap: var(--space-small); min-width: 0; }

.ai-training .at-inloco .at-inloco__copy p { color: var(--color-muted); }


/* STEPS — TILTED ILLUSTRATION CARDS WITH A COUNTER, SHARED BY BOTH MODULES */

.ai-training .at-training { background: var(--color-palette-background); }

.ai-training .at-training .at-split > .at-section-heading { flex: 0.8 1 0; }

.ai-training .at-steps { flex: 1.4 1 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-large) var(--space-medium); list-style: none; }

.ai-training .at-step { display: flex; flex-direction: column; gap: var(--space-medium); }

.ai-training .at-step .at-step__art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--space-large) * 4);
    height: calc(var(--space-large) * 4);
    border-radius: var(--radius-standard);
    border: 1px solid var(--color-surface);
    background: var(--color-surface);
    box-shadow: var(--at-card-lift);
    transform: rotate(-3deg);
}

.ai-training .at-step:nth-child(2) .at-step__art { transform: rotate(2deg); }

.ai-training .at-step:nth-child(3) .at-step__art { transform: rotate(-1.5deg); }

.ai-training .at-step:nth-child(4) .at-step__art { transform: rotate(3deg); }

.ai-training .at-step:nth-child(5) .at-step__art { transform: rotate(-2.5deg); }

.ai-training .at-step:nth-child(6) .at-step__art { transform: rotate(1.5deg); }

.ai-training .at-step .at-step__art img { display: block; width: 84%; height: 84%; object-fit: contain; }

.ai-training .at-step .at-step__body { display: flex; flex-direction: column; gap: var(--space-small); }

.ai-training main .at-step__counter { display: flex; gap: var(--space-tight); font-size: var(--type-size-base); font-weight: 700; color: var(--color-palette-primary); text-align: left; }

.ai-training main .at-step__counter span:last-child { color: var(--color-disabled); font-weight: 500; }

.ai-training main .at-step h3 { font-size: var(--type-size-heading); }

.ai-training .at-step .at-step__body > p:last-child { color: var(--color-muted); }

.ai-training .at-certificate { display: flex; align-items: center; gap: var(--space-large); }

.ai-training .at-certificate .at-certificate__copy { flex: 0.8 1 0; }

.ai-training main .at-certificate h3 { font-size: var(--type-size-display); line-height: 1.1; letter-spacing: -0.035em; }

.ai-training .at-certificate .at-certificate__stack { flex: 1.2 1 0; min-width: 0; aspect-ratio: 3 / 2; }

.ai-training .at-certificate .at-certificate__stack::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-standard);
    border: 1px solid var(--color-surface);
    background: color-mix(in srgb, var(--color-surface) 60%, transparent);
    box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--color-palette-primary) 25%, transparent);
    transform: rotate(2.5deg);
}

.ai-training .at-certificate .at-certificate__stack img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-standard);
    border: 1px solid var(--color-surface);
    box-shadow: 0 48px 80px -32px color-mix(in srgb, var(--color-palette-primary) 40%, transparent), 0 4px 12px color-mix(in srgb, var(--color-text-dark) 8%, transparent);
    transform: rotate(-1.5deg);
}

.ai-training .at-certificate .at-certificate__tape {
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--space-small));
    width: calc(var(--space-large) * 3);
    height: calc(var(--space-medium) + var(--space-small));
    background: color-mix(in srgb, var(--color-palette-primary) 35%, transparent);
    transform: translateX(-50%) rotate(-5deg);
}


/* INFRASTRUCTURE — THE GLASS DIAGRAM AND FOUR STEPS IN A ROW */

.ai-training .at-infrastructure { background: var(--color-surface) url("../img/ai-training/room.webp") center / cover no-repeat; }

.ai-training .at-diagram { display: flex; flex-direction: column; align-items: center; gap: var(--space-small); padding: var(--space-large); }

.ai-training .at-diagram .at-diagram__node {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    min-height: var(--control-height);
    padding: var(--space-small) var(--space-medium);
    border-radius: var(--radius-standard);
    border: 1px solid var(--color-surface);
    background: var(--color-surface);
    box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--color-palette-primary) 40%, transparent);
    font-weight: 600;
}

.ai-training .at-diagram .at-diagram__node .eicon { color: var(--color-palette-primary); }

.ai-training .at-diagram .at-diagram__node--people { border-color: transparent; background: transparent; box-shadow: none; }

.ai-training .at-diagram .at-diagram__node--control {
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-tight);
    padding: var(--space-medium);
    border-color: color-mix(in srgb, var(--color-palette-secondary) 25%, transparent);
    background: linear-gradient(160deg, var(--color-surface-dark) 0%, var(--color-canvas-dark) 100%);
    color: var(--color-text-on-dark);
    text-align: center;
    box-shadow: 0 24px 40px -20px color-mix(in srgb, var(--color-canvas-dark) 60%, transparent);
}

.ai-training .at-diagram .at-diagram__node--control strong { display: flex; align-items: center; gap: var(--space-small); font-size: var(--type-size-base); }

.ai-training .at-diagram .at-diagram__node--control strong .eicon { color: var(--color-palette-secondary); }

.ai-training .at-diagram .at-diagram__node--control span { font-size: var(--type-size-small); color: var(--color-muted-on-dark); }

.ai-training .at-diagram .at-diagram__connector { display: block; width: 2px; height: var(--space-medium); border-radius: var(--radius-pill); background: linear-gradient(180deg, var(--color-palette-secondary) 0%, var(--color-palette-primary) 100%); }

.ai-training .at-diagram .at-diagram__sources { display: flex; align-self: stretch; justify-content: center; gap: var(--space-large); flex-wrap: wrap; padding-top: var(--space-small); }

.ai-training .at-diagram .at-diagram__sources span { display: flex; flex-direction: column; align-items: center; gap: var(--space-small); font-weight: 600; }

.ai-training .at-diagram .at-diagram__sources .eicon { color: var(--color-palette-primary); }

.ai-training .at-diagram figcaption { padding-top: var(--space-medium); font-size: var(--type-size-small); color: var(--color-muted); text-align: center; }

.ai-training .at-infra-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-medium); list-style: none; }

.ai-training .at-infra-steps .at-step { padding: var(--space-medium); border-radius: var(--radius-standard); background: color-mix(in srgb, var(--color-surface) 70%, transparent); border: 1px solid color-mix(in srgb, var(--color-surface) 90%, transparent); }

.ai-training .at-infra-steps .at-step .at-step__art { width: calc(var(--space-large) * 3); height: calc(var(--space-large) * 3); }


/* EXAMPLES — A GRID OF SHEETS, THE FIRST CARRYING A FIGURE */

.ai-training .at-examples { background: var(--color-surface); }

.ai-training .at-examples__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-medium); }

.ai-training .at-examples__list .at-example:first-child { grid-column: span 2; background: linear-gradient(160deg, var(--color-palette-primary-surface) 0%, var(--color-surface) 100%); }

.ai-training .at-example {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    padding: var(--space-medium);
    border-radius: var(--radius-standard);
    border: 1px solid var(--color-veil);
    background: linear-gradient(160deg, var(--color-surface) 0%, var(--color-palette-background) 100%);
    box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--color-text-dark) 20%, transparent);
}

.ai-training .at-example .at-example__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    height: var(--control-height);
    margin-bottom: var(--space-small);
    border-radius: var(--radius-standard);
    background: var(--color-palette-primary-surface);
    color: var(--color-palette-primary);
}

.ai-training main .at-example h3 { font-size: var(--type-size-base); font-weight: 700; }

.ai-training .at-example > p { color: var(--color-muted); }

.ai-training main .at-example__stat { display: flex; flex-direction: column; gap: var(--space-tight); padding-top: var(--space-small); text-align: left; }

.ai-training main .at-example__stat::before { content: ""; display: block; width: 100%; height: 2px; margin-bottom: var(--space-small); background: var(--at-hairline); }

.ai-training main .at-example__stat strong { color: var(--color-palette-primary); font-size: var(--type-size-display); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }

.ai-training main .at-example__stat span { font-size: var(--type-size-small); color: var(--color-muted); }


/* INCLUDED — THREE LARGE FIGURES OVER FADING HAIRLINES */

.ai-training .at-included { background: var(--color-palette-primary-surface); }

.ai-training .at-included__items { display: flex; gap: var(--space-large); }

.ai-training .at-included__items > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-small); padding-top: var(--space-medium); }

.ai-training .at-included__items > div::before { content: ""; display: block; width: 100%; height: 2px; margin-bottom: var(--space-small); background: var(--at-hairline); }

.ai-training main .at-included__items h3 { font-size: var(--type-size-heading); }

.ai-training .at-included__items p { color: var(--color-muted); }


/* ABOUT — THE PORTRAIT ON A PRESSED CANVAS AND THE STORY WITH ITS SEGMENTS */

.ai-training .at-about { background: var(--color-surface); }

.ai-training .at-about .at-about__layout { display: flex; align-items: flex-start; gap: calc(var(--space-large) * 1.5); }

.ai-training .at-portrait { flex: 0 0 38%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-medium); position: sticky; top: var(--space-large); }

.ai-training .at-portrait .at-portrait__canvas {
    overflow: hidden;
    border-radius: var(--radius-standard);
    border: 2px solid color-mix(in srgb, var(--color-palette-primary) 30%, var(--color-surface));
    background: linear-gradient(175deg, var(--color-surface) 0%, var(--color-palette-primary-surface) 100%);
    box-shadow: inset 0 3px 0 var(--color-surface), 0 5px 0 color-mix(in srgb, var(--color-palette-secondary) 45%, var(--color-surface)), 0 13px 0 color-mix(in srgb, var(--color-palette-primary) 70%, var(--color-text-dark)), 0 15px 3px color-mix(in srgb, var(--color-text-dark) 25%, transparent), 0 24px 28px color-mix(in srgb, var(--color-palette-primary) 22%, transparent), 0 48px 64px -12px color-mix(in srgb, var(--color-palette-primary) 30%, transparent);
}

.ai-training .at-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }

.ai-training .at-portrait figcaption { display: flex; flex-direction: column; gap: var(--space-small); padding-top: var(--space-small); }

.ai-training .at-portrait figcaption span:first-child { font-size: var(--type-size-heading); font-weight: 600; letter-spacing: -0.02em; }

.ai-training .at-portrait figcaption span:last-child { color: var(--color-muted); font-size: var(--type-size-small); }

.ai-training .at-about .at-about__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-large); }

.ai-training .at-history { display: flex; flex-direction: column; gap: var(--space-large); list-style: none; align-self: stretch; }

.ai-training .at-history li { display: flex; flex-direction: column; gap: var(--space-small); }

.ai-training .at-history .at-history__progress { display: flex; gap: var(--space-tight); width: calc(var(--space-large) * 3); margin-bottom: var(--space-tight); }

.ai-training .at-history .at-history__progress i { flex: 1 1 0; height: 4px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-palette-accent) 22%, var(--color-surface)); }

.ai-training .at-history .at-history__progress i.is-on { background: var(--color-palette-accent); }

.ai-training .at-history .at-history__year { color: var(--color-palette-primary); font-size: var(--type-size-small); font-weight: 700; }

.ai-training main .at-history h3 { font-size: var(--type-size-heading); }

.ai-training .at-history p { color: var(--color-muted); }

.ai-training .at-history .at-figures { display: flex; flex-wrap: wrap; gap: var(--space-large); padding-top: var(--space-small); }

.ai-training .at-history .at-figures > div { display: flex; flex-direction: column-reverse; gap: var(--space-tight); }

.ai-training .at-history .at-figures dd { margin: 0; color: var(--color-palette-primary); font-size: var(--type-size-display); font-weight: 300; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }

.ai-training .at-history .at-figures dd small { font-size: var(--type-size-base); font-weight: 500; letter-spacing: 0; }

.ai-training .at-history .at-figures dd .text-currency { font-size: var(--type-size-base); font-weight: 500; letter-spacing: 0; }

.ai-training .at-history .at-figures dt { color: var(--color-muted); font-size: var(--type-size-small); }


/* FAQ */

.ai-training .at-faq { background: var(--color-palette-background); }

.ai-training .at-faq .at-faq__items { flex: 1.4 1 0; display: flex; flex-direction: column; }


/* CONTACT — BACK TO THE COVER: NAVY, GLOW AND THE BUTTON AT THE EDGE */

.ai-training .at-contact { background: var(--color-canvas-dark); color: var(--color-text-on-dark); overflow: hidden; }

.ai-training .at-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-palette-primary) 55%, transparent) 0%, color-mix(in srgb, var(--color-palette-primary) 15%, transparent) 30%, transparent 55%);
    pointer-events: none;
}

.ai-training .at-contact .at-contact__object { position: absolute; right: -8%; bottom: -30%; width: 34%; opacity: 0.9; pointer-events: none; }

.ai-training .at-contact .at-contact__object img { display: block; width: 100%; height: auto; transform: rotate(-14deg); filter: drop-shadow(0 48px 64px color-mix(in srgb, var(--color-canvas-dark) 70%, transparent)); }

.ai-training .at-contact .at-contact__layout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-large); }

.ai-training .at-contact .at-section-heading { flex: 1 1 0; }

.ai-training .at-contact .at-section-heading p { color: var(--color-muted-on-dark); }

.ai-training .at-contact .at-contact__actions { flex: 0 1 460px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-medium); min-width: 0; padding: var(--space-large); }

.ai-training .at-contact .at-contact__email,
.ai-training .at-contact .at-contact__actions > span { display: flex; align-items: center; gap: var(--space-small); min-height: var(--control-height); color: var(--color-text-on-dark); font-weight: 600; }

.ai-training .at-contact .at-contact__email { text-decoration: underline; text-underline-offset: var(--space-tight); }

.ai-training .at-contact .at-contact__actions .eicon { color: var(--color-palette-secondary); }

.ai-training .at-contact .at-contact__actions > span { font-size: var(--type-size-small); }


/* RESPONSIVE */

@media (max-width: 1100px) {
    .ai-training main h1,
    .ai-training .at-hero h1 { font-size: var(--type-size-display); }

    .ai-training main .at-statement h2 { font-size: var(--type-size-display); }

    .ai-training main .at-statement__kicker { font-size: var(--type-size-page); }

    .ai-training .at-hero .at-hero__card { padding: var(--space-large); }

    .ai-training .at-examples__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ai-training .at-infra-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .ai-training main section { padding-block: calc(var(--space-large) * 1.5); }

    .ai-training .at-stack { gap: var(--space-large); }

    .ai-training .at-hero { padding-top: calc(var(--space-large) * 2); }

    .ai-training .at-hero .at-hero__layout { flex-direction: column; align-items: stretch; gap: 0; }

    .ai-training .at-hero .at-hero__object { flex: 0 0 auto; align-self: flex-start; width: 55%; }

    .ai-training .at-hero .at-hero__object img { width: 100%; }

    /* Layout bleed: on narrow screens the card rises over the object instead. */
    .ai-training .at-hero .at-hero__card { margin-left: 0; margin-top: calc(-1 * var(--space-large)); padding: var(--space-medium); }

    .ai-training .at-split,
    .ai-training .at-module-pair,
    .ai-training .at-certificate,
    .ai-training .at-about .at-about__layout,
    .ai-training .at-contact .at-contact__layout,
    .ai-training .at-statement .at-statement__card { flex-direction: column; align-items: stretch; }

    .ai-training .at-statement { background-position: 30% center; }

    .ai-training .at-statement .at-statement__card { padding: var(--space-medium); gap: var(--space-medium); }

    .ai-training .at-statement .at-statement__divider { flex-basis: 2px; height: 2px; background: var(--at-hairline); }

    .ai-training .at-section-heading { max-width: none; }

    .ai-training .at-module { padding: var(--space-medium); }

    .ai-training .at-inloco { flex-direction: column; align-items: flex-start; gap: var(--space-medium); padding: var(--space-medium); }

    .ai-training .at-steps { grid-template-columns: 1fr; gap: var(--space-medium); }

    .ai-training .at-step,
    .ai-training .at-infra-steps .at-step { flex-direction: row; align-items: flex-start; }

    .ai-training .at-step .at-step__art,
    .ai-training .at-infra-steps .at-step .at-step__art { flex: 0 0 auto; width: calc(var(--space-large) * 2); height: calc(var(--space-large) * 2); }

    .ai-training .at-infra-steps { grid-template-columns: 1fr; }

    .ai-training .at-certificate .at-certificate__stack { width: 100%; }

    .ai-training .at-portrait { position: static; flex: 0 0 auto; max-width: 440px; align-self: center; }

    .ai-training .at-contact .at-contact__object { right: -20%; bottom: -10%; width: 60%; opacity: 0.35; }

    .ai-training .at-contact .at-contact__actions { flex: 0 0 auto; padding: var(--space-medium); }

    .ai-training main h2 { font-size: var(--type-size-page); }

    .ai-training main .at-certificate h3 { font-size: var(--type-size-page); }

    .ai-training .at-included__items { gap: var(--space-medium); }
}

@media (max-width: 540px) {
    .ai-training { --at-type-figure: var(--type-size-hero); }

    .ai-training .at-actions { align-items: stretch; flex-direction: column; }

    .ai-training .at-actions .btn { width: 100%; }

    .ai-training .at-hero .at-hero__facts li { flex: 1 1 100%; }

    .ai-training .at-examples__list { grid-template-columns: 1fr; }

    .ai-training .at-examples__list .at-example:first-child { grid-column: auto; }

    .ai-training .at-included__items { flex-direction: column; gap: var(--space-large); }

    .ai-training .at-contact .at-contact__actions { align-items: stretch; }

    .ai-training .at-contact .at-contact__actions > .btn { width: 100%; white-space: normal; }

    .ai-training .at-history .at-figures { gap: var(--space-medium); }

    .ai-training .at-pill { white-space: normal; height: auto; min-height: var(--control-height); padding-block: var(--space-small); }
}

@media (prefers-reduced-motion: reduce) {
    .ai-training *, .ai-training *::before, .ai-training *::after { scroll-behavior: auto; animation: none; transition: none; }
}