/* Team Legendz: turquoise / lime on charcoal. Scoped to the retained hub content. */
.training-standalone { margin:0; background:#0c1010; }
.training-hub { --bg:#0c1010; --card:#151c1d; --text:#f1f3ec; --muted:#b2bcb7; --cyan:#6edbd8; --lime:#c7ee74; --border:#303c38; color:var(--text); background:var(--bg); font-family:Manrope,system-ui,sans-serif; line-height:1.65; padding:24px 32px 40px; overflow:clip; }
.training-hub *, .training-hub *::before,.training-hub *::after { box-sizing:border-box; }
.training-hub .container { width:100%; max-width:1320px; margin:auto; }
.training-hub h1,.training-hub h2,.training-hub h3,.training-hub p { margin:0; font-family:inherit; }
.training-hub a,.training-hub button { -webkit-tap-highlight-color:transparent; }
.training-hub :is(a,button):focus-visible { outline:3px solid var(--cyan); outline-offset:5px; }
.training-hub header { position:relative; min-height:630px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 24px 95px; isolation:isolate; border:1px solid #34413b; border-radius:36px; background:#132320; }
.training-hub header::before,.training-hub header::after { content:''; position:absolute; width:440px; height:540px; border:1px solid #46664e; border-radius:70px; z-index:-1; transform:rotate(-28deg); opacity:.4; left:-330px; top:50px; }
.training-hub header::after { left:auto; right:-330px; transform:rotate(28deg); border-color:var(--cyan); }
.training-hub .hero-mark { width:80px; height:80px; color:var(--lime); margin-bottom:20px; }
.training-hub .hero-mark svg { width:100%; height:100%; }
.training-hub .badge { display:block; color:var(--cyan); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin-bottom:22px; }
.training-hub header h1 { font-size:clamp(46px,6.5vw,92px); font-weight:500; line-height:1.02; letter-spacing:-.065em; color:var(--text); }
.training-hub header h1 span { color:var(--lime); }
.training-hub header p { margin:24px auto 0; max-width:520px; font-size:16px; color:var(--muted); text-wrap:balance; }
.training-hub .hero-cta { display:flex; align-items:center; gap:34px; background:var(--lime); color:#17200e; border-radius:999px; padding:15px 24px; margin-top:30px; font-size:14px; font-weight:700; text-decoration:none; transition:transform .25s,background .25s; }
.training-hub .hero-cta span { font-size:22px; }
.training-hub .hero-index { position:absolute; bottom:24px; left:32px; right:32px; display:flex; justify-content:space-between; color:#9caea5; font-size:9px; letter-spacing:.16em; }
.training-hub nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; margin:28px 0 100px; }
.training-hub nav a { color:var(--muted); font-size:12px; font-weight:600; text-decoration:none; padding:12px 14px; border-radius:999px; transition:background .2s,color .2s; }
.training-hub nav a:first-child { color:var(--text); background:#24302a; }
.training-hub nav a:hover { background:#263830; color:var(--lime); }
.training-hub section { scroll-margin-top:32px; margin-bottom:110px; }
.training-hub section > h2 { font-size:clamp(32px,4.5vw,56px); font-weight:500; letter-spacing:-.05em; line-height:1.1; color:var(--text); margin-bottom:24px; max-width:880px; }
.training-hub section > h2::before { content:''; display:block; width:36px; height:3px; background:var(--cyan); margin-bottom:26px; }
.training-hub .intro { max-width:620px; color:var(--muted); font-size:16px; margin-bottom:32px; }
.training-hub .path-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.training-hub .path-card { position:relative; background:#192825; padding:30px; border:1px solid #36544a; border-radius:30px; cursor:pointer; min-width:0; }
.training-hub .path-card.path-b { background:#22281b; border-color:#495538; }
.training-hub .path-card.selected { border-color:var(--lime); box-shadow:0 0 0 1px var(--lime); }
.training-hub .path-visual { height:190px; display:flex; align-items:center; flex-direction:column; margin:-10px -8px 24px; color:var(--cyan); border-bottom:1px solid #ffffff15; padding-bottom:18px; }
.training-hub .path-b .path-visual { color:var(--lime); }
.training-hub .path-visual svg { width:100%; height:155px; overflow:visible; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.training-hub .path-visual span { font-size:9px; letter-spacing:.18em; opacity:.7; }
.training-hub .tag { color:var(--cyan); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.training-hub .path-b .tag { color:var(--lime); }
.training-hub .path-card h3 { font-size:clamp(23px,2.4vw,32px); line-height:1.2; letter-spacing:-.035em; margin:12px 0; }
.training-hub .path-card > p { font-size:14px; color:var(--muted); min-height:48px; }
.training-hub .checklist { padding:0; margin:24px 0; list-style:none; counter-reset:step; }
.training-hub .checklist li { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid #ffffff10; font-size:13px; color:#d4ded7; counter-increment:step; }
.training-hub .checklist li::before { content:counter(step,decimal-leading-zero); color:var(--cyan); font-size:11px; min-width:22px; padding-top:2px; }
.training-hub .path-b .checklist li::before { color:var(--lime); }
.training-hub .select-path { width:100%; display:flex; justify-content:space-between; align-items:center; padding:15px 20px; color:var(--text); background:#ffffff09; border:1px solid #ffffff26; border-radius:99px; font-size:13px; font-weight:600; cursor:pointer; margin-top:24px; }
.training-hub .selected .select-path { color:#17200e; background:var(--lime); border-color:var(--lime); }
.training-hub .path-content,.training-hub .path-status { display:none; }
.training-hub.is-path-a .path-content.a,.training-hub.is-path-b .path-content.b,.training-hub.is-path-a .path-status.a,.training-hub.is-path-b .path-status.b { display:block; }
.training-hub .path-status { border:1px solid #456440; border-radius:18px; background:#1b2a20; padding:20px 24px; margin-top:24px; color:#d9e7d6; font-size:14px; }
.training-hub .switch-path { display:inline-block; cursor:pointer; padding:12px 0; border:0; background:transparent; color:var(--cyan); font:inherit; text-decoration:underline; text-underline-offset:4px; }
.training-hub .note { border-left:2px solid var(--cyan); padding:2px 0 2px 22px; margin-top:30px; max-width:900px; color:var(--muted); font-size:13px; line-height:1.9; }
.training-hub .note strong { color:var(--text); }
.training-hub .card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.training-hub .task-card { min-width:0; display:flex; flex-direction:column; gap:16px; border:1px solid var(--border); background:var(--card); border-radius:28px; padding:20px 24px 26px; }
.training-hub .resource-art { position:relative; height:190px; overflow:hidden; margin:-6px -10px 4px; border-radius:18px; color:#90c4b4; background:#1e312d; }
.training-hub .resource-art svg { position:absolute; height:100%; width:100%; left:0; top:0; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.training-hub .resource-index { position:absolute; z-index:1; top:14px; left:16px; color:#b4c5bc; font-size:10px; letter-spacing:.12em; }
.training-hub .art-c { background:#29311d; color:var(--lime); }
.training-hub .art-p { background:#1b3438; color:var(--cyan); }
.training-hub .art-d { background:#303327; color:#dce4b6; }
.training-hub .task-card[data-id="s1"] .resource-art { background:#dce6c3; color:#294032; }
.training-hub .task-card[data-id="s2"] .resource-art { background:#78cfc7; color:#193e36; }
.training-hub .task-card[data-id="s5"] .resource-art { background:#c7d89c; color:#334528; }
.training-hub .task-card:is([data-id="s1"],[data-id="s2"],[data-id="s5"]) .resource-index { color:#34513e; }
@media(max-width:700px) { .training-hub header::before,.training-hub header::after { display:none; } }
.training-hub .task-header { display:flex; align-items:flex-start; gap:12px; }
.training-hub .task-card h3 { flex:1; font-size:18px; line-height:1.35; font-weight:600; letter-spacing:-.025em; padding-top:2px; }
.training-hub .task-card p { color:var(--muted); font-size:13px; }
.training-hub .check-box { display:flex; flex:none; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:1px solid #607267; border-radius:8px; background:transparent; cursor:pointer; position:relative; }
.training-hub .check-box::before { content:''; position:absolute; inset:-8px; }
.training-hub .completed .check-box { background:var(--lime); border-color:var(--lime); }
.training-hub .completed .check-box::after { content:'✓'; color:#1a290f; font-size:18px; font-weight:bold; }
.training-hub .completed { border-color:#718e47; }
.training-hub .task-card a { display:flex; align-items:center; justify-content:space-between; align-self:stretch; min-height:44px; border-top:1px solid #ffffff12; margin-top:auto; padding-top:14px; font-size:13px; font-weight:600; color:var(--cyan); text-decoration:none; }
.training-hub .task-card a:hover { color:var(--lime); }
.training-hub section:last-of-type { margin-bottom:20px; }
.legendz-footer { background:#0c1010; color:#f1f3ec; padding:0 32px; font-family:Manrope,system-ui,sans-serif; }
.legendz-footer * { box-sizing:border-box; }
.legendz-footer-inner { max-width:1320px; margin:auto; border-top:1px solid #304138; padding:38px 0 24px; }
.legendz-footer-main { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.legendz-footer-brand { display:inline-flex; align-items:center; gap:14px; color:#f1f3ec; font-size:26px; font-weight:500; line-height:1.15; letter-spacing:-.04em; text-decoration:none; }
.legendz-footer-brand svg { width:52px; height:52px; color:#c7ee74; flex:none; }
.legendz-footer-subtitle { display:block; color:#9eafa5; font-size:9px; letter-spacing:.2em; font-weight:600; margin-top:7px; }
.legendz-footer-actions { display:flex; flex-wrap:wrap; gap:12px; }
.legendz-footer-actions a { display:inline-flex; align-items:center; justify-content:space-between; gap:26px; min-height:46px; border-radius:999px; padding:12px 20px; font-size:13px; font-weight:600; text-decoration:none; transition:background .2s,transform .2s; }
.legendz-footer-community { color:#dbe6df; border:1px solid #496051; }
.legendz-footer-call { color:#192710; background:#c7ee74; border:1px solid #c7ee74; }
.legendz-footer-base { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-top:30px; color:#9eafa5; font-size:11px; line-height:1.8; }
.legendz-footer-base p { margin:0; max-width:510px; }
.legendz-footer :is(a,button):focus-visible { outline:3px solid #6edbd8; outline-offset:5px; }
@media(hover:hover) and (pointer:fine) { .legendz-footer-actions a:hover { transform:translateY(-2px); } .legendz-footer-community:hover { background:#1c2b24; } .legendz-footer-call:hover { background:#d9f8a1; } }
@media(max-width:700px) { .legendz-footer { padding:0 18px; } .legendz-footer-inner { padding:28px 0 24px; } .legendz-footer-main { align-items:flex-start; flex-direction:column; gap:24px; } .legendz-footer-brand { font-size:25px; } .legendz-footer-actions { width:100%; } .legendz-footer-actions a { flex:1; padding:12px 18px; gap:16px; } .legendz-footer-base { flex-direction:column; gap:10px; margin-top:26px; } }
@media(prefers-reduced-motion:reduce) { .legendz-footer a { transition:none; transform:none !important; } }
.motion-card { position:relative; transform:perspective(1000px) translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .7s,border-color .25s,box-shadow .35s; transition-delay:var(--delay,0ms); }
.motion-card.motion-pending { transform:translate(var(--fan,0px),28px) rotate(var(--turn,0deg)) scale(.94); opacity:1; z-index:var(--stack-order,1); transition:none; }
.training-hub .task-card { position:relative; min-height:600px; padding:62px 26px 24px; gap:14px; }
.training-hub .task-header { order:1; }
.training-hub .task-card h3 { font-size:25px; line-height:1.3; font-weight:500; }
.training-hub .task-card > p { order:2; font-size:14px; }
.training-hub .task-card .resource-art { order:3; height:320px; margin:8px -10px 0; }
.training-hub .task-card > a { order:4; }
.training-hub .check-box { position:absolute; top:20px; left:22px; z-index:3; width:28px; height:28px; border-color:#96b4a1; background:#0c1010b3; }
.training-hub .task-card > a::after { content:''; position:absolute; inset:0; z-index:1; border-radius:28px; }
.training-hub .task-card:focus-within { outline:2px solid var(--cyan); outline-offset:5px; }
.training-hub .resource-art img { width:100%; height:100%; object-fit:contain; background:#0c1010; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.training-hub .resource-art .resource-index { z-index:1; color:#d8e9df; text-shadow:0 1px 6px #000; }
@media(hover:hover) and (pointer:fine) { .training-hub .task-card:hover .resource-art img { transform:scale(1.05) rotate(-2deg); } }
@media(hover:hover) and (pointer:fine) { .motion-card:hover { --lift:-7px; box-shadow:0 20px 48px #0003; } .training-hub .task-card:hover .resource-art svg,.training-hub .path-card:hover .path-visual svg { transform:translateY(-5px) rotate(-3deg) scale(1.04); } .training-hub .hero-cta:hover { transform:translateY(-3px); background:#d9f8a1; } }
@media(max-width:1000px) { .training-hub .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .training-hub header { min-height:590px; } }
@media(max-width:700px) { .training-hub { padding:12px 18px 20px; } .training-hub header { min-height:560px; padding:56px 20px 80px; border-radius:26px; } .training-hub header h1 { font-size:clamp(38px,10.8vw,68px); } .training-hub header p { font-size:14px; } .training-hub .hero-index { left:18px; right:18px; font-size:7px; letter-spacing:.08em; } .training-hub .hero-mark { width:60px; height:60px; } .training-hub nav { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:thin; margin:18px -4px 64px; padding:4px; } .training-hub nav a { flex:none; white-space:nowrap; min-height:44px; } .training-hub .path-grid,.training-hub .card-grid { grid-template-columns:1fr; } .training-hub section { margin-bottom:72px; scroll-margin-top:90px; } .training-hub .path-card { padding:24px; } .training-hub .path-visual { height:160px; } .training-hub .path-visual svg { height:130px; } .training-hub .task-card { padding:62px 24px 26px; } .training-hub .resource-art { height:200px; } .motion-card.motion-pending { transform:translateY(24px); } }
@media(max-width:700px) { .training-hub section { scroll-margin-top:24px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto !important; } .motion-card,.motion-card.motion-pending { transform:none !important; opacity:1 !important; transition:none !important; } .training-hub *, .training-hub *::before,.training-hub *::after { animation:none !important; transition:none !important; } }

/* Wide path artwork matches the new resource illustration family. */
.training-hub .path-photo { position:relative; display:block; width:100%; height:auto; aspect-ratio:16/9; overflow:hidden; border-radius:20px; margin-bottom:26px; background:#0c1010; }
.training-hub .path-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.training-hub .path-photo span { position:absolute; left:0; right:0; bottom:0; padding:24px 16px 12px; background:linear-gradient(transparent,#07140ee6); color:#fff; font-size:11px; letter-spacing:.13em; text-align:left; }