/* Training is a continuous learning instrument, not an application mockup. */
.trn-page{color:#181818;background:#fff;overflow:clip}
.trn-page *{box-sizing:border-box}
.trn-page h1,.trn-page h2,.trn-page h3,.trn-page h4,.trn-page p{margin:0}
.trn-page h1,.trn-page h2,.trn-page h3,.trn-page h4{font-weight:400}
.trn-page a{color:inherit}
.trn-eyebrow{font-size:14px;line-height:1.5;letter-spacing:.025em}
.trn-page .button{display:inline-flex;align-items:center;justify-content:center;gap:26px;min-height:48px;padding:13px 24px;text-decoration:none;white-space:nowrap}
.trn-page .button svg{width:22px;height:22px}
.trn-page a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.trn-page svg{fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.trn-hero{position:relative;min-height:780px;height:100svh;max-height:1150px;background:#fff;color:#fff;display:flex;align-items:center}
.trn-hero-backdrop{position:absolute;inset:0;background:#111;overflow:hidden}
.trn-hero-backdrop>img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.trn-hero-shade{position:absolute;inset:0;background:rgb(0 0 0/.4)}
.trn-hero-copy{position:relative;width:min(1328px,calc(100% - 112px));margin:auto;padding:130px 0 150px;transform:translateX(var(--hero-copy-shift,0px));text-shadow:0 2px 32px rgb(0 0 0/.12)}
.trn-hero h1{font-size:clamp(58px,6.2vw,94px);line-height:1.04;letter-spacing:-.055em;margin-top:23px;max-width:1040px}
.trn-hero-lede{font-size:20px;line-height:1.5;letter-spacing:-.025em;max-width:480px;margin-top:26px!important}
.trn-actions{display:flex;align-items:center;gap:30px;margin-top:36px}
.trn-hero .button{background:#fff;color:#171717;text-shadow:none}
.trn-hero-link{display:inline-flex;align-items:center;gap:28px;font-size:14px;text-decoration:none}
.trn-hero-link span{font-size:18px}
.trn-hero-caption{position:absolute;left:max(7vw,24px);bottom:42px;font-size:14px;line-height:1.5;color:#ffffffcf}


.trn-wrap{width:min(1160px,calc(100% - 112px));margin:auto}
.trn-page h2{font-size:clamp(40px,4.4vw,66px);line-height:1.06;letter-spacing:-.055em}
.trn-heading{text-align:center;margin-bottom:32px}
.trn-heading>p{font-size:18px;line-height:1.5;color:#656565;margin:20px auto 0;max-width:560px}
.trn-scene{padding:90px 0;position:relative}
.trn-pin{padding:20px 0}
.trn-scene.is-pinned .trn-track{height:calc(var(--trn-pin-height) + var(--trn-distance))}
.trn-scene.is-pinned .trn-pin{position:sticky;top:var(--trn-pin-top)}
.trn-phases{margin:30px auto 0;max-width:680px;text-align:center;position:relative}
.trn-phases article{padding:20px 0}
.trn-phases h3{font-size:27px;letter-spacing:-.035em;line-height:1.16}
.trn-phases p{font-size:17px;line-height:1.5;color:#666;margin:12px auto 0;max-width:580px}
.trn-scene.is-pinned .trn-phases{height:var(--trn-phase-height)}
.trn-scene.is-pinned .trn-phases article{position:absolute;inset:0;padding:0;visibility:hidden;opacity:0}
.trn-scene.is-pinned .trn-phases article.is-current{visibility:visible;opacity:1}
.trn-scene.trn-measuring .trn-phases{height:auto}
.trn-scene.trn-measuring .trn-phases article{position:relative;visibility:visible;opacity:1;padding:0}
.trn-frontier{margin:0}
.trn-frontier-plot{position:relative;height:300px;margin:0 auto;max-width:960px}
.trn-frontier-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trn-frontier-plot path{vector-effect:non-scaling-stroke;fill:none}
.trn-chart-reference{stroke:#c9c9c9;stroke-width:1;stroke-dasharray:3 7}
.trn-chart-guide{stroke:#e8e8e8;stroke-width:1}
.trn-chart-route{stroke:#161616;stroke-width:3.2;stroke-dasharray:1;stroke-dashoffset:calc((1 - var(--trn-progress,1))*1px)}
.trn-frontier-plot circle{fill:#161616;stroke:none}
.trn-chart-start{opacity:.35}
.trn-chart-finish{opacity:var(--trn-arrival,1)}
.trn-quality-axis,.trn-cost-axis,.trn-frontier-reference,.trn-frontier-start,.trn-frontier-finish{position:absolute;font-size:16px;line-height:1.3;letter-spacing:-.02em}
.trn-quality-axis{top:0;left:2.5%;color:#626262}
.trn-cost-axis{bottom:0;right:2.5%;color:#626262}
.trn-frontier-reference{right:2.5%;top:calc(42.86% - 26px);color:#6b6b6b}
.trn-frontier-start{left:21.5%;top:calc(82.86% - 30px);transform:translateX(-50%);white-space:nowrap;color:#666}
.trn-frontier-finish{left:75.5%;top:calc(20% - 35px);font-size:23px;font-weight:400;transform:translateX(-50%);white-space:nowrap;opacity:var(--trn-arrival,1)}
.trn-frontier figcaption{font-size:16px;text-align:center;line-height:1.5;color:#686868;margin:24px auto 0;max-width:560px}
.trn-performance .trn-heading h2 br{display:none}
.trn-performance .trn-phases p{font-size:27px;line-height:1.3;letter-spacing:-.035em;color:#181818;margin:0;max-width:none}
.trn-learning{background:#111;color:#f6f6f6}
.trn-learning .trn-heading h2{font-size:clamp(39px,4vw,58px)}
.trn-learning .trn-heading h2 br{display:none}
.trn-network-labels{color:#aaa;font-size:14px;line-height:1.5}
.trn-learning-figure{margin:26px auto 0}
.trn-network-labels{display:flex;justify-content:space-between;max-width:940px;margin:auto}
.trn-network{width:100%;height:250px;overflow:visible;display:block}
.trn-network-fallback path{stroke:#aaa;stroke-width:1}
.trn-network-fallback circle{fill:white;stroke:none}
.trn-learning .trn-phases{margin-top:8px}
.trn-learning .trn-phases p{color:#b5b5b5}
.trn-evaluation{padding:130px 0}
.trn-evaluation>header{margin-bottom:56px}
.trn-evaluation>header>p{font-size:14px;line-height:1.5;color:#6b6b6b;margin-bottom:18px}
.trn-ownership header>p{font-size:19px;line-height:1.5;color:#6b6b6b;max-width:395px}
.trn-correction-stage{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;min-height:320px}
.trn-evidence{margin:0;padding:40px;background:#f6f6f6;box-shadow:0 24px 50px rgb(0 0 0/.025)}
.trn-evidence figcaption,.trn-answer span{font-size:14px;line-height:1.5;color:#686868}
.trn-evidence blockquote{font-size:30px;line-height:1.3;letter-spacing:-.035em;margin:35px 0 14px}
.trn-answer p{font-size:30px;line-height:1.3;letter-spacing:-.035em;margin-top:10px}
.trn-answer-before{color:#777}
.trn-answer-before p{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:rgb(0 0 0 / var(--trn-correction,1))}
.trn-answer-after{margin-top:32px}
.trn-correction-ready .trn-answer{display:grid;align-items:center}
/* Opacity preserves both labelled answers for assistive reading. The grid keeps
   their shared footprint stable while the visual example changes with scroll. */
.trn-correction-ready .trn-answer>div{grid-area:1/1;margin:0;opacity:0;transition:opacity 180ms ease}
.trn-correction-ready[data-trn-answer="prediction"] .trn-answer-before,.trn-correction-ready[data-trn-answer="target"] .trn-answer-after{opacity:1}
.trn-correction-ready .trn-answer-after{transform:translateY(calc((1 - var(--trn-correction,1))*12px))}
.trn-ownership{background:#171717;color:#eee;padding:110px 0}
.trn-ownership-grid{display:grid;grid-template-columns:1fr 1fr;gap:130px}
.trn-ownership header>p{color:#b5b5b5;margin-top:26px}
.trn-text-link{font-size:16px;line-height:1.5;text-decoration:none;display:inline-flex;gap:22px;align-items:center;margin-top:24px}
.trn-text-link svg{width:20px;height:20px}
.trn-delivery>div{margin-bottom:46px}
.trn-delivery>div:last-child{margin:0}
.trn-delivery span{font-size:14px;color:#aaa}
.trn-delivery h3{font-size:29px;line-height:1.1;letter-spacing:-.035em;margin-top:12px}
.trn-delivery p{font-size:17px;line-height:1.55;color:#b5b5b5;margin-top:14px;max-width:430px}
.trn-delivery .trn-text-link{margin-top:14px}
.trn-close{text-align:center;padding:110px 24px 120px}
.trn-close .button{background:#171717;color:#fff;margin-top:36px}
@media(max-width:1000px){
 .trn-wrap{width:calc(100% - 64px)}
 .trn-evaluation>header,.trn-ownership-grid{gap:60px}
 .trn-correction-stage{gap:40px}
}
@media(max-width:760px){
 .trn-hero{height:100svh;min-height:680px;max-height:950px}
 .trn-hero-shade{background:rgb(0 0 0/.48)}
 .trn-hero-copy{width:calc(100% - 48px);padding:135px 0 130px}
 .trn-hero h1{font-size:clamp(42px,10.6vw,72px);line-height:1.07;margin-top:22px}
 .trn-hero h1 br{display:none}.trn-hero-lede{font-size:17px;line-height:1.5;margin-top:24px!important}
 .trn-actions{gap:22px;margin-top:30px;flex-wrap:wrap}
 .trn-wrap{width:calc(100% - 44px)}
 .trn-page h2{font-size:39px;line-height:1.07}
 .trn-scene{padding:60px 0}.trn-pin{padding:14px 0}
 .trn-heading{margin-bottom:24px}.trn-heading>p{font-size:16px;margin-top:16px}
 .trn-performance .trn-heading h2 br,.trn-learning .trn-heading h2 br{display:block}
 .trn-frontier-plot{height:255px}.trn-frontier-finish{font-size:20px;left:75%;top:calc(20% - 32px)}
 .trn-frontier-reference{font-size:14px}.trn-frontier-start{font-size:14px;left:23%}
 .trn-quality-axis,.trn-cost-axis{font-size:14px}
 .trn-frontier figcaption{font-size:14px;max-width:315px;margin-top:20px}
 .trn-phases{margin-top:24px}.trn-phases h3{font-size:24px}.trn-phases p{font-size:16px;margin-top:10px}
 .trn-learning .trn-heading h2{font-size:37px}
 .trn-learning-figure{margin-top:18px}.trn-network{height:180px}
 .trn-learning .trn-phases{margin-top:10px}
 .trn-performance .trn-phases p{font-size:22px}
 .trn-evaluation{padding:75px 0}.trn-evaluation>header{display:block;margin-bottom:35px}
 .trn-correction-stage{display:block;min-height:0}.trn-evidence{padding:28px}.trn-evidence blockquote{font-size:27px;margin:25px 0 5px}
 .trn-answer{margin-top:36px}.trn-answer p{font-size:27px}.trn-answer-after{margin-top:28px}
 .trn-ownership{padding:75px 0}.trn-ownership-grid{display:block}
 .trn-ownership header>p{font-size:17px;margin-top:23px}.trn-delivery{margin-top:50px}.trn-delivery>div{margin-bottom:35px}.trn-delivery p{font-size:16px}
 .trn-close{padding:76px 22px 86px}
}
@media(prefers-reduced-motion:reduce){.trn-page *{animation:none!important;transition:none!important}.trn-hero-copy{transform:none}}
@media(min-width:761px) and (max-height:820px){
 .trn-pin{padding:12px 0}.trn-heading{margin-bottom:24px}
 .trn-heading h2,.trn-learning .trn-heading h2{font-size:50px}
 .trn-network{height:230px}.trn-frontier-plot{height:275px}
}
/* Only scenes that fail the ordinary phone composition use this tighter spacing.
   The same title, visual, current explanation and qualification stay together. */
@media(max-width:760px){
 .trn-compact .trn-pin{padding:8px 0}
 .trn-compact .trn-heading{margin-bottom:16px}
 .trn-page .trn-compact .trn-heading h2{font-size:30px;line-height:1.08}
 .trn-compact .trn-heading>p{margin-top:10px}
 .trn-compact .trn-frontier-plot{height:180px}
 .trn-compact .trn-frontier figcaption{margin-top:12px}
 .trn-compact .trn-phases{margin-top:16px}
 .trn-compact .trn-phases h3{font-size:22px}
 .trn-compact .trn-phases p{margin-top:8px}
 .trn-compact .trn-learning-figure{margin-top:12px}
 .trn-compact .trn-network{height:180px}
 .trn-learning.trn-compact .trn-phases{margin-top:8px}
}