/* Base Akademia — public site styles.
   CORE = verbatim port of BASE_ACADEMY_PAGE_NEW/styles.css (2026-08 redesign;
   only the font URL is adapted), followed by the PRODUCTION LAYER (academy-only
   components). scss/site/site.scss mirrors this file 1:1 — edit BOTH. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/InterVariable.woff2") format("woff2")}:root{--c-primary: #2F7DFF;--c-primary-deep: #004DCE;--c-primary-soft: #B3CEFB;--c-primary-tint: #EAF2FF;--c-link: #1B5FD8;--c-canvas: #FFFFFF;--c-dark: #121212;--c-soft: #F4F5F7;--c-border: #E7EAF0;--c-border-strong: #D5DAE3;--c-ink: #121212;--c-ink-2: #3A4250;--c-muted: #5D6470;--c-faint: #7C8592;--c-on-primary: #FFFFFF;--c-on-dark: #FFFFFF;--c-on-dark-muted: #A7AEBB;--c-yellow: #FFE303;--c-green: #00AA67;--c-green-bright: #1FFFA1;--c-purple: #8E2DEA;--c-purple-deep: #6800CB;--grad-sky: linear-gradient(135deg, #2F7DFF 0%, #004DCE 100%);--shadow-card: 0 24px 60px rgba(17, 34, 68, .10);--shadow-soft: 0 12px 30px rgba(17, 34, 68, .07);--shadow-lift: 0 18px 44px rgba(17, 34, 68, .13);--shadow-seam: 0 -18px 44px rgba(17, 34, 68, .08);--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in-out: cubic-bezier(.77, 0, .175, 1);--ease-drawer: cubic-bezier(.32, .72, 0, 1);--ease-words: cubic-bezier(.5, 0, .5, 1);--radius-card: 16px;--radius-ui: 12px;--radius-sm: 8px;--radius-pill: 999px;--band-radius: 28px;--band-overlap: 28px;--s-xxs: 4px;--s-xs: 8px;--s-sm: 12px;--s-base: 16px;--s-md: 20px;--s-lg: 24px;--s-xl: 32px;--s-xxl: 48px;--s-section: 88px;--container: 1200px;--nav-h: 68px}*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:"Inter",-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--c-canvas);color:var(--c-ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}img,svg,video{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit}input,select,textarea{font-family:inherit}::selection{background:var(--c-primary);color:#fff}:where(a,button,input,select,textarea,[tabindex]):focus{outline:none}:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:6px}.on-dark :where(a,button):focus-visible{outline-color:#fff}.skip-link{position:absolute;left:16px;top:-48px;z-index:100;background:var(--c-ink);color:#fff;padding:10px 18px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;transition:top .2s var(--ease-out)}.skip-link:focus-visible{top:12px}h1,h2,h3,h4,h5{margin:0;font-weight:500;line-height:1.12;letter-spacing:-0.03em;text-wrap:balance}h1{font-size:clamp(33px,3.6vw,54px);font-weight:700;line-height:1.04;letter-spacing:-0.035em}h2{font-size:clamp(27px,3.3vw,43px)}h3{font-size:clamp(22px,2.4vw,29px)}h4{font-size:20px;font-weight:600}h5{font-size:17px;font-weight:600}p{margin:0;text-wrap:pretty}.lead{font-size:18px;line-height:1.65;color:var(--c-ink-2);max-width:62ch}.muted{color:var(--c-muted)}.faint{color:var(--c-faint)}.text-sm{font-size:14px}.text-xs{font-size:13px}.num,.tabular{font-variant-numeric:tabular-nums}.hl{color:inherit}.on-dark .hl{color:inherit}.hl-yellow{background:var(--c-yellow);color:var(--c-ink);padding:0 .14em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}.section{padding:var(--s-section) 0}.section-tight{padding:56px 0}.section-soft{background:var(--c-soft);position:relative;z-index:1;border-top-left-radius:var(--band-radius);border-top-right-radius:var(--band-radius);margin-top:calc(-1*var(--band-overlap));padding-top:calc(var(--s-section) + var(--band-overlap))}.grid{display:grid;gap:var(--s-lg)}.grid-2{grid-template-columns:repeat(2, 1fr)}.grid-3{grid-template-columns:repeat(3, 1fr)}.grid-4{grid-template-columns:repeat(4, 1fr)}.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}.section-header .sh-left{max-width:720px}.section-header h2{margin-bottom:10px}.section-header .lead{font-size:17px}.wordmark{display:inline-flex;align-items:center;gap:10px;color:var(--c-ink)}.wordmark svg{height:21px;width:auto;display:block}.wordmark img{display:block;width:auto;height:auto;max-height:21px;max-width:100%}.wordmark .wm-suffix{font-size:16px;font-weight:500;color:var(--c-muted);letter-spacing:-0.01em;padding-top:1px}.on-dark .wordmark{color:#fff}.on-dark .wordmark .wm-suffix{color:var(--c-on-dark-muted)}.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap}.pill-blue{background:var(--c-primary-tint);color:#1450b8}.pill-green{background:var(--c-primary-tint);color:#1450b8}.pill-yellow{background:var(--c-soft);color:var(--c-ink-2)}.pill-purple{background:#f3e6ff;color:#6912b8}.pill-dark{background:var(--c-ink);color:#fff}.pill-outline{box-shadow:inset 0 0 0 1px var(--c-border-strong);color:var(--c-muted)}.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:var(--radius-pill);background:var(--c-soft);color:var(--c-ink);font-size:13.5px;font-weight:500}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--radius-pill);font-weight:600;font-size:15px;letter-spacing:-0.01em;white-space:nowrap;transition:background-color .18s var(--ease-out),color .18s var(--ease-out),box-shadow .18s var(--ease-out),transform .18s var(--ease-out)}.btn:active{transform:scale(0.97)}.btn-sm{height:44px;padding:0 18px;font-size:14px}.btn-lg{height:54px;padding:0 28px;font-size:16px}.btn-primary{background:var(--c-primary);color:var(--c-on-primary)}.btn-primary:hover{background:var(--c-primary-deep)}.btn-secondary{background:rgba(0,0,0,0);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-border-strong)}.btn-secondary:hover{background:var(--c-soft)}.btn-dark{background:var(--c-ink);color:#fff}.btn-dark:hover{background:#000}.btn-on-dark{background:#fff;color:var(--c-ink)}.btn-on-dark:hover{background:#e9edf5}.btn-ghost-dark{background:rgba(0,0,0,0);color:#fff;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.32)}.btn-ghost-dark:hover{background:hsla(0,0%,100%,.08)}.btn-text{display:inline-flex;align-items:center;gap:6px;height:auto;padding:6px 0;color:var(--c-link);font-weight:600;font-size:15px}.btn-text svg{transition:transform .18s var(--ease-out)}.btn-text:hover{color:var(--c-primary-deep)}@media(hover: hover)and (pointer: fine){.btn-text:hover svg{transform:translateX(3px)}}.topnav{position:sticky;top:0;z-index:50;background:hsla(0,0%,100%,.9);backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid rgba(0,0,0,0);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}.topnav.is-scrolled{border-bottom-color:var(--c-border);box-shadow:0 8px 30px rgba(17,34,68,.05)}.topnav .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:var(--nav-h)}.topnav .wordmark{justify-self:start}.topnav .nav-right{justify-self:end}.topnav nav{display:flex;align-items:center;gap:2px}.topnav nav a{padding:11px 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--c-ink-2);white-space:nowrap;transition:background-color .15s var(--ease-out),color .15s var(--ease-out)}.topnav nav a:hover{background:var(--c-soft);color:var(--c-ink)}.topnav nav a[aria-current=page]{color:var(--c-primary-deep);font-weight:600}.nav-right{display:flex;align-items:center;gap:10px}.lang-chip{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 12px;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--c-border);font-size:12.5px;font-weight:600;color:var(--c-muted)}.mobile-toggle{display:none;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center;color:var(--c-ink)}.mobile-toggle:active{transform:scale(0.94)}.hero{padding:72px 0 88px}.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:64px;align-items:center}.hero-grid>*{min-width:0}.hero-panel,.hero-panel .mockup{min-width:0;max-width:100%}.mock-side{min-width:0}.mock-title,.mock-lesson{overflow-wrap:anywhere}.mock-url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero h1{margin-bottom:22px}.hero .lead{margin-bottom:32px}.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap}.hero-stats{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:20px;margin-top:44px;padding-top:26px;border-top:1px solid var(--c-border);max-width:560px}.hero-stats .stat .n{font-size:30px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}.hero-stats .stat .l{font-size:13.5px;color:var(--c-muted);margin-top:2px}.hero-panel{position:relative;background:var(--c-primary);border-radius:20px;padding:40px 32px 88px;box-shadow:var(--shadow-card)}.hero-float{position:absolute;left:28px;bottom:26px;z-index:2;display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:var(--radius-pill);padding:10px 18px 10px 12px;box-shadow:var(--shadow-soft);font-size:13.5px;font-weight:600}.hero-float .ic{width:28px;height:28px;border-radius:50%;background:var(--c-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.mockup{background:#fff;border-radius:14px;box-shadow:var(--shadow-card);overflow:hidden}.mockup-bar{display:flex;gap:6px;align-items:center;padding:11px 16px;background:#fafbfc;border-bottom:1px solid var(--c-border)}.mockup-bar span{width:9px;height:9px;border-radius:50%;background:#e1e5ec}.mockup-bar .mock-url{margin-left:10px;flex:1;max-width:260px;height:22px;border-radius:6px;background:#f0f2f6;display:flex;align-items:center;padding:0 10px;font-size:11px;color:var(--c-faint);font-weight:500}.mock-side{background:#fff;padding:20px 16px;border-right:1px solid var(--c-border)}.mock-side .mock-kicker{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-faint);margin-bottom:6px}.mock-side .mock-title{font-size:13.5px;font-weight:600;line-height:1.35;margin-bottom:18px}.mock-lesson{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;padding:5px 0;color:var(--c-ink-2)}.mock-lesson.is-muted{color:var(--c-faint);font-weight:400}.mock-lesson.is-current{color:var(--c-primary-deep);font-weight:600;background:var(--c-primary-tint);padding:6px 8px;margin:0 -8px;border-radius:7px}.mock-dot{width:15px;height:15px;border-radius:50%;flex-shrink:0;border:2px solid var(--c-border-strong);position:relative}.mock-dot.is-done{background:var(--c-primary);border-color:var(--c-primary)}.mock-dot.is-done::after{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:6.5px;border:1.6px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}.mock-dot.is-current-dot{border-color:var(--c-primary)}.card{position:relative;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-soft);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .22s var(--ease-out),transform .22s var(--ease-out)}a.card:active{transform:scale(0.985)}@media(hover: hover)and (pointer: fine){a.card:hover,a.path-card:hover,a.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}}.card-thumb{position:relative;aspect-ratio:16/9;background:var(--c-primary);color:#fff;padding:18px;display:flex;align-items:flex-end;font-weight:700;font-size:21px;letter-spacing:-0.02em;line-height:1.15}.card-thumb.is-tint{background:var(--c-primary-tint);color:var(--c-ink)}.card-thumb.is-dark{background:var(--c-dark)}.card-thumb.is-yellow{background:var(--c-yellow);color:var(--c-ink)}.card-thumb.is-green{background:var(--c-green)}.card-thumb.is-purple{background:var(--c-purple)}.card-thumb-tag{position:absolute;top:12px;left:12px;background:hsla(0,0%,100%,.94);color:var(--c-ink);padding:4px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:600}.card-thumb-time{position:absolute;top:12px;right:12px;background:rgba(18,18,18,.68);color:#fff;padding:4px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.card-thumb.is-tint .card-thumb-tag,.card-thumb.is-yellow .card-thumb-tag{background:rgba(18,18,18,.86);color:#fff}.logo-chip-row{position:absolute;right:14px;bottom:14px;display:flex;gap:6px}.logo-chip{width:34px;height:34px;border-radius:9px;background:#fff;box-shadow:0 4px 12px rgba(17,34,68,.18);display:flex;align-items:center;justify-content:center;overflow:hidden}.logo-chip img{width:24px;height:24px;object-fit:contain}.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}.card-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.card-title{font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-0.012em}.card-desc{color:var(--c-muted);font-size:14px;line-height:1.55}.card-footer{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.card-footer .btn-text{font-size:14px}.path-card{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-soft);padding:28px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .22s var(--ease-out),transform .22s var(--ease-out)}a.path-card:active{transform:scale(0.985)}.path-card h4{font-size:18px;line-height:1.3;letter-spacing:-0.014em}.path-meta{font-size:13px;color:var(--c-faint);font-variant-numeric:tabular-nums}.tile{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;box-shadow:var(--shadow-soft);padding:18px 20px;transition:box-shadow .22s var(--ease-out),transform .22s var(--ease-out)}a.tile:active{transform:scale(0.98)}.tile h4{font-size:15.5px;font-weight:600;letter-spacing:-0.01em}.tile p{font-size:13px;color:var(--c-muted);margin-top:2px}.icon-box{height:34px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:flex-start;color:var(--c-primary)}.icon-box svg{width:30px;height:30px}.icon-box.is-purple{color:var(--c-purple)}.band-grow{position:relative;z-index:1;background:var(--c-soft);color:#fff;overflow:hidden;border-top-left-radius:var(--band-radius);border-top-right-radius:var(--band-radius);margin-top:calc(-1*var(--band-overlap));padding:calc(84px + var(--band-overlap)) 24px 92px}.band-grow__inner{position:relative;z-index:1;max-width:var(--container);margin:0 auto}.band-grow h2,.band-grow h3{color:#fff}.grow-bg{position:absolute;inset:0;z-index:0;transform-origin:50% 50%;border-radius:var(--band-radius);will-change:transform;pointer-events:none}.band-grow .grow-bg{background:var(--grad-sky);border-bottom-left-radius:0;border-bottom-right-radius:0}@supports(animation-timeline: view()){@media(prefers-reduced-motion: no-preference){.band-grow{view-timeline-name:--growView;view-timeline-axis:block}.band-grow .grow-bg{animation:growBg linear both;animation-timeline:--growView;animation-range:cover 0% cover 50%}}}@keyframes growBg{from{transform:scaleX(0.87)}to{transform:none}}@keyframes growBgSubtle{from{transform:scaleX(0.94)}to{transform:none}}.band-lead{color:hsla(0,0%,100%,.82);font-size:18px;line-height:1.65;max-width:60ch}.band-grow .step-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:28px;margin-top:56px}.step-cell{border-top:1px solid hsla(0,0%,100%,.28);padding-top:22px}.step-cell .step-num{font-size:13px;font-weight:700;color:hsla(0,0%,100%,.78);font-variant-numeric:tabular-nums;letter-spacing:.06em}.step-cell h3{font-size:21px;margin:10px 0 8px;letter-spacing:-0.015em}.step-cell p{color:hsla(0,0%,100%,.82);font-size:14.5px;line-height:1.6}.cta-panel{position:relative;color:#fff;border-radius:20px;overflow:hidden;padding:52px 56px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}.cta-panel .grow-bg{background:var(--c-primary);border-radius:20px}@supports(animation-timeline: view()){@media(prefers-reduced-motion: no-preference){.cta-panel{view-timeline-name:--ctaView;view-timeline-axis:block}.cta-panel .grow-bg{animation:growBgSubtle linear both;animation-timeline:--ctaView;animation-range:cover 0% cover 45%}}}.cta-panel>*:not(.grow-bg){position:relative;z-index:1}.cta-panel h3{color:#fff;font-size:clamp(24px,2.6vw,32px);margin-bottom:8px}.cta-panel p{color:hsla(0,0%,100%,.82);font-size:16px;max-width:52ch}.band-dark{background:var(--c-dark);color:var(--c-on-dark);overflow:hidden;border-top-left-radius:var(--band-radius);border-top-right-radius:var(--band-radius);margin-top:calc(-1*var(--band-overlap));padding:calc(84px + var(--band-overlap)) 0 92px}.band-dark.is-page-top{margin-top:0;border-radius:0;padding:80px 0 92px}.band-dark h1,.band-dark h2,.band-dark h3{color:#fff}.band-dark .lead{color:var(--c-on-dark-muted)}.band-dark .muted,.band-dark .faint{color:var(--c-on-dark-muted)}.card-on-dark{background:#1c1d1f;border-radius:var(--radius-card);box-shadow:0 24px 60px rgba(0,0,0,.4)}.webinar-feature{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}.webinar-hero{position:relative;border-radius:var(--radius-card);background:var(--c-primary);color:#fff;padding:36px;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow-soft);overflow:hidden;transition:box-shadow .22s var(--ease-out),transform .22s var(--ease-out)}.webinar-hero h3{color:#fff;max-width:24ch}.webinar-stack{display:flex;flex-direction:column;gap:24px}.webinar-card{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-soft);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .22s var(--ease-out),transform .22s var(--ease-out)}a.webinar-card:active{transform:scale(0.985)}@media(hover: hover)and (pointer: fine){a.webinar-card:hover,a.webinar-hero:hover,a.podcast-row:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}}.webinar-thumb{aspect-ratio:16/9;background:var(--c-primary);color:#fff;position:relative;display:flex;align-items:flex-end;padding:20px}.webinar-thumb h3{font-size:17px;line-height:1.3;color:#fff;letter-spacing:-0.012em;max-width:30ch;margin:0;position:relative;z-index:1}.webinar-thumb.is-tint{background:var(--c-primary-tint);color:var(--c-ink)}.webinar-thumb.is-tint h3{color:var(--c-ink)}.webinar-thumb.is-dark{background:var(--c-dark)}.webinar-thumb.is-yellow{background:var(--c-yellow);color:var(--c-ink)}.webinar-thumb.is-yellow h3{color:var(--c-ink)}.webinar-date{position:absolute;top:14px;left:14px;background:hsla(0,0%,100%,.94);color:var(--c-ink);padding:5px 12px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.webinar-thumb.is-dark .webinar-date{background:hsla(0,0%,100%,.94)}.podcast-row{display:grid;grid-template-columns:88px 1fr auto;gap:20px;align-items:center;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-soft);padding:18px 20px;transition:box-shadow .22s var(--ease-out),transform .22s var(--ease-out)}a.podcast-row:active{transform:scale(0.99)}.podcast-cover{width:88px;height:88px;border-radius:var(--radius-ui);background:var(--c-primary);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}.podcast-cover.is-dark{background:var(--c-dark)}.podcast-cover.is-tint{background:var(--c-primary-tint);color:var(--c-primary-deep)}.podcast-kicker{font-size:12.5px;font-weight:600;color:var(--c-muted)}.podcast-row h5,.podcast-row h3{font-size:16px;margin-top:4px;letter-spacing:-0.01em}.podcast-meta{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--c-faint);margin-top:5px;font-variant-numeric:tabular-nums}.stat-band{display:grid;grid-template-columns:repeat(4, 1fr);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}.stat-band .stat-cell{padding:32px 28px;border-left:1px solid var(--c-border)}.stat-band .stat-cell:first-child{border-left:0;padding-left:0}.stat-band .n{font-size:42px;font-weight:700;letter-spacing:-0.025em;line-height:1.05;font-variant-numeric:tabular-nums}.stat-band .n.is-blue{color:var(--c-primary)}.stat-band .n.is-green{color:var(--c-primary)}.stat-band .l{font-size:13.5px;color:var(--c-muted);margin-top:8px}.quote-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:48px}.quote-cell{display:flex;flex-direction:column;gap:18px}.quote-cell blockquote{margin:0;font-size:16.5px;line-height:1.6;color:var(--c-ink-2);text-wrap:pretty}.quote-author{display:flex;align-items:center;gap:12px}.quote-author .who strong{display:block;font-size:14.5px;font-weight:600}.quote-author .who span{font-size:13px;color:var(--c-faint)}.avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:var(--c-primary);color:#fff;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center}.avatar.is-tint{background:var(--c-primary-tint);color:var(--c-primary-deep)}.avatar.is-dark{background:var(--c-dark)}.cert-doc{position:relative;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:12px;aspect-ratio:1.41/1}.cert-doc__frame{height:100%;border:1px solid var(--c-border);border-radius:10px;padding:28px 30px;display:flex;flex-direction:column;justify-content:space-between}.cert-doc__frame .cert-kicker{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--c-primary)}.cert-doc h4{font-size:24px;letter-spacing:-0.02em;margin-top:10px}.cert-doc .cert-holder{font-size:13.5px;color:var(--c-muted);margin-top:6px}.cert-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}.cert-field .k{font-size:11px;color:var(--c-faint);margin-bottom:3px}.cert-field .v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}.cert-medal{width:52px;height:52px;border-radius:50%;flex-shrink:0;background:var(--c-primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft)}.cert-doc.on-dark-card{background:#1c1d1f;box-shadow:0 24px 60px rgba(0,0,0,.4)}.cert-doc.on-dark-card .cert-doc__frame{border-color:hsla(0,0%,100%,.14)}.cert-doc.on-dark-card h4{color:#fff}.cert-doc.on-dark-card .cert-kicker{color:#6fa8ff}.cert-doc.on-dark-card .cert-holder{color:var(--c-on-dark-muted)}.cert-doc.on-dark-card .cert-field .k{color:#7c8592}.cert-doc.on-dark-card .cert-field .v{color:#fff}.accordion{border-top:1px solid var(--c-border)}.accordion-item{border-bottom:1px solid var(--c-border)}.accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;font-size:17px;font-weight:600;color:var(--c-ink);letter-spacing:-0.01em;text-align:left;min-height:44px}.accordion-trigger .acc-icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--c-soft);color:var(--c-ink);display:inline-flex;align-items:center;justify-content:center;transition:transform .25s var(--ease-out),background-color .2s var(--ease-out)}.accordion-item.is-open .acc-icon{transform:rotate(180deg);background:var(--c-primary-tint);color:var(--c-primary-deep)}.accordion-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease-in-out);color:var(--c-muted)}.accordion-content>.acc-inner{overflow:hidden;min-height:0}.acc-inner>*{padding:0 4px 22px;max-width:68ch}.accordion-item.is-open .accordion-content{grid-template-rows:1fr}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--c-border);margin-bottom:36px;overflow-x:auto}.tab{padding:13px 18px;font-size:15px;font-weight:500;color:var(--c-muted);border-bottom:2px solid rgba(0,0,0,0);margin-bottom:-1px;white-space:nowrap;min-height:44px;transition:color .15s var(--ease-out)}.tab:hover{color:var(--c-ink)}.tab.is-active{color:var(--c-ink);font-weight:600;border-bottom-color:var(--c-primary)}.tab-panel{display:none}.tab-panel.is-active{display:block}.filter-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.filter-chips{display:flex;gap:8px;flex-wrap:wrap}.filter-chip{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:var(--radius-pill);background:#fff;box-shadow:inset 0 0 0 1px var(--c-border);font-size:14px;font-weight:500;color:var(--c-ink-2);transition:box-shadow .15s var(--ease-out),background-color .15s var(--ease-out),color .15s var(--ease-out)}.filter-chip:hover{box-shadow:inset 0 0 0 1px var(--c-border-strong)}.filter-chip:active{transform:scale(0.96)}.filter-chip.is-active{background:var(--c-ink);color:#fff;box-shadow:none}.search{display:flex;align-items:center;gap:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--c-border);border-radius:var(--radius-pill);padding:0 18px;height:48px;flex:1;min-width:240px;max-width:460px;transition:box-shadow .15s var(--ease-out)}.search:focus-within{box-shadow:inset 0 0 0 2px var(--c-primary)}.search input{border:0;outline:none;flex:1;font-size:14.5px;background:rgba(0,0,0,0);color:var(--c-ink)}.search input::placeholder{color:var(--c-faint)}.search svg{color:var(--c-faint);flex-shrink:0}.progress{display:flex;flex-direction:column;gap:7px;width:100%}.progress-label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--c-muted);font-weight:500;font-variant-numeric:tabular-nums}.progress-bar{height:6px;width:100%;background:var(--c-soft);border-radius:var(--radius-pill);overflow:hidden}.on-dark .progress-bar,.band-dark .progress-bar{background:hsla(0,0%,100%,.14)}.progress-fill{display:block;height:100%;width:var(--p, 0%);background:var(--c-primary);border-radius:var(--radius-pill);transform-origin:0 50%}.progress-fill.is-green{background:var(--c-green)}.band-dark .progress-fill.is-green{background:var(--c-green-bright)}@media(prefers-reduced-motion: no-preference){body.anim .progress-fill{transform:scaleX(0);transition:transform .9s var(--ease-out);transition-delay:var(--pd, 0s)}body.anim .progress-fill.is-in{transform:scaleX(1)}}@media(prefers-reduced-motion: no-preference){body.anim .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);transition-delay:var(--d, 0s)}body.anim .reveal.is-in{opacity:1;transform:none}}.course-shell{display:grid;grid-template-columns:320px 1fr;min-height:calc(100vh - var(--nav-h))}.lesson-sidebar{border-right:1px solid var(--c-border);padding:32px 24px;background:#fff;overflow-y:auto}.lesson-sidebar .ls-kicker{font-size:12.5px;font-weight:600;color:var(--c-faint);margin:0 0 6px}.lesson-sidebar .course-title{font-size:18px;font-weight:700;margin:0 0 18px;line-height:1.3;letter-spacing:-0.015em}.lesson-list{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:2px}.lesson-trigger{width:100%;text-align:left;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:9px;font-size:14px;font-weight:500;color:var(--c-ink-2);min-height:44px;transition:background-color .15s var(--ease-out),color .15s var(--ease-out)}.lesson-trigger:hover{background:var(--c-soft);color:var(--c-ink)}.lesson-trigger .status{width:17px;height:17px;border-radius:50%;border:2px solid var(--c-border-strong);flex-shrink:0;position:relative}.lesson-trigger.is-done .status{background:var(--c-primary);border-color:var(--c-primary)}.lesson-trigger.is-done .status::after{content:"";position:absolute;left:3.5px;top:1px;width:3.5px;height:7px;border:1.8px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}.lesson-item.is-active .lesson-trigger{background:var(--c-primary-tint);color:var(--c-primary-deep);font-weight:600}.lesson-time{margin-left:auto;font-size:12px;color:var(--c-faint);font-variant-numeric:tabular-nums}.course-content{padding:44px 56px;background:var(--c-soft)}.course-content-inner{max-width:880px;margin:0 auto}.video-frame{aspect-ratio:16/9;border-radius:var(--radius-card);background:var(--c-dark);position:relative;overflow:hidden;margin-bottom:24px;box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;color:hsla(0,0%,100%,.55)}.video-frame .play{width:74px;height:74px;border-radius:50%;background:hsla(0,0%,100%,.94);color:var(--c-ink);display:flex;align-items:center;justify-content:center;padding-left:5px;transition:transform .2s var(--ease-out),background-color .2s var(--ease-out)}.video-frame .play:active{transform:scale(0.94)}@media(hover: hover)and (pointer: fine){.video-frame .play:hover{transform:scale(1.05);background:#fff}}.video-time{position:absolute;bottom:12px;left:16px;color:#fff;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}.lesson-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;background:#fff;border-radius:var(--radius-ui);box-shadow:var(--shadow-soft);margin-top:24px;flex-wrap:wrap}.prose{max-width:68ch}.prose p{margin:0 0 16px;color:var(--c-ink-2);line-height:1.7}.prose h4{margin:28px 0 12px}.prose ul{margin:0 0 16px;padding-left:22px;color:var(--c-ink-2)}.prose li{margin-bottom:6px}.checklist{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-soft);overflow:hidden}.checklist-header{padding:24px 28px 20px;border-bottom:1px solid var(--c-border)}.checklist-items{padding:6px 0}.checklist-item{display:flex;align-items:center;gap:16px;padding:13px 28px}.checklist-item+.checklist-item{border-top:1px solid var(--c-border)}.checklist-check{width:22px;height:22px;flex-shrink:0;border-radius:7px;border:2px solid var(--c-border-strong);position:relative;min-width:22px;transition:background-color .18s var(--ease-out),border-color .18s var(--ease-out),transform .18s var(--ease-out)}.checklist-check:active{transform:scale(0.9)}.checklist-check.is-checked{background:var(--c-primary);border-color:var(--c-primary)}.checklist-check.is-checked::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}.checklist-text{flex:1;font-size:15px}.checklist-item.is-done .checklist-text{color:var(--c-faint);text-decoration:line-through}.profile-header{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:36px 40px;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-soft)}.profile-avatar{width:84px;height:84px;border-radius:50%;background:var(--c-primary);color:#fff;font-weight:700;font-size:30px;display:flex;align-items:center;justify-content:center}.empty-state{grid-column:1/-1;padding:56px 24px;text-align:center;border-radius:var(--radius-card);background:var(--c-soft);color:var(--c-muted)}.empty-state h4,.empty-state h3{color:var(--c-ink);margin-bottom:8px}.empty-state svg{margin:0 auto 16px;color:var(--c-faint)}.skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg, var(--c-soft) 25%, #ECEEF3 50%, var(--c-soft) 75%);background-size:200% 100%}@media(prefers-reduced-motion: no-preference){.skeleton{animation:shimmer 1.4s linear infinite}}@keyframes shimmer{to{background-position:-200% 0}}.site-footer{background:var(--c-canvas);border-top:1px solid var(--c-border);padding:64px 0 32px;color:var(--c-ink)}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}.footer-col__title{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--c-faint);margin:0 0 16px}
.breadcrumbs{border-bottom:1px solid var(--c-border);background:var(--c-canvas)}
.breadcrumbs__list{list-style:none;margin:0;padding:12px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--c-muted)}
.breadcrumbs__item{display:flex;align-items:center;gap:8px;min-width:0}
.breadcrumbs__item:not(:last-child)::after{content:"\203A";color:var(--c-faint)}
.breadcrumbs a{color:var(--c-muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--c-link);text-decoration:underline}
.breadcrumbs [aria-current="page"]{color:var(--c-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60ch}.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.site-footer a{color:var(--c-muted);font-size:14px;transition:color .15s var(--ease-out)}.site-footer a:hover{color:var(--c-link)}.footer-note{margin-top:16px;max-width:320px;font-size:14px;color:var(--c-muted);line-height:1.6}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--c-border);font-size:13px;color:var(--c-faint);flex-wrap:wrap}.mt-xs{margin-top:var(--s-xs)}.mt-sm{margin-top:var(--s-sm)}.mt-md{margin-top:var(--s-base)}.mt-lg{margin-top:var(--s-lg)}.mt-xl{margin-top:var(--s-xl)}.mt-xxl{margin-top:var(--s-xxl)}.mb-sm{margin-bottom:var(--s-sm)}.mb-md{margin-bottom:var(--s-base)}.mb-lg{margin-bottom:var(--s-lg)}.mb-xl{margin-bottom:var(--s-xl)}.text-center{text-align:center}.hidden{display:none !important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.hero-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--c-soft);box-shadow:var(--shadow-card)}.hero-photo>img{width:100%;height:100%;object-fit:cover;display:block}.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(18, 18, 18, 0) 55%, rgba(18, 18, 18, 0.28) 100%)}.hero-card{position:absolute;left:-20px;bottom:30px;z-index:2;width:234px;background:#fff;border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-card)}.hero-card .hc-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}.hero-card .hc-ic{width:30px;height:30px;border-radius:9px;flex-shrink:0;background:var(--c-primary);color:#fff;display:flex;align-items:center;justify-content:center}.hero-card .hc-title{font-size:13px;font-weight:600;line-height:1.25}.hero-card .progress-label{font-size:12px}.hero-chip{position:absolute;top:18px;right:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;background:hsla(0,0%,100%,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-pill);padding:8px 14px 8px 10px;font-size:12.5px;font-weight:600;color:var(--c-ink);box-shadow:var(--shadow-soft)}.hero-chip .hc-dot{width:8px;height:8px;border-radius:50%;background:var(--c-primary)}.logo-strip{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.logo-strip .ls-label{font-size:13.5px;color:var(--c-muted);font-weight:500;max-width:15ch}.logo-strip .ls-logos{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.logo-tile{width:46px;height:46px;border-radius:12px;background:#fff;box-shadow:var(--shadow-soft);display:flex;align-items:center;justify-content:center}.logo-tile img{width:28px;height:28px;object-fit:contain}.card-thumb.is-shot{padding:0;align-items:stretch;overflow:hidden}.card-thumb.is-shot .card-shot{position:absolute;inset:0;width:100%;height:100%;z-index:0;object-fit:cover;object-position:center;display:block}.card-thumb.is-shot::before{content:"";position:absolute;inset:0 0 auto 0;height:60px;z-index:1;pointer-events:none;background:linear-gradient(180deg, rgba(18, 18, 18, 0.14), transparent)}.card-thumb-tag,.card-thumb-time{z-index:2}.card.is-soon .card-thumb::after{content:"";position:absolute;inset:0;z-index:1;background:hsla(0,0%,100%,.34);pointer-events:none}.card-thumb.is-photo{padding:18px;overflow:hidden}.card-thumb .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.card-thumb.is-photo::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg, rgba(18, 18, 18, 0.12) 0%, rgba(18, 18, 18, 0.58) 100%)}.card-thumb.is-photo>*:not(.thumb-img){position:relative;z-index:1}.card-thumb.is-photo>.card-thumb-tag,.card-thumb.is-photo>.card-thumb-time{position:absolute}.card-thumb.is-photo .card-thumb-tag{background:hsla(0,0%,100%,.94);color:var(--c-ink)}.avatar.is-photo{background:none;overflow:hidden}.avatar.is-photo img{width:100%;height:100%;object-fit:cover}.avatar--lg{width:56px;height:56px;font-size:16px}.quote-cell.has-photo{padding:26px;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-soft)}.photo-panel{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:3/4;background:var(--c-soft);box-shadow:var(--shadow-soft)}.photo-panel img{width:100%;height:100%;object-fit:cover;display:block}.hero-media{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:#0c0c0e;box-shadow:var(--shadow-card)}.hero-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 26px 0 44px -26px rgba(0,0,0,.42)}.webinar-hero .wbn-media,.webinar-thumb .wbn-media{position:absolute;inset:0;z-index:0;overflow:hidden}.wbn-media img{width:100%;height:100%;object-fit:cover;display:block}.wbn-media::after{content:"";position:absolute;inset:0}.webinar-hero>div{position:relative;z-index:1}.webinar-hero>.webinar-date,.webinar-thumb>.webinar-date{z-index:2}.webinar-hero .wbn-media::after{background:linear-gradient(180deg, rgba(17, 34, 68, 0.42) 0%, rgba(17, 34, 68, 0.86) 100%)}.webinar-thumb .wbn-media::after{background:linear-gradient(180deg, rgba(18, 18, 18, 0.22) 0%, rgba(18, 18, 18, 0.74) 100%)}.podcast-cover.is-photo{overflow:hidden;background:var(--c-primary-tint)}.podcast-cover.is-photo img{width:100%;height:100%;object-fit:cover;display:block}.hero-rotline{display:block}.hwr{display:inline}.hwr__i{display:inline-block;overflow:hidden;vertical-align:top}.hwr__i>span{display:inline-block}body.anim .hwr__i>span{transform:translateY(122%);transition:transform .9s var(--ease-words)}body.anim .hero.is-in .hwr__i>span{transform:translateY(0)}body.anim .hero.is-revealed .hwr__i{overflow:visible}.hero-rot{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.28;color:var(--c-primary);min-height:1.28em;max-width:100%;padding-bottom:.06em}.hero-rot b{display:inline-block;font-weight:700;color:var(--c-primary);line-height:1.28;white-space:nowrap;will-change:transform}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% / var(--lm-copies, 2)))}}.logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}.lm-label{font-size:13.5px;color:var(--c-muted);font-weight:500;margin-bottom:18px}.lm-track{display:flex;width:max-content;align-items:center;animation:marquee 44s linear infinite}.lm-group{display:flex;align-items:center;gap:14px;padding-right:14px;flex:0 0 auto}.lm-logo{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:80px;padding:0 24px}.lm-logo img{max-height:38px;max-width:148px;width:auto;height:auto;object-fit:contain;display:block}@media(prefers-reduced-motion: reduce){.lm-track{animation:none !important;transform:none !important}}@media(max-width: 1024px){.hero-media{aspect-ratio:16/10;max-height:460px}}@media(max-width: 640px){.hero-media{aspect-ratio:4/3;max-height:none}}@media(max-width: 1120px){.topnav nav{display:none}.topnav.is-open nav{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:var(--nav-h);left:0;right:0;background:#fff;padding:12px 16px 16px;border-bottom:1px solid var(--c-border);box-shadow:var(--shadow-card)}.topnav.is-open nav a{padding:13px 14px}.mobile-toggle{display:inline-flex}}@media(max-width: 1024px){.grid-3,.grid-4{grid-template-columns:repeat(2, 1fr)}.footer-grid{grid-template-columns:1fr 1fr;gap:32px}.hero-grid{grid-template-columns:1fr;gap:44px}.hero-photo{aspect-ratio:16/10;max-height:460px}.photo-panel{aspect-ratio:16/10}.webinar-feature{grid-template-columns:1fr}.webinar-stack{display:grid;grid-template-columns:1fr 1fr}.stat-band{grid-template-columns:1fr 1fr}.stat-band .stat-cell:nth-child(3){border-left:0;padding-left:0}.stat-band .stat-cell:nth-child(-n+2){border-bottom:1px solid var(--c-border)}.quote-grid{grid-template-columns:1fr;gap:36px}.band-grow .step-grid{grid-template-columns:1fr;gap:24px;margin-top:40px}.course-shell{grid-template-columns:1fr}.lesson-sidebar{display:none}.course-content{padding:32px 24px}}@media(max-width: 640px){:root{--s-section: 60px;--band-radius: 20px;--band-overlap: 20px}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.webinar-stack{grid-template-columns:1fr}.stat-band{grid-template-columns:1fr 1fr}.stat-band .stat-cell{padding:22px 16px}.hero{padding:44px 0 60px}.hero-stats{display:grid;grid-template-columns:repeat(2, auto);gap:22px 36px;justify-content:start;margin-top:40px}.hero-panel .mockup>div{grid-template-columns:1fr !important}.hero-panel .mock-side{border-right:0;border-bottom:1px solid var(--c-border)}.section-header{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:28px}.cta-panel{padding:36px 28px}.band-grow{padding-left:16px;padding-right:16px}.hero-panel{padding:24px 18px 76px}.hero-float{left:16px;bottom:18px}.hero-photo{aspect-ratio:4/3;max-height:none}.hero-card{left:12px;right:12px;width:auto;bottom:16px}.logo-strip{gap:12px}.profile-header{grid-template-columns:1fr;text-align:center}.profile-header .profile-avatar{justify-self:center}.nav-right .btn-sm:first-child{display:none}}.cmap{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-soft);overflow:hidden}.cmap-head,.cmap-row{display:grid;grid-template-columns:248px 1fr 1fr 190px;gap:14px;align-items:center;padding:12px 22px}.cmap-head{padding-top:20px;padding-bottom:14px}.cmap-hcol{font-size:12.5px;font-weight:600;color:var(--c-muted)}.cmap-hcol:first-child{color:var(--c-faint)}.cmap-row{border-top:1px solid var(--c-border)}.cmap-prod{display:flex;align-items:center;gap:12px;min-width:0}.cmap-ic{flex-shrink:0;color:var(--c-primary);display:inline-flex}.cmap-ic svg{width:24px;height:24px}.cmap-prod.is-connect .cmap-ic{color:var(--c-purple)}.cmap-prod-name{font-size:14.5px;font-weight:600;letter-spacing:-0.01em;line-height:1.25;min-width:0}.cmap-prod-meta{display:block;font-size:12px;font-weight:500;color:var(--c-faint);margin-top:2px}.cmap-cell{min-height:56px;border-radius:var(--radius-ui);padding:9px 14px;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--c-ink-2);background:#fff;box-shadow:inset 0 0 0 1px var(--c-border);transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background-color .18s var(--ease-out)}.cmap-cg{flex-shrink:0;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--c-primary)}.cmap-cg svg{width:18px;height:18px}.cmap-cl{min-width:0;line-height:1.3}.cmap-cell.is-done{background:var(--c-primary);color:#fff;box-shadow:none}.cmap-cell.is-done .cmap-cg{color:#fff}.cmap-cell.is-locked,.cmap-cell.is-prod{background:var(--c-soft);color:var(--c-muted);box-shadow:none}.cmap-cell.is-locked .cmap-cg,.cmap-cell.is-prod .cmap-cg{color:var(--c-faint)}.cmap-mini{margin-left:auto;width:64px;height:5px;border-radius:var(--radius-pill);background:var(--c-soft);overflow:hidden;flex-shrink:0}.cmap-mini span{display:block;height:100%;width:var(--p, 0%);background:var(--c-primary);border-radius:var(--radius-pill)}a.cmap-cell:active{transform:scale(0.99)}@media(hover: hover)and (pointer: fine){a.cmap-cell:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}a.cmap-cell.is-done:hover{box-shadow:var(--shadow-lift)}}.cmap-cell.is-hot{box-shadow:inset 0 0 0 2px var(--c-primary)}.cmap-cell.is-done.is-hot{box-shadow:inset 0 0 0 2px #fff}.cmap-spec.is-hot .cmap-medal{box-shadow:0 0 0 3px var(--c-primary-tint)}.cmap-spec{display:flex;align-items:center;gap:10px;position:relative}.cmap-spec::before{content:"";position:absolute;left:-14px;top:50%;width:14px;height:1px;background:var(--c-border-strong)}.cmap-medal{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--c-soft);color:var(--c-faint);transition:box-shadow .18s var(--ease-out)}.cmap-medal svg{width:17px;height:17px}.cmap-spec-name{font-size:12.5px;font-weight:600;color:var(--c-muted);line-height:1.25}.cmap-spec.is-earned .cmap-medal{background:var(--c-primary);color:#fff}.cmap-spec.is-earned .cmap-spec-name{color:var(--c-ink)}.cmap-foot{border-top:1px solid var(--c-border-strong);padding:4px 22px 10px}.cmap-comp{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--c-border)}.cmap-comp:first-child{border-top:0}.cmap-comp .cmap-medal{width:42px;height:42px}.cmap-comp .cmap-medal svg{width:21px;height:21px}.cmap-comp.is-earned .cmap-medal{background:var(--c-primary);color:#fff}.cmap-comp-txt strong{display:block;font-size:15.5px;font-weight:600;letter-spacing:-0.01em}.cmap-comp-txt span{font-size:13px;color:var(--c-muted)}.cmap-comp-side{min-width:190px}.cmap-comp-count{font-size:13px;color:var(--c-faint);font-variant-numeric:tabular-nums;white-space:nowrap}.cmap-next{margin:2px 22px 0;padding:14px 16px;background:var(--c-primary-tint);border-radius:var(--radius-ui);font-size:13.5px;color:var(--c-primary-deep);display:flex;gap:10px;align-items:flex-start}.cmap-next svg{flex-shrink:0;margin-top:1px}@media(max-width: 1024px){.cmap-head{display:none}.cmap-row{grid-template-columns:1fr 1fr;grid-template-areas:"prod prod" "basic adv" "spec spec";gap:10px;padding:16px 18px}.cmap-prod{grid-area:prod}.cmap-cell[data-lvl=basic]{grid-area:basic}.cmap-cell[data-lvl=adv]{grid-area:adv}.cmap-spec{grid-area:spec;padding-top:2px}.cmap-spec::before{display:none}.cmap-lvltag{display:inline;margin-right:4px;color:var(--c-faint)}}@media(min-width: 1025px){.cmap-lvltag{display:none}}@media(max-width: 640px){.cmap-comp{grid-template-columns:42px 1fr}.cmap-comp-side{grid-column:1/-1;padding-left:58px}}.tier-row{display:grid;grid-template-columns:60px 1fr auto;gap:22px;align-items:start;padding:28px 0;border-top:1px solid var(--c-border)}.tier-row:first-child{border-top:0}.tier-num{font-size:34px;font-weight:700;color:var(--c-primary);font-variant-numeric:tabular-nums;letter-spacing:-0.02em;line-height:1}.tier-row h3{font-size:21px;letter-spacing:-0.015em}.tier-row>div>p{color:var(--c-muted);font-size:14.5px;margin-top:6px;max-width:62ch}.tier-count{font-size:13px;color:var(--c-faint);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}.tier-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}@media(max-width: 640px){.tier-row{grid-template-columns:40px 1fr}.tier-count{grid-column:1/-1;text-align:left;margin-top:2px}}@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}.ply-crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--c-faint);margin-bottom:14px;flex-wrap:wrap}.ply-crumbs a{color:var(--c-muted)}.ply-crumbs a:hover{color:var(--c-link)}.ply-embed{position:relative;aspect-ratio:16/9;border-radius:var(--radius-card);overflow:hidden;background:#000;box-shadow:var(--shadow-card);display:block}.ply-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.ply-facade{cursor:pointer}.ply-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ply-playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:74px;height:74px;border-radius:50%;background:hsla(0,0%,100%,.94);color:var(--c-ink);display:flex;align-items:center;justify-content:center;padding-left:4px;transition:transform .2s var(--ease-out),background-color .2s var(--ease-out)}.ply-facade:hover .ply-playbtn{transform:translate(-50%, -50%) scale(1.05);background:#fff}.ply-embed.is-playing .ply-poster,.ply-embed.is-playing .ply-playbtn{display:none}.ply-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 18px;font-size:13.5px;color:var(--c-muted);font-variant-numeric:tabular-nums}.ply-fill-track{height:6px;background:var(--c-soft);border-radius:999px;overflow:hidden}.ply-fill{display:block;height:100%;background:var(--c-primary);border-radius:999px;transform-origin:0 50%;transform:scaleX(var(--p, 0));transition:transform .35s var(--ease-out)}.lesson-trigger .status.is-current{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-tint)}.ply-note{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--c-faint)}.cert-note{display:flex;gap:12px;align-items:center;padding:14px 18px;background:var(--c-primary-tint);border-radius:var(--radius-ui);margin-top:22px;font-size:14px}.cert-note a{color:var(--c-primary-deep);font-weight:600}.prog-list{list-style:none;padding:0;margin:16px 0 0}.prog-list li{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--c-border);font-size:14.5px}.prog-list li .pn{color:var(--c-faint);font-variant-numeric:tabular-nums;min-width:22px}@media(max-width: 1024px){.ply-embed{border-radius:12px}}.cat-toolbar{display:flex;flex-direction:column;gap:16px;margin-bottom:36px}.cat-row{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.cat-count{font-size:14px;color:var(--c-muted);font-variant-numeric:tabular-nums;white-space:nowrap}.authcard{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-soft);padding:36px 32px}.authform{display:flex;flex-direction:column;gap:14px;margin-top:20px}.authform label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--c-ink-2)}.authform input{height:46px;padding:0 14px;border-radius:var(--radius-ui);background:#fff;box-shadow:inset 0 0 0 1px var(--c-border);font-size:15px;color:var(--c-ink);transition:box-shadow .15s var(--ease-out)}.authform input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--c-primary)}.authform .btn{margin-top:6px}.consent-fields{display:flex;flex-direction:column;gap:12px}.consent{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:400;line-height:1.45;color:var(--c-ink-2);cursor:pointer}.authform label.consent{flex-direction:row}.consent input[type=checkbox],.consent input[type=radio]{flex:none;width:18px;height:18px;margin:2px 0 0;padding:0;box-shadow:none;background:#fff;accent-color:var(--c-primary)}.consent a{color:var(--c-link);font-weight:600;text-decoration:underline}.choice-field{border:1px solid var(--c-border);border-radius:var(--radius-ui);padding:12px 14px 14px;margin:0;min-width:0;background:var(--c-soft)}.choice-field legend{font-size:13px;font-weight:600;color:var(--c-ink-2);padding:0 6px;margin-left:-6px}.choice-field .consent-fields{margin-top:4px}.auth-error{background:#fdecec;color:#b42318;border-radius:var(--radius-ui);padding:12px 16px;font-size:14px;margin-top:16px}.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--c-faint);font-size:13px;font-weight:600}.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--c-border)}.social-block{display:flex;flex-direction:column;gap:10px}.btn-social{width:100%}.btn-social .soc-ic{width:20px;height:20px;flex:none}.quiz-q{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-soft);padding:22px 24px;margin-bottom:16px}.quiz-q__head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:16px;font-weight:600;letter-spacing:-0.01em}.quiz-opt{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-ui);cursor:pointer;font-size:14.5px;box-shadow:inset 0 0 0 1px var(--c-border);margin-top:8px;transition:box-shadow .15s var(--ease-out)}.quiz-opt:hover{box-shadow:inset 0 0 0 1px var(--c-border-strong)}.quiz-opt input{accent-color:var(--c-primary);width:18px;height:18px;flex-shrink:0}.quiz-text{width:100%;padding:12px 14px;border-radius:var(--radius-ui);box-shadow:inset 0 0 0 1px var(--c-border);font-size:15px;margin-top:8px;background:#fff}.quiz-text:focus{outline:none;box-shadow:inset 0 0 0 2px var(--c-primary)}.quiz-result{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:var(--radius-card);margin-top:24px;box-shadow:var(--shadow-soft);background:#fff}.quiz-result__pct{font-size:40px;font-weight:700;letter-spacing:-0.02em;line-height:1}.quiz-result.is-pass .quiz-result__pct{color:var(--c-primary)}.quiz-result.is-fail .quiz-result__pct{color:var(--c-faint)}.quiz-review{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:6px}.quiz-review li{padding:8px 12px;border-radius:var(--radius-ui);background:var(--c-soft);font-size:14px}.quiz-review li.is-correct{background:var(--c-primary-tint);color:var(--c-primary-deep);font-weight:600}.step-light{border-top:1px solid var(--c-border);padding-top:22px}.step-light .step-num{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--c-primary);font-variant-numeric:tabular-nums}.step-light h4{margin:10px 0 8px}.step-light p{color:var(--c-muted);font-size:14.5px;line-height:1.6}.check-list{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}.check-list li{display:flex;gap:12px;align-items:center}.check-list .ck{width:24px;height:24px;border-radius:50%;flex-shrink:0;background:var(--c-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center}.verify-card{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-soft);padding:22px 26px;margin-top:32px}.verify-card .k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-faint)}.verify-card .v{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em;margin-top:3px}.verify-status{display:inline-flex;align-items:center;gap:8px;background:var(--c-primary-tint);color:#1450b8;border-radius:var(--radius-pill);padding:8px 14px;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}.cert-col{padding-top:4px}.cert-col h3{font-size:22px;margin:0 0 8px;color:#fff;letter-spacing:-0.015em}.cert-col p{color:hsla(0,0%,100%,.82);font-size:14.5px;line-height:1.6}.cert-badge{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:hsla(0,0%,100%,.16);color:#fff;margin-bottom:16px}.cert-badge svg{width:24px;height:24px}.cert-auto{margin-top:14px;font-size:12.5px;font-weight:600;color:hsla(0,0%,100%,.92);display:inline-flex;align-items:center;gap:6px}
/* === Lesson content blocks (authored in the 3-tab block editor) === */
.prose .lesson-figure{margin:1.5rem 0}
.prose .lesson-figure img{display:block;width:100%;height:auto;border-radius:var(--radius-ui);margin:0}
.prose .lesson-figure figcaption,.prose .lesson-video figcaption{margin-top:8px;font-size:13px;color:var(--c-muted);text-align:center}
.prose .lesson-video{position:relative;margin:1.5rem 0}
.prose .lesson-video__facade{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--radius-ui);overflow:hidden;background:#000;text-decoration:none}
.prose .lesson-video__poster{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0}
.prose .lesson-video__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.prose .lesson-video__facade:hover .lesson-video__play{background:var(--c-primary)}
.prose .lesson-video__facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose .lesson-file{margin:1rem 0}
.prose .lesson-file a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--radius-ui);background:var(--c-primary-tint);color:var(--c-primary-deep);font-weight:600;text-decoration:none}
.prose .lesson-file a:hover{background:var(--c-primary-soft)}
.prose .lesson-file a::before{content:"\2193";font-weight:700}
.prose .lesson-callout{--cc:#1a63e6;--cc-bg:#EAF2FF;--cc-ico:"i";position:relative;margin:1.5rem 0;padding:16px 18px 16px 52px;border-radius:var(--radius-ui);background:var(--cc-bg);border-left:3px solid var(--cc);color:var(--c-ink-2)}
.prose .lesson-callout::before{content:var(--cc-ico);position:absolute;left:16px;top:16px;width:24px;height:24px;border-radius:999px;background:var(--cc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;line-height:1;font-family:var(--font-sans)}
.prose .lesson-callout>:last-child{margin-bottom:0}
.prose .lesson-callout--tip{--cc:#1a63e6;--cc-bg:#EAF2FF;--cc-ico:"\2726"}
.prose .lesson-callout--note{--cc:#5D6470;--cc-bg:#F4F5F7;--cc-ico:"i"}
.prose .lesson-callout--important{--cc:#c2410c;--cc-bg:#FFF4ED;--cc-ico:"!"}
.prose .lesson-callout--success{--cc:#00885a;--cc-bg:#E7F9F0;--cc-ico:"\2713"}
.prose .lesson-steps{list-style:none;counter-reset:step;margin:1.5rem 0;padding:0}
.prose .lesson-steps li{counter-increment:step;position:relative;padding-left:46px;margin-bottom:14px;min-height:32px}
.prose .lesson-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:999px;background:var(--c-primary);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.prose .lesson-card{margin:1.5rem 0;padding:20px 22px;border-radius:var(--radius-card);border:1px solid var(--c-border);background:var(--c-canvas);box-shadow:var(--shadow-card)}
.prose .lesson-card__title{margin:0 0 8px;font-size:1.125rem}
.prose .lesson-card__body>:first-child{margin-top:0}
.prose .lesson-card__body>:last-child{margin-bottom:0}
.prose .lesson-stat{margin:1.5rem 0;padding:18px 20px;border-radius:var(--radius-ui);background:var(--c-primary-tint);display:flex;flex-direction:column;gap:4px}
.prose .lesson-stat__num{font-size:2.25rem;font-weight:800;color:var(--c-primary-deep);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prose .lesson-stat__label{font-size:.95rem;color:var(--c-ink-2)}
.prose .lesson-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:1.5rem 0}
.prose .lesson-cols__col>:first-child{margin-top:0}
.prose .lesson-cols__col>:last-child{margin-bottom:0}
.prose .lesson-cta{margin:1.5rem 0}
.prose .lesson-cta a{text-decoration:none}
.prose .lesson-cta a.btn-primary,.prose .lesson-cta .btn.btn-primary{color:var(--c-on-primary)}
.prose .lesson-faq{margin:1rem 0;border:1px solid var(--c-border);border-radius:var(--radius-ui);overflow:hidden;background:var(--c-canvas)}
.prose .lesson-faq summary{cursor:pointer;padding:14px 44px 14px 18px;font-weight:600;list-style:none;position:relative}
.prose .lesson-faq summary::-webkit-details-marker{display:none}
.prose .lesson-faq summary::after{content:"+";position:absolute;right:16px;top:11px;font-size:20px;color:var(--c-muted)}
.prose .lesson-faq[open] summary::after{content:"\2212"}
.prose .lesson-faq__a{padding:0 18px 14px;color:var(--c-ink-2)}
.prose .lesson-faq__a>:last-child{margin-bottom:0}
.prose .lesson-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}
.prose .lesson-table th,.prose .lesson-table td{border:1px solid var(--c-border);padding:10px 12px;text-align:left;vertical-align:top}
.prose .lesson-table thead th{background:var(--c-soft);font-weight:700}

/* =============================================================
   Base Academy — design foundation
   Rebuilt to the Base design system (Skywave Blue, Inter, white
   canvas, Dark Pro for certificates) + base-web-design craft rules:
   elevation cards, tinted shadows, gated hovers, transform-only
   motion, reduced-motion net, tabular figures.
   ============================================================= */

/* Inter — self-hosted (no CDN); one variable file covers 400/500/600/700 + Polish */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2');
}

:root {
  /* Brand */
  --c-primary: #2F7DFF;
  --c-primary-deep: #004DCE;
  --c-primary-soft: #B3CEFB;
  --c-primary-tint: #EAF2FF;
  --c-link: #1B5FD8;            /* small-text links — AA on white */

  /* Surfaces */
  --c-canvas: #FFFFFF;
  --c-dark: #121212;
  --c-soft: #F4F5F7;
  --c-border: #E7EAF0;
  --c-border-strong: #D5DAE3;

  /* Text */
  --c-ink: #121212;
  --c-ink-2: #3A4250;           /* lead paragraphs */
  --c-muted: #5D6470;           /* secondary copy */
  --c-faint: #7C8592;           /* captions, meta only */
  --c-on-primary: #FFFFFF;
  --c-on-dark: #FFFFFF;
  --c-on-dark-muted: #A7AEBB;

  /* Accents — one per block, ≤20% of composition */
  --c-yellow: #FFE303;
  --c-green: #00AA67;
  --c-green-bright: #1FFFA1;    /* Dark Pro surfaces only */
  --c-purple: #8E2DEA;          /* Base Connect content only */
  --c-purple-deep: #6800CB;
  --c-purple-tint: #F3E6FF;     /* Base Connect pills + thumbs (was a repeated literal) */

  /* Gradient — banner/band surfaces only, never under body copy */
  --grad-sky: linear-gradient(135deg, #2F7DFF 0%, #004DCE 100%);
  /* Base Week background field, from assets/Base Week 2026 Gradient BG clean. */
  --grad-kv: linear-gradient(158deg, #12327A 0%, #0C2050 32%, #0A1626 68%, #081116 100%);

  /* Shadows — tinted to the brand's blue-ink hue (house tokens) */
  --shadow-card: 0 24px 60px rgba(17, 34, 68, .10);
  --shadow-soft: 0 12px 30px rgba(17, 34, 68, .07);
  --shadow-lift: 0 18px 44px rgba(17, 34, 68, .13);
  --shadow-seam: 0 -18px 44px rgba(17, 34, 68, .08);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  /* Geometry */
  --radius-card: 16px;
  --radius-ui: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --band-radius: 28px;
  --band-overlap: 28px;

  /* Spacing (4px base) */
  --s-xxs: 4px; --s-xs: 8px; --s-sm: 12px; --s-base: 16px;
  --s-md: 20px; --s-lg: 24px; --s-xl: 32px; --s-xxl: 48px;
  --s-section: 88px;

  --container: 1200px;
  --nav-h: 68px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Deep links (courses.html#katalog) must clear the sticky nav. */
.scroll-anchor { scroll-margin-top: calc(var(--nav-h) + 12px); }
body {
  font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
::selection { background: var(--c-primary); color: #fff; }

/* Keyboard focus */
:where(a, button, input, select, textarea, [tabindex]):focus { outline: none; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 6px;
}
.on-dark :where(a, button):focus-visible { outline-color: #fff; }

/* Skip link */
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--c-ink); color: #fff;
  padding: 10px 18px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600;
  transition: top .2s var(--ease-out);
}
.skip-link:focus-visible { top: 12px; }

/* ---------- Typography ---------- */
/* Editorial single-colour headings: sections are Medium 500; the hero h1 is the ONE bold exception. */
h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: clamp(33px, 3.6vw, 54px); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-size: clamp(27px, 3.3vw, 43px); }
h3 { font-size: clamp(22px, 2.4vw, 29px); }
h4 { font-size: 20px; font-weight: 600; }
h5 { font-size: 17px; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: 18px; line-height: 1.65; color: var(--c-ink-2); max-width: 62ch; }
.muted { color: var(--c-muted); }
.faint { color: var(--c-faint); }
.text-sm { font-size: 14px; }
.text-xs { font-size: 13px; }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* Headings are ONE uniform colour — the two-tone / chromatic-word heading is retired.
   .hl now inherits: there is no sanctioned chromatic word left in a heading. */
.hl { color: inherit; }
.on-dark .hl { color: inherit; }
.hl-yellow {
  background: var(--c-yellow); color: var(--c-ink);
  padding: 0 .14em; border-radius: 6px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--s-section) 0; }
.section-tight { padding: 56px 0; }
/* Soft tonal band: card-like rounded top that peeks over the section above
   (deck-of-cards band model). Top corners only, square bottom so the next
   section connects flush; extra top padding compensates for the overlap. */
.section-soft {
  background: var(--c-soft);
  position: relative;
  z-index: 1;
  border-top-left-radius: var(--band-radius);
  border-top-right-radius: var(--band-radius);
  margin-top: calc(-1 * var(--band-overlap));
  padding-top: calc(var(--s-section) + var(--band-overlap));
}

.grid { display: grid; gap: var(--s-lg); }
/* minmax(0, 1fr), not a bare 1fr: an fr track's automatic minimum is its
   content's min-content size, so one wide child (a .podcast-row, a long
   unbreakable title) stretches the grid — and with it the page — past the
   viewport. That is what left a white gutter beside the coloured bands
   between 641px and ~900px. Capping every track at an equal share keeps the
   overflow inside the cell, where it is fixed locally. */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The trailing link belongs to the HEADING, not to the last line of the lead.
   With flex-end it baseline-aligned to a two-line lead and read detached. */
.section-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 40px;
}
.section-header > .btn-text { margin-top: 4px; flex-shrink: 0; }
.section-header .sh-left { max-width: 720px; }
.section-header h2 { margin-bottom: 10px; }
.section-header .lead { font-size: 17px; }

/* ---------- Wordmark: the official "base. akademia" lockup ----------
   Source: Brand Assets/base_akademia.svg. The four "base" letter paths
   follow currentColor (ink on the white canvas, white on Dark Pro); the
   dot and the "akademia" word keep Skywave exactly as drawn. Lockup is
   1570x164, so height drives a much wider mark than the old wordmark. */
.wordmark { display: inline-flex; align-items: center; color: var(--c-ink); }
.wordmark svg { height: 20px; width: auto; display: block; }
/* The global `svg{max-width:100%}` would let the 3-column nav grid squash the
   lockup (it letterboxed to 15px tall at 1440 and 9px at 1140). Opt out so the
   logo track can never be narrower than the mark; the nav menu collapses at
   1200px, which is where the row stops having room for it. */
.topnav .wordmark svg { max-width: none; }
.site-footer .wordmark svg { height: 24px; }
/* `.site-footer a{color:var(--c-muted)}` outranks `.wordmark`, so without this
   the footer lockup's letters render grey instead of ink. */
.site-footer .wordmark { color: var(--c-ink); }
.on-dark .wordmark { color: #fff; }

/* (Removed .badge-label — the uppercase tracked eyebrow with a leading dot. Sections lead with the heading.) */

/* ---------- Pills & chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
}
.pill-blue { background: var(--c-primary-tint); color: #1450B8; }
.pill-green { background: var(--c-primary-tint); color: #1450B8; }  /* de-pastelled: status/value = Skywave (single accent) */
.pill-yellow { background: var(--c-soft); color: var(--c-ink-2); }  /* de-pastelled: quiet neutral, not candy */
.pill-purple { background: var(--c-purple-tint); color: #6912B8; }  /* Base Connect only — the one sanctioned accent */
.pill-dark { background: var(--c-ink); color: #fff; }
.pill-outline { box-shadow: inset 0 0 0 1px var(--c-border-strong); color: var(--c-muted); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--c-soft); color: var(--c-ink);
  font-size: 13.5px; font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out),
              box-shadow .18s var(--ease-out), transform .18s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-sm { height: 44px; padding: 0 18px; font-size: 14px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 16px; }

.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-primary-deep); }
.btn-secondary { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-border-strong); }
.btn-secondary:hover { background: var(--c-soft); }
.btn-dark { background: var(--c-ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-on-dark { background: #fff; color: var(--c-ink); }
.btn-on-dark:hover { background: #E9EDF5; }
/* "Zapisz się bezpłatnie" — the one CTA carrying the event's green.
   Its OWN class rather than a change to .btn-on-dark, which eight other
   pages share (home, /kursy, /certyfikaty, /webinary, /sciezki, /podcasty).
   The label is WHITE by explicit request (2026-09-13). Measured, not
   assumed: white is 3.02:1 on #00AA67 and 3.63:1 on the #009A5D hover, so
   this 16px label does NOT meet WCAG AA (4.5:1); the ink it carried before
   was 6.20:1. Do not quietly swap the colour back — the green and the white
   are both decisions. Darkening the green is what buys the contrast back. */
.btn-signup { background: var(--c-green); color: var(--c-on-primary); }
.btn-signup:hover { background: #009A5D; }
.btn-ghost-dark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.btn-ghost-dark:hover { background: rgba(255,255,255,.08); }

.btn-text {
  display: inline-flex; align-items: center; gap: 6px;
  height: auto; padding: 6px 0;
  color: var(--c-link); font-weight: 600; font-size: 15px;
}
.btn-text svg { transition: transform .18s var(--ease-out); }
.btn-text:hover { color: var(--c-primary-deep); }

@media (hover: hover) and (pointer: fine) {
  .btn-text:hover svg { transform: translateX(3px); }
}

/* ---------- Top nav ---------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}
.topnav.is-scrolled { border-bottom-color: var(--c-border); box-shadow: 0 8px 30px rgba(17, 34, 68, .05); }
/* Over the Skywave hero the bar dissolves into the blue and the whole lockup
   goes solid white (brand treatment #3); past the hero it becomes the white
   blurred bar again. app.js toggles this from the hero's own height, NOT from
   `is-scrolled` (which fires at 4px and would flip the nav inside the hero).
   With JS off the class never lands and the nav simply stays white: the safe
   fallback, not a broken one. */
.topnav.is-over-hero {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* Fully transparent is only safe while nothing can sit under the bar — i.e. at
   rest, where the hero's own top padding (--hero-pull + 84px) keeps its content
   clear of the nav. The moment the page scrolls, the h1 and the search field
   slide up UNDER the transparent bar and collide with the white menu links. So
   from the first scrolled pixel the bar regains a backdrop — translucent
   Skywave (the top stop of --grad-sky, so the hand-off from the hero is
   invisible) plus the same blur the white bar uses, which wipes whatever
   passes beneath. Border/shadow stay off: the bar and the field share a color,
   so a hairline would draw a floating strip inside the blue. */
.topnav.is-over-hero.is-scrolled {
  background: rgba(47, 125, 255, .9);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
}
/* The Base Week hero runs --grad-kv, not --grad-sky, so the Skywave backdrop
   above would draw a bright strip across a navy field the moment the page
   scrolls. Same rule, same reason, re-derived for that field: --grad-kv's top
   stop (#12327A) composited under the flat .kv-scrim (rgba(6,12,18,.4)) gives
   rgb(13, 35, 80) — recompute this pair if either of those changes.
   Only the event chrome carries .is-event, and only its programme page has a
   .hero.is-onblue for initNavScroll to flip, so nothing else can match. */
.topnav.is-event.is-over-hero.is-scrolled { background: rgba(13, 35, 80, .9); }
.topnav.is-over-hero .wordmark svg { filter: brightness(0) invert(1); }
.topnav.is-over-hero nav a { color: rgba(255, 255, 255, .88); }
.topnav.is-over-hero nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.topnav.is-over-hero nav a[aria-current="page"] { color: #fff; }
.topnav.is-over-hero .nav-avatar { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); }
.topnav.is-over-hero .nav-avatar:hover { background: rgba(255, 255, 255, .14); }
.topnav.is-over-hero .btn-primary { background: #fff; color: var(--c-primary-deep); }
.topnav.is-over-hero .btn-primary:hover { background: #E9EDF5; }
.topnav.is-over-hero .mobile-toggle { color: #fff; }
/* A full-width notice bar (e.g. the "uzupełnij imię i nazwisko" cert-name
   prompt) between the nav and an onblue hero opts that hero OUT of the slide-up
   (see --hero-pull below), so at the top of such a page the nav sits over the
   pale bar, not over the blue. It keeps its normal white state there — JS flips
   it only once the hero has actually scrolled under it. */
.topnav.is-over-hero :where(a, button):focus-visible { outline-color: #fff; }
/* The open mobile drawer is a white panel, so it opts back out of the flip. */
.topnav.is-over-hero.is-open nav a { color: var(--c-ink-2); }
.topnav.is-over-hero.is-open nav a:hover { background: var(--c-soft); color: var(--c-ink); }
/* 3-column grid so the menu is truly centered (space-between across 3 items
   pushes it off-centre because the right actions cluster is wider than the logo). */
.topnav .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: var(--nav-h); }
.topnav .wordmark { justify-self: start; }
.topnav .nav-right { justify-self: end; }
.topnav nav { display: flex; align-items: center; gap: 2px; }
.topnav nav a {
  /* 10px side padding, not 14: the full "base. akademia" lockup needs ~191px in
     the left track and the row only has 1152px to share. */
  padding: 11px 10px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--c-ink-2);
  white-space: nowrap;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out);
}
.topnav nav a:hover { background: var(--c-soft); color: var(--c-ink); }
.topnav nav a[aria-current="page"] { color: var(--c-primary-deep); font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: 10px; }
/* "Twój profil" is an icon button now: the label was the widest thing in the
   actions cluster and the bar had no room for it. */
.nav-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--c-border-strong);
  color: var(--c-ink);
  transition: background-color .15s var(--ease-out), box-shadow .15s var(--ease-out), color .15s var(--ease-out);
}
.nav-avatar:hover { background: var(--c-soft); }
/* Shown only inside the open mobile drawer (see the <=1200px block). */
.nav-drawer-only { display: none; }
.nav-avatar:active { transform: scale(.94); }
/* ---------- Nav search (magnifier -> field) ----------
   The magnifier is a plain link to /szukaj (works with JS off); site.js turns
   it into an in-place expander and initTypeahead drives the dropdown, so this
   is the same live search as the home hero, not a second implementation.
   The field is ABSOLUTELY positioned and overlays the menu to its left: the
   nav row is a tight 3-column grid (logo / centred menu / actions) and a field
   claiming real width in the actions cluster starved the logo lockup. */
.nav-search { position: relative; display: flex; align-items: center; }
.nav-search__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--c-border-strong);
  color: var(--c-ink);
  transition: background-color .15s var(--ease-out), box-shadow .15s var(--ease-out), color .15s var(--ease-out);
}
.nav-search__toggle:hover { background: var(--c-soft); }
.nav-search__toggle:active { transform: scale(.94); }
.nav-search.is-open .nav-search__toggle { opacity: 0; visibility: hidden; }
/* `visibility`, NOT `display: none`: an invisible field is already out of the
   tab order, it can still animate, and the 40px toggle keeps its slot either
   way — so expanding the search never reflows the bar. */
.nav-search__field {
  position: absolute; right: 0; top: 50%; z-index: 1;
  width: min(360px, calc(100vw - 48px));
  opacity: 0; visibility: hidden;
  transform: translateY(-50%) scaleX(.92);
  transform-origin: right center;
  /* `visibility` must flip INSTANTLY when opening and only AFTER the fade when
     closing — hence the delay here and the 0s below. Transitioning it like the
     other two made the field still resolve to `hidden` on the frame the class
     lands, and a hidden field cannot take focus: the caret went nowhere. */
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility 0s linear .18s;
}
.nav-search.is-open .nav-search__field {
  opacity: 1; visibility: visible; transform: translateY(-50%) scaleX(1);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility 0s;
}
/* The shared .search pill is a 48px hero control with a 240px floor; in the
   bar it has to match the avatar's height and be allowed to shrink. */
.nav-search .search { width: 100%; height: 40px; min-width: 0; max-width: none; padding: 0 14px; box-shadow: inset 0 0 0 1px var(--c-border-strong); }
.nav-search .search input { font-size: 14px; }
/* Over the Skywave hero the bar goes white-on-transparent, so the toggle
   follows .nav-avatar. The OPEN field deliberately does not: it is a white
   control and keeps the normal ink, like the results panel under it. */
.topnav.is-over-hero .nav-search__toggle { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); }
.topnav.is-over-hero .nav-search__toggle:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 640px) {
  /* The avatar drops out of the phone row (the drawer carries that link), but
     search stays — it is the fastest way around the site on a small screen. */
  .nav-search__toggle { width: 36px; height: 36px; }
  /* A 327px field anchored to the toggle hangs off the left edge of a 375px
     screen (measured: left = -127px), so on phones it spans the whole bar.
     Flipping .nav-search to `static` is what does it: the field's containing
     block becomes the sticky .topnav, and left/right then inset from the bar
     rather than from the icon. Deliberately NOT done by positioning
     .topnav .container — that would also re-anchor the open mobile drawer,
     which is full-bleed today. */
  .nav-search { position: static; }
  .nav-search__field { left: 16px; right: 16px; width: auto; }
}
.mobile-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  align-items: center; justify-content: center;
  color: var(--c-ink);
}
.mobile-toggle:active { transform: scale(.94); }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 88px; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center; }
.hero-grid > * { min-width: 0; }
.mock-side { min-width: 0; }
.mock-title, .mock-lesson { overflow-wrap: anywhere; }
.mock-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 32px; }
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--c-border);
  max-width: 600px;
}
/* Number and its noun share one line: "5 kursów". Splitting them (a bare
   figure above a 13.5px grey caption that wrapped to two lines) is what made
   the old stats unreadable. .num sits on the digits only, so tabular figures
   are kept without forcing the noun into tabular spacing. */
.hero-stats .stat .n { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.hero-stats .stat .l { font-size: 15px; color: var(--c-ink-2); margin-top: 4px; line-height: 1.4; }

/* ---------- Centred hero variant (homepage) ----------
   No media column: the search field is the hero object. Measure is held by
   max-width on the h1/lead, not by a grid track. */
.hero.is-centered { padding: 96px 0; }
.hero-center { max-width: 820px; margin-inline: auto; text-align: center; }
.hero.is-centered h1, .spot-slide.is-centered h1 { max-width: 18ch; margin-inline: auto; }
.hero.is-centered .lead, .spot-slide.is-centered .lead { max-width: 58ch; margin-inline: auto; }
.hero.is-centered .hero-search, .spot-slide.is-centered .hero-search { justify-content: center; margin-bottom: 16px; }
.hero-chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center; align-items: center;
  margin-bottom: 8px;
}
.hero-chips .btn-text { margin-left: 6px; }
.hero.is-centered .hero-stats, .spot-slide.is-centered .hero-stats { max-width: 740px; margin-inline: auto; text-align: center; }

/* The official Base logo standing in for the word "Base" in the h1. Sized by
   cap height against the surrounding type, never by width. It carries its own
   dot, which doubles as the sentence period. */
.h1-logo { display: inline-block; vertical-align: baseline; line-height: 0; }
/* The logotype has almost no left side bearing, so the word space before it
   reads tighter than the rest of the line. Give it back optically. */
.h1-logo svg { height: .74em; width: auto; display: inline-block; vertical-align: -.02em; margin-left: .06em; }

/* =============================================================
   Skywave hero (homepage). The hero is the ONE page-opening colour field:
   it cannot round its top over anything, so it runs square to the nav and
   the grey band below rounds up over IT. That keeps the deck-of-cards model
   intact with the hero as the bottom card.
   ============================================================= */
.hero.is-onblue {
  background: var(--grad-sky);
  color: #fff;
  /* Slide up under the sticky nav so the blue field is unbroken, then add
     the height back as padding so nothing hides behind the bar. The pull is
     the nav's FLOW height — --nav-h PLUS its 1px hairline border — anything
     less leaves a 1px strip of white body peeking out above the hero. */
  --hero-pull: calc(var(--nav-h) + 1px);
  margin-top: calc(-1 * var(--hero-pull));
  /* The 84px of air under the nav is a variable so one hero can sit tighter
     without a second padding rule: the default reproduces the old literal
     exactly, so every other blue hero is byte-identical. The <=640px
     `.hero.is-centered` shorthand still overrides padding wholesale on phones,
     which is why lifting a hero here cannot tighten it on mobile. */
  padding-top: calc(var(--hero-pull) + var(--hero-top-gap, 84px));
  padding-bottom: 96px;
}
/* ...unless a notice bar (the cert-name prompt) sits between the nav and the
   hero: sliding up would paint the hero's blue background OVER that bar (both
   are in flow, so the later background wins) and strand its navy text on the
   blue. Pull nothing then — the hero simply starts under the bar. Overriding
   only the variable keeps the phone padding in the <=640px block in charge. */
.cert-name-bar ~ main .hero.is-onblue { --hero-pull: 0px; }
.hero.is-onblue h1 { color: #fff; }
.hero.is-onblue .lead { color: rgba(255, 255, 255, .84); }
/* Brand book treatment #3: solid white wordmark AND dot on a Skywave field.
   The logo's dot and letters are hard-coded fills, so a filter is the only
   way to force them both white without shipping a second copy of the mark. */
.hero.is-onblue .h1-logo svg { filter: brightness(0) invert(1); }
.hero.is-onblue .hero-stats { border-top-color: rgba(255, 255, 255, .28); }
.hero.is-onblue .hero-stats .stat .n { color: #fff; }
.hero.is-onblue .hero-stats .stat .l { color: rgba(255, 255, 255, .82); }
/* Chips read as quiet glass on the blue, not as white buttons competing with
   the primary CTA. */
.hero.is-onblue .filter-chip {
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30);
  color: #fff;
}
.hero.is-onblue .filter-chip:hover { background: rgba(255, 255, 255, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .48); }
.hero.is-onblue .btn-text { color: #fff; }
.hero.is-onblue .btn-text:hover { color: rgba(255, 255, 255, .82); }
/* The submit button cannot be Skywave-on-Skywave. */
.hero.is-onblue .hero-search .btn-primary { background: #fff; color: var(--c-primary-deep); }
.hero.is-onblue .hero-search .btn-primary:hover { background: #E9EDF5; }
.hero.is-onblue :where(a, button, input):focus-visible { outline-color: #fff; }

/* ---------- Mockup (product-UI card) ---------- */
.mockup {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.mockup-bar {
  display: flex; gap: 6px; align-items: center;
  padding: 11px 16px;
  background: #FAFBFC;
  border-bottom: 1px solid var(--c-border);
}
.mockup-bar span { width: 9px; height: 9px; border-radius: 50%; background: #E1E5EC; }
.mockup-bar .mock-url {
  margin-left: 10px; flex: 1; max-width: 260px;
  height: 22px; border-radius: 6px;
  background: #F0F2F6;
  display: flex; align-items: center; padding: 0 10px;
  font-size: 11px; color: var(--c-faint); font-weight: 500;
}

/* Generic mockup UI atoms */
.mock-side { background: #fff; padding: 20px 16px; border-right: 1px solid var(--c-border); }
.mock-side .mock-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 6px; }
.mock-side .mock-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; margin-bottom: 18px; }
.mock-lesson { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; padding: 5px 0; color: var(--c-ink-2); }
.mock-lesson.is-muted { color: var(--c-faint); font-weight: 400; }
.mock-lesson.is-current {
  color: var(--c-primary-deep); font-weight: 600;
  background: var(--c-primary-tint);
  padding: 6px 8px; margin: 0 -8px; border-radius: 7px;
}
.mock-dot {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--c-border-strong); position: relative;
}
.mock-dot.is-done { background: var(--c-primary); border-color: var(--c-primary); }
.mock-dot.is-done::after {
  content: ''; position: absolute; left: 3.5px; top: 1px;
  width: 3px; height: 6.5px;
  border: 1.6px solid #fff; border-top: 0; border-left: 0;
  transform: rotate(45deg);
}
.mock-dot.is-current-dot { border-color: var(--c-primary); }

/* ---------- Cards — elevation, not outlines ---------- */
.card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}
a.card:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  a.card:hover, a.path-card:hover, a.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}

/* ---------- Catalog card with a SECOND link in the footer ----------
   A card that is itself one big <a> cannot hold another link (an <a> inside an
   <a> is invalid - the parser drops the inner one, the same class of bug as the
   nested <form> in the webinar editor). So on /kursy the card is a <div> and the
   TITLE is the link, stretched over the whole card by ::after: every pixel still
   opens the course, while the footer can carry the certificate download.
   Hover/active move to :has() on that link - hovering the certificate pill sits
   ABOVE the overlay, so it deliberately does not lift the card. */
.card-link::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.card:has(.card-link:active) { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .card:has(.card-link:hover) { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
/* The left footer slot ("Rozpocznij kurs") is a decorative label - the card is
   the link - so the right slot has to LOOK actionable to read as a second,
   different target. A compact pill, not .btn-sm: 44px would double the height of
   a footer whose other side is a 14px text label. */
.card-cert {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--c-primary); color: var(--c-on-primary);
  font-weight: 600; font-size: 13px; white-space: nowrap;
  transition: background-color .18s var(--ease-out);
}
.card-cert:hover { background: var(--c-primary-deep); }
.card-cert svg { flex-shrink: 0; }
/* Only a footer that actually carries the pill may wrap. At 320px the label and
   a 161px nowrap pill need 247px in a 228px footer, and .card { overflow: hidden }
   would CLIP the button rather than push the page - so the pill drops to its own
   line instead. Scoped with :has() so single-slot card footers elsewhere (home,
   /sciezki, /szukaj) keep their current one-line behaviour exactly. */
.card-footer:has(.card-cert) { flex-wrap: wrap; row-gap: 10px; }

.card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-primary);
  color: #fff;
  padding: 18px;
  display: flex; align-items: flex-end;
  font-weight: 700; font-size: 21px; letter-spacing: -0.02em; line-height: 1.15;
}
.card-thumb.is-tint { background: var(--c-primary-tint); color: var(--c-ink); }
.card-thumb.is-dark { background: var(--c-dark); }
.card-thumb.is-yellow { background: var(--c-yellow); color: var(--c-ink); }
.card-thumb.is-green { background: var(--c-green); }
.card-thumb.is-purple { background: var(--c-purple); }
.card-thumb-tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255, 255, 255, .94); color: var(--c-ink);
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
}
.card-thumb-time {
  position: absolute; top: 12px; right: 12px;
  background: rgba(18, 18, 18, .68); color: #fff;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.card-thumb.is-tint .card-thumb-tag,
.card-thumb.is-yellow .card-thumb-tag { background: rgba(18,18,18,.86); color: #fff; }

/* Marketplace logo chips inside a thumb — real logos, never text names */
.logo-chip-row { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px; }
.logo-chip {
  width: 34px; height: 34px; border-radius: 9px;
  background: #fff; box-shadow: 0 4px 12px rgba(17, 34, 68, .18);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.logo-chip img { width: 24px; height: 24px; object-fit: contain; }

.card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card-title { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; }
.card-desc { color: var(--c-muted); font-size: 14px; line-height: 1.55; }
.card-footer { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-footer .btn-text { font-size: 14px; }
/* Key-visual card — the bonus box. Deliberately NOT the hero's animated field:
   screened blue blobs plus the 40% black scrim would tint and darken this panel
   into something that is no longer green, which is the whole point of the
   colour. The drifting gifts stay as texture. The hero still runs the field;
   only this card opted out.
   container-type is what lets those gifts cross the card in cqw rather
   than a hard-coded pixel distance; the card's width comes from max-width, so
   inline-size containment changes nothing about its layout.

   The copy is WHITE here (2026-09-14, Sebastian). It used to be ink, because
   white on a flat --c-green (#00AA67) is 3.02:1 and fails WCAG AA. The fix was
   not to reverse that decision but to darken the ground the words actually sit
   on: the field is a gradient that runs from #05593A at the left edge — where
   the heading, the paragraph and the button live — out to the brand green on
   the right, under the artwork, where nothing is read. White measures 6.5:1 at
   the left edge and 5.1:1 at the 60% mark the copy column stops at, so every
   line of it clears AA. If the gradient is ever flattened back towards
   --c-green, the copy has to go back to ink with it.

   overflow is visible so the gift can lean out over the top edge; .bonus-gifts
   keeps its own overflow: hidden, so the drifting texture is still clipped to
   the card. */
.card.is-kv {
  max-width: 880px;
  margin-inline: auto;
  container-type: inline-size;
  overflow: visible;
  background: linear-gradient(101deg, #05593A 0%, #0A6B48 34%, #0E8C5C 68%, var(--c-green) 100%);
}
.card.is-kv .card-body {
  position: relative; z-index: 1;
  padding: 30px 32px 32px;
  flex-direction: row; gap: 20px; align-items: flex-start;
}
/* The gift mark becomes an outlined chip, as in the design: white stroke on a
   barely-there white wash, so it reads as a button-sized badge rather than a
   loose pictogram. */
.card.is-kv .icon-box {
  width: 46px; height: 46px; flex: none;
  align-items: center; justify-content: center;
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}
.card.is-kv h3 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 10px; }
.card.is-kv h2,
.card.is-kv h3,
.card.is-kv h4 { color: #fff; }
.card.is-kv p { color: rgba(255, 255, 255, .92); max-width: 56ch; }
/* Second half of the heading in mint (5.0:1 on the dark end of the field, and
   the heading is large text anyway). The split is done in the view, on the
   first space of the unchanged string. */
.bonus-h__tail { color: #6FE7B0; }
.bonus-main { display: flex; gap: 20px; align-items: flex-start; }
.bonus-copy { min-width: 0; }
/* White pill, ink label — the one high-contrast thing on the field, which is
   what makes it read as the action. */
.bonus-cta {
  margin-top: 22px;
  background: #fff; color: var(--c-ink);
  box-shadow: 0 12px 28px rgba(2, 44, 28, .26);
}
.bonus-cta:hover { background: #EAFBF3; }
.bonus-cta svg { transition: transform .18s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .bonus-cta:hover svg { transform: translateX(3px); }
}

/* The gift, leaning out over the panel's top edge. Absolutely positioned on
   purpose: anchored to the card's BOTTOM edge it can be as tall as it likes
   without the card growing to hold it, which is what lets the bow and the
   floating cards clear the top without opening a gap under the copy. */
.bonus-art {
  position: absolute; z-index: 2; pointer-events: none;
  right: 6px; bottom: -20px; width: 300px;
}
/* overflow: visible, against the SVG's own UA default of hidden. The perk
   cards start at viewBox y = 0 and their float takes them to -16, i.e. OUTSIDE
   the drawing's viewport — which clipped the top card flat every time it
   reached the peak of its travel. Nothing else in the drawing comes near an
   edge (the glow and the ground shadow both stop inside it), so lifting the
   clip costs nothing but the few pixels the cards need. */
.bonus-art__svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Under 900px the copy has no column to spare, so the gift stops being an
   overhang and becomes a picture under the button — still there, still the
   same drawing, just not fighting the words for width. */
@media (min-width: 901px) {
  .card.is-kv .card-body { padding-right: 320px; }
}
@media (max-width: 900px) {
  .bonus-art {
    position: static; width: min(240px, 70%);
    margin: 18px auto 0; right: auto; bottom: auto;
  }
}
@media (max-width: 640px) {
  /* On a phone the gift chip beside the copy costs the column 66px it cannot
     spare — measured: it is what pushed "Zapisz się i odbierz bonusy" onto two
     lines. Stacked, the chip keeps its place at the top-left and the heading,
     the paragraph and the button all get the panel's full width. */
  .bonus-main { flex-direction: column; gap: 14px; }
  .card.is-kv .card-body { padding: 26px 22px 28px; }
  .card.is-kv h3 { font-size: 23px; }
}

/* Gift icons drifting across the card on the hero dots' timing: same left-to
   -right crossing, scaled down and dimmed so they stay a texture behind the
   copy rather than a row of pictograms. White now, like the copy — and at half
   strength, because white on this field carries much further than the ink they
   used to be drawn in. */
.bonus-gifts { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; opacity: .5; }
.bonus-gifts svg {
  position: absolute; left: var(--gx);
  width: var(--gs); height: var(--gs);
  color: #fff;
  opacity: 0;
}


/* ---------- Path card ---------- */
.path-card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}
a.path-card:active { transform: scale(.985); }
.path-card h4 { font-size: 18px; line-height: 1.3; letter-spacing: -0.014em; }
.path-meta { font-size: 13px; color: var(--c-faint); font-variant-numeric: tabular-nums; }

/* ---------- Quick-link tile ---------- */
.tile {
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;
  transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}
a.tile:active { transform: scale(.98); }
.tile h4 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.tile p { font-size: 14px; color: var(--c-ink-2); margin-top: 3px; }

/* ---------- Icon (colour-only, no filled chip) ---------- */
.icon-box {
  height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: flex-start;
  color: var(--c-primary);
}
.icon-box svg { width: 30px; height: 30px; }
/* Legacy colour variants collapse to the single Skywave treatment;
   purple is kept for Base Connect only, and as colour — never a filled chip. */
.icon-box.is-purple { color: var(--c-purple); }

/* =============================================================
   Grow-on-scroll colour band (canonical recipe — do not re-derive)
   Section is the panel (transparent, clips, holds the timeline);
   .grow-bg is the fill layer with its OWN radius.
   ============================================================= */
.band-grow {
  position: relative; z-index: 1;
  background: var(--c-soft);   /* OPAQUE, matching the band above; blue grow-bg spills over it (no seam shadow) */
  color: #fff;
  overflow: hidden;
  border-top-left-radius: var(--band-radius);
  border-top-right-radius: var(--band-radius);
  margin-top: calc(-1 * var(--band-overlap));
  padding: calc(84px + var(--band-overlap)) 24px 92px;
}
.band-grow__inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; }
.band-grow h2, .band-grow h3 { color: #fff; }
.grow-bg {
  position: absolute; inset: 0; z-index: 0;
  transform-origin: 50% 50%;
  border-radius: var(--band-radius);
  will-change: transform;
  pointer-events: none;
}
.band-grow .grow-bg {
  background: var(--grad-sky);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band-grow { view-timeline-name: --growView; view-timeline-axis: block; }
    .band-grow .grow-bg { animation: growBg linear both; animation-timeline: --growView; animation-range: cover 0% cover 50%; }
  }
}
@keyframes growBg { from { transform: scaleX(.87); } to { transform: none; } }
@keyframes growBgSubtle { from { transform: scaleX(.94); } to { transform: none; } }

.band-lead { color: rgba(255, 255, 255, .82); font-size: 18px; line-height: 1.65; max-width: 60ch; }
.band-grow .step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.step-cell { border-top: 1px solid rgba(255, 255, 255, .28); padding-top: 22px; }
.step-cell .step-num { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.step-cell h3 { font-size: 21px; margin: 10px 0 8px; letter-spacing: -0.015em; }
.step-cell p { color: rgba(255, 255, 255, .82); font-size: 14.5px; line-height: 1.6; }

/* ---------- Inset CTA panel (grow-subtle variant) ---------- */
.cta-panel {
  position: relative;
  color: #fff;
  border-radius: 20px;
  overflow: hidden;
  padding: 52px 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.cta-panel .grow-bg { background: var(--c-primary); border-radius: 20px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cta-panel { view-timeline-name: --ctaView; view-timeline-axis: block; }
    .cta-panel .grow-bg { animation: growBgSubtle linear both; animation-timeline: --ctaView; animation-range: cover 0% cover 45%; }
  }
}
.cta-panel > *:not(.grow-bg) { position: relative; z-index: 1; }
.cta-panel h3 { color: #fff; font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 8px; }
.cta-panel p { color: rgba(255, 255, 255, .82); font-size: 16px; max-width: 52ch; }

/* ---------- Dark Pro band ----------
   RETAINED DELIBERATELY WITH NO INSTANCE. #121212 is the design system's
   sanctioned Enterprise/Expo surface (design.md, CLAUDE.md). certificates.html
   used to be the one page using it, which was always off-brand for a free
   Academy page; it is light now. Keep this primitive for a future Enterprise
   or Expo surface, do not delete it as "dead". */
.band-dark {
  background: var(--c-dark);
  color: var(--c-on-dark);
  overflow: hidden;
  border-top-left-radius: var(--band-radius);
  border-top-right-radius: var(--band-radius);
  margin-top: calc(-1 * var(--band-overlap));
  padding: calc(84px + var(--band-overlap)) 0 92px;
}
.band-dark.is-page-top { margin-top: 0; border-radius: 0; padding: 80px 0 92px; }
.band-dark h1, .band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .lead { color: var(--c-on-dark-muted); }
.band-dark .muted, .band-dark .faint { color: var(--c-on-dark-muted); }

/* Dark-surface card */
.card-on-dark {
  background: #1C1D1F;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

/* =============================================================
   Webinar booking hero (.wbn-*) — SHARED by webinar.html (the detail
   page) and webinars.html (the featured upcoming webinar). Promoted out
   of webinar.html's page-scoped <style> when the second page started
   using it; do not push it back down into one page.
   ============================================================= */
.wbn-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.wbn-hero h1 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.026em; }
.wbn-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.wbn-speaker-line { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 14.5px; color: var(--c-muted); }
.wbn-speaker-line .avatar { width: 34px; height: 34px; font-size: 12px; }
.wbn-card .card-body { padding: 28px 30px; gap: 18px; }
/* .card-body is a column flex container, so the pill stretched to the full
   card width and read as a banner rather than a badge. */
.wbn-card .card-body > .pill { align-self: flex-start; }
.wbn-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.wbn-field .k { font-size: 11.5px; color: var(--c-faint); margin-bottom: 2px; }
.wbn-field .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wbn-form { display: flex; flex-direction: column; gap: 10px; }
.wbn-form label { font-size: 12.5px; font-weight: 600; color: var(--c-muted); }
.wbn-input {
  height: 48px; width: 100%; padding: 0 18px;
  border: 0; border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--c-border-strong);
  font-size: 14.5px; color: var(--c-ink); background: #fff;
}
.wbn-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--c-primary); }
.wbn-input::placeholder { color: var(--c-faint); }
@media (max-width: 1024px) {
  .wbn-hero { grid-template-columns: 1fr; gap: 36px; }
}

/* =============================================================
   Archive entry (.wbn-arch) — a native <details>/<summary>, deliberately
   NOT the JS .accordion: .accordion-content is collapsed by CSS
   (grid-template-rows: 0fr), so an accordion would hide every checklist
   and download from a reader without JS. <details> expands on its own,
   is keyboard-operable for free, and needs no JS at all.
   ============================================================= */
.wbn-arch {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.wbn-arch + .wbn-arch { margin-top: 16px; }
.wbn-arch > summary {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px; min-height: 44px;
  cursor: pointer;
  list-style: none;                      /* Firefox marker */
  transition: background-color .15s var(--ease-out);
}
.wbn-arch > summary::-webkit-details-marker { display: none; }   /* Safari/Chrome marker */
.wbn-arch > summary:hover { background: var(--c-soft); }
.wbn-arch > summary:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -3px; }
.wbn-arch__play {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--c-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
/* All of these are spans (only phrasing content is valid inside <summary>),
   so each one needs an explicit display or they run together on one line. */
.wbn-arch__txt { flex: 1; min-width: 0; display: block; }
.wbn-arch__kicker { display: block; font-size: 13.5px; font-weight: 600; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.wbn-arch__title { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; margin-top: 3px; }
.wbn-arch__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--c-muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.wbn-arch__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.wbn-arch__caret {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-soft); color: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s var(--ease-out), background-color .2s var(--ease-out);
}
.wbn-arch[open] > summary .wbn-arch__caret { transform: rotate(180deg); background: var(--c-primary-tint); color: var(--c-primary-deep); }

.wbn-arch__body { padding: 4px 22px 22px; border-top: 1px solid var(--c-border); }
.wbn-arch__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; margin-top: 20px; }
.wbn-arch__h { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 12px; }
/* The checklist here is the materials.html component; only the frame differs. */
.wbn-arch .checklist { box-shadow: none; border: 1px solid var(--c-border); }
.wbn-arch .checklist-items { padding: 0; }
.wbn-arch .checklist-item { padding: 12px 16px; }
.wbn-arch .checklist-text { font-size: 14px; }

.wbn-res { display: flex; flex-direction: column; gap: 8px; }
.wbn-res a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--c-border);
  transition: background-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.wbn-res a:hover { background: var(--c-soft); box-shadow: inset 0 0 0 1px var(--c-border-strong); }
.wbn-res .ic { flex-shrink: 0; color: var(--c-primary); display: flex; }
.wbn-res .t { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.wbn-res .m { font-size: 12.5px; color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wbn-arch__foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

@media (max-width: 860px) {
  .wbn-arch__grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
  .wbn-arch > summary { padding: 16px; gap: 14px; align-items: flex-start; }
  .wbn-arch__play { width: 40px; height: 40px; }
  .wbn-arch__body { padding: 4px 16px 18px; }
  .wbn-arch__foot .btn { width: 100%; }
  /* The duration and the host each take their own line here, which left the
     middot separator dangling at the end of the first one. */
  .wbn-arch__meta { display: block; }
  .wbn-arch__meta > span + span { display: none; }
  .wbn-arch__meta > span:last-child { display: block; margin-top: 2px; }
}

/* ---------- Webinar cards ---------- */
.webinar-feature {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px;
}
.webinar-hero {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--c-primary);
  color: #fff;
  padding: 36px;
  min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}
.webinar-hero h3 { color: #fff; max-width: 24ch; }
.webinar-stack { display: flex; flex-direction: column; gap: 24px; }

.webinar-card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}
a.webinar-card:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  a.webinar-card:hover, a.webinar-hero:hover, a.podcast-row:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
.webinar-thumb {
  aspect-ratio: 16 / 9;
  background: var(--c-primary);
  color: #fff;
  position: relative;
  display: flex; align-items: flex-end; padding: 20px;
}
.webinar-thumb h5 { font-size: 17px; line-height: 1.3; color: #fff; letter-spacing: -0.012em; max-width: 30ch; }
.webinar-thumb.is-tint { background: var(--c-primary-tint); color: var(--c-ink); }
.webinar-thumb.is-tint h5 { color: var(--c-ink); }
.webinar-thumb.is-dark { background: var(--c-dark); }
.webinar-thumb.is-yellow { background: var(--c-yellow); color: var(--c-ink); }
.webinar-thumb.is-yellow h5 { color: var(--c-ink); }
.webinar-date {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255, 255, 255, .94); color: var(--c-ink);
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.webinar-thumb.is-dark .webinar-date { background: rgba(255,255,255,.94); }

/* The white strip under the artwork keeps its two stacked rows (byline, then the
   CTA), but tighter: the generic .card-body is sized for cards whose body also
   carries a title and a meta row, and under a 16:9 graphic its 20/22px padding,
   10px gap and the footer's 12px padding-top left 120px of near-empty white.
   Higher specificity than .card-body, so it does not depend on source order —
   and course cards, which need the roomier body, are untouched. */
.webinar-card .card-body { padding: 12px 18px 13px; gap: 4px; }
.webinar-card .card-footer { padding-top: 4px; }
/* The link's own 6px block padding is what the tightened gaps are for. */
.webinar-card .card-footer .btn-text { padding: 0; font-size: 14px; }

/* ---------- Podcast row ---------- */
.podcast-row {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 20px; align-items: center;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;
  transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}
a.podcast-row:active { transform: scale(.99); }
.podcast-cover {
  width: 88px; height: 88px;
  border-radius: var(--radius-ui);
  background: var(--c-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.podcast-cover.is-dark { background: var(--c-dark); }
.podcast-cover.is-tint { background: var(--c-primary-tint); color: var(--c-primary-deep); }
.podcast-kicker { font-size: 13.5px; font-weight: 600; color: var(--c-ink-2); }  /* quiet meta, not an uppercase eyebrow */
.podcast-row h5 { font-size: 16px; margin-top: 4px; letter-spacing: -0.01em; }
.podcast-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--c-muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
/* The middle cell holds free text from the database (webinar titles, search
   snippets, presenter lists). Now that its track can shrink below the longest
   word, that word has to wrap rather than stick out of the card. */
.podcast-row > div { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Stats band (dividers, not boxes) ---------- */
.stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.stat-band .stat-cell {
  padding: 32px 28px;
  border-left: 1px solid var(--c-border);
}
.stat-band .stat-cell:first-child { border-left: 0; padding-left: 0; }
.stat-band .n { font-size: 42px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-band .n.is-blue { color: var(--c-primary); }
.stat-band .n.is-green { color: var(--c-primary); }  /* decorative stat highlight → single accent */
.stat-band .l { font-size: 13.5px; color: var(--c-muted); margin-top: 8px; }

/* ---------- Testimonials (quiet columns) ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.quote-cell { display: flex; flex-direction: column; gap: 18px; }
.quote-cell blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--c-ink-2); text-wrap: pretty; }
.quote-author { display: flex; align-items: center; gap: 12px; }
.quote-author .who strong { display: block; font-size: 14.5px; font-weight: 600; }
.quote-author .who span { font-size: 13.5px; color: var(--c-muted); }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-primary);
  color: #fff; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.avatar.is-tint { background: var(--c-primary-tint); color: var(--c-primary-deep); }
.avatar.is-dark { background: var(--c-dark); }

/* ---------- Certificate visual (.cert-doc) ----------
   An ATTESTATION, not a card. The rebuild fixed four things that made the old
   version read as AI-generated:
     1. hierarchy was inverted (the course title was bigger than the person);
        the HOLDER'S NAME is now the largest element on the sheet;
     2. an uppercase tracked blue eyebrow above the title — deleted; the
        lead-in is a normal-case sentence ("Zaświadcza się, że");
     3. a blue circle containing a rosette glyph, the single most generic
        device in the genre — replaced by the brand's own dot as a seal;
     4. nobody issued it — there is now a signature block and a verification
        block anchoring the foot.
   Sheet stays 1.41:1 (A4 landscape).
   NOTE: the homepage instance sits ON the blue band, so every text rule here
   must declare its own colour. Inheriting = white-on-white (gotcha #6).
   -------------------------------------------------------------------- */
.cert-doc {
  position: relative;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 12px;
  aspect-ratio: 1.41 / 1;
  container-type: inline-size;
}
.cert-doc__frame {
  height: 100%;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 5.5cqw 6cqw;
  display: grid; grid-template-rows: auto 1fr auto; gap: 3cqw;
}

/* Head: the official lockup + the seal */
.cert-doc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* The lockup is never recoloured and its dot is never redrawn: only the
   height changes. `.wordmark` sets ink, but the blue band's flip and the
   Dark Pro card both need an explicit answer. */
.cert-doc .wordmark { color: var(--c-ink); }
.cert-doc .wordmark svg { height: 4cqw; min-height: 13px; }
.cert-doc.on-dark-card .wordmark { color: #fff; }
/* The seal is the brand's dot, not stock certificate furniture: a Skywave
   disc inside a thin ring. No rosette, no medal, no badge. */
.cert-seal {
  width: 6.6cqw; height: 6.6cqw; min-width: 26px; min-height: 26px;
  flex-shrink: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--c-primary-soft);
  display: flex; align-items: center; justify-content: center;
}
.cert-seal::after {
  content: ''; width: 52%; height: 52%; border-radius: 50%;
  background: var(--c-primary);
}

/* Body: the attestation. Lead-in, then the person, then what they did. */
.cert-doc__body { align-self: center; min-width: 0; }
.cert-lead { font-size: 3.1cqw; color: var(--c-muted); }
/* THE HERO OF THE SHEET. Never make this smaller than the credential name.
   Scoped to .cert-doc on purpose: site.css still carries a minified block from
   an EARLIER cert-doc design at the top of the file, and its
   `.cert-doc .cert-holder { font-size: 13.5px; color: var(--c-muted) }` (0,2,0)
   outranked a bare `.cert-holder` (0,1,0) no matter how far below it sits — so the
   name rendered as small grey meta text on EVERY viewport instead of as the sheet's
   headline. Matching that specificity lets source order decide again. */
.cert-doc .cert-holder {
  font-size: 7.4cqw; font-weight: 600; line-height: 1.1;
  letter-spacing: -0.025em; color: var(--c-ink);
  margin-top: 1.6cqw;
  padding-bottom: 2.4cqw;
  border-bottom: 1px solid var(--c-border);
}
.cert-statement { font-size: 3.3cqw; line-height: 1.5; color: var(--c-ink-2); margin-top: 2.6cqw; max-width: 46ch; }
.cert-statement strong { color: var(--c-ink); font-weight: 600; }

/* Foot: ONE row, on a hairline. A signature block and a QR used to sit here
   too, which put three anchors in competition across the bottom and made the
   sheet feel crowded. The document reads because the name is the only loud
   element; the foot is supporting detail and should stay quiet. */
.cert-doc__foot { border-top: 1px solid var(--c-border); padding-top: 2.6cqw; }
.cert-fields { display: flex; gap: 6cqw; flex-wrap: wrap; }
.cert-field .k { font-size: 2.4cqw; color: var(--c-faint); }
.cert-field .v { font-size: 3cqw; font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; margin-top: .4cqw; }
/* Verification is stated in words now that there is no code to scan. */
.cert-verify-note { font-size: 2.5cqw; color: var(--c-muted); margin-top: 2.2cqw; }
.cert-verify-note strong { color: var(--c-ink-2); font-weight: 600; }

/* Dark Pro variant (no instance today; kept as the component's dark form) */
.cert-doc.on-dark-card { background: #1C1D1F; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.cert-doc.on-dark-card .cert-doc__frame { border-color: rgba(255,255,255,.14); }
.cert-doc.on-dark-card .cert-holder { color: #fff; border-bottom-color: rgba(255,255,255,.16); }
.cert-doc.on-dark-card .cert-lead { color: var(--c-on-dark-muted); }
.cert-doc.on-dark-card .cert-statement { color: var(--c-on-dark-muted); }
.cert-doc.on-dark-card .cert-statement strong { color: #fff; }
.cert-doc.on-dark-card .cert-doc__foot { border-top-color: rgba(255,255,255,.16); }
.cert-doc.on-dark-card .cert-verify-note { color: var(--c-on-dark-muted); }
.cert-doc.on-dark-card .cert-verify-note strong { color: #fff; }
.cert-doc.on-dark-card .cert-field .k { color: #7C8592; }
.cert-doc.on-dark-card .cert-field .v { color: #fff; }

/* Compact variant (profile.html): same name-first hierarchy, but no
   attestation sentence, no signature block and no QR — there is not room,
   and the profile page already says who you are. */
.cert-doc.is-compact { aspect-ratio: 1.9 / 1; }
.cert-doc.is-compact .cert-doc__frame { padding: 5cqw 5.5cqw; }
.cert-doc.is-compact .cert-holder { font-size: 6.4cqw; padding-bottom: 2cqw; }
.cert-doc.is-compact .cert-cred { font-size: 3.4cqw; font-weight: 600; color: var(--c-ink-2); margin-top: 2cqw; }
.cert-doc.is-compact .cert-doc__foot { padding-top: 2.2cqw; }
.cert-doc.is-compact .cert-fields { gap: 5cqw; }

/* ---------- Check list ----------
   Shared by certificates.html and verify.html. */
.check-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.check-list .ck {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid var(--c-border); }
.accordion-item { border-bottom: 1px solid var(--c-border); }
.accordion-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px;
  font-size: 17px; font-weight: 600; color: var(--c-ink); letter-spacing: -0.01em;
  text-align: left;
  min-height: 44px;
}
.accordion-trigger .acc-icon {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-soft); color: var(--c-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .25s var(--ease-out), background-color .2s var(--ease-out);
}
.accordion-item.is-open .acc-icon { transform: rotate(180deg); background: var(--c-primary-tint); color: var(--c-primary-deep); }
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease-in-out);
  color: var(--c-muted);
}
.accordion-content > .acc-inner { overflow: hidden; min-height: 0; }
.acc-inner > * { padding: 0 4px 22px; max-width: 68ch; }
.accordion-item.is-open .accordion-content { grid-template-rows: 1fr; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 36px;
  overflow-x: auto;
}
.tab {
  padding: 13px 18px;
  font-size: 15px; font-weight: 500;
  color: var(--c-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  min-height: 44px;
  transition: color .15s var(--ease-out);
}
.tab:hover { color: var(--c-ink); }
.tab.is-active { color: var(--c-ink); font-weight: 600; border-bottom-color: var(--c-primary); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ---------- Filters & search ---------- */
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 16px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--c-border);
  font-size: 14px; font-weight: 500; color: var(--c-ink-2);
  transition: box-shadow .15s var(--ease-out), background-color .15s var(--ease-out), color .15s var(--ease-out);
}
.filter-chip:hover { box-shadow: inset 0 0 0 1px var(--c-border-strong); }
.filter-chip:active { transform: scale(.96); }
.filter-chip.is-active { background: var(--c-ink); color: #fff; box-shadow: none; }

.search {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--c-border);
  border-radius: var(--radius-pill);
  padding: 0 18px; height: 48px;
  flex: 1; min-width: 240px; max-width: 460px;
  transition: box-shadow .15s var(--ease-out);
}
.search:focus-within { box-shadow: inset 0 0 0 2px var(--c-primary); }
.search input { border: 0; outline: none; flex: 1; font-size: 14.5px; background: transparent; color: var(--c-ink); }
.search input::placeholder { color: var(--c-faint); }
.search svg { color: var(--c-faint); flex-shrink: 0; }

/* ---------- Progress (animated fill — one system everywhere) ---------- */
.progress { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.progress-label {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--c-muted); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.progress-bar {
  height: 6px; width: 100%;
  background: var(--c-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.on-dark .progress-bar, .band-dark .progress-bar { background: rgba(255,255,255,.14); }
.progress-fill {
  display: block; height: 100%;
  width: var(--p, 0%);
  background: var(--c-primary);
  border-radius: var(--radius-pill);
  transform-origin: 0 50%;
}
.progress-fill.is-green { background: var(--c-green); }
.band-dark .progress-fill.is-green { background: var(--c-green-bright); }
@media (prefers-reduced-motion: no-preference) {
  body.anim .progress-fill {
    transform: scaleX(0);
    transition: transform .9s var(--ease-out);
    transition-delay: var(--pd, 0s);
  }
  body.anim .progress-fill.is-in { transform: scaleX(1); }
}

/* ---------- Reveal on scroll (motivated lists only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.anim .reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
    transition-delay: var(--d, 0s);
  }
  body.anim .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- Course shell (lesson player) ---------- */
.course-shell { display: grid; grid-template-columns: 320px 1fr; min-height: calc(100vh - var(--nav-h)); }
.lesson-sidebar {
  border-right: 1px solid var(--c-border);
  padding: 32px 24px;
  background: #fff;
  overflow-y: auto;
}
.lesson-sidebar .ls-kicker { font-size: 12.5px; font-weight: 600; color: var(--c-faint); margin: 0 0 6px; }  /* quiet label, not an uppercase eyebrow */
.lesson-sidebar .course-title { font-size: 18px; font-weight: 700; margin: 0 0 18px; line-height: 1.3; letter-spacing: -0.015em; }
.lesson-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 2px; }
.lesson-trigger {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--c-ink-2);
  min-height: 44px;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out);
}
.lesson-trigger:hover { background: var(--c-soft); color: var(--c-ink); }
.lesson-trigger .status {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--c-border-strong);
  flex-shrink: 0; position: relative;
}
.lesson-trigger.is-done .status { background: var(--c-primary); border-color: var(--c-primary); }
.lesson-trigger.is-done .status::after {
  content: ''; position: absolute; left: 3.5px; top: 1px;
  width: 3.5px; height: 7px;
  border: 1.8px solid #fff; border-top: 0; border-left: 0;
  transform: rotate(45deg);
}
.lesson-item.is-active .lesson-trigger { background: var(--c-primary-tint); color: var(--c-primary-deep); font-weight: 600; }
.lesson-time { margin-left: auto; font-size: 12px; color: var(--c-faint); font-variant-numeric: tabular-nums; }
/* Quiz konczacy rozdzial stoi w tej samej liscie co lekcje, wiec jego prawa
   etykieta jest slowem ("Quiz"), nie numerem - stad wlasny kolor i brak
   tabular-nums. Reszta wiersza (kropka stanu, hover, stan zdany) celowo
   wyglada jak lekcja: to jeden ciag krokow, nie osobny modul. */
.lesson-trigger.is-quiz .lesson-time { color: var(--c-primary-deep); font-weight: 600; font-variant-numeric: normal; }

.course-content { padding: 44px 56px; background: var(--c-soft); }
.course-content-inner { max-width: 880px; margin: 0 auto; }

.video-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  background: var(--c-dark);
  position: relative; overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .55);
}
.video-frame .play {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--c-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding-left: 5px;
  transition: transform .2s var(--ease-out), background-color .2s var(--ease-out);
}
.video-frame .play:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .video-frame .play:hover { transform: scale(1.05); background: #2A2A2A; }
}
.video-time {
  position: absolute; bottom: 12px; left: 16px;
  color: #fff; font-size: 12px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.lesson-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px;
  background: #fff;
  border-radius: var(--radius-ui);
  box-shadow: var(--shadow-soft);
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Long-form prose inside course/webinar pages */
.prose { max-width: 68ch; }
.prose p { margin: 0 0 16px; color: var(--c-ink-2); line-height: 1.7; }
.prose h4 { margin: 28px 0 12px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; color: var(--c-ink-2); }
.prose li { margin-bottom: 6px; }

/* ---------- Checklist ---------- */
.checklist {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.checklist-header { padding: 24px 28px 20px; border-bottom: 1px solid var(--c-border); }
.checklist-items { padding: 6px 0; }
.checklist-item {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 28px;
}
.checklist-item + .checklist-item { border-top: 1px solid var(--c-border); }
.checklist-check {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 7px;
  border: 2px solid var(--c-border-strong);
  position: relative;
  min-width: 22px;
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.checklist-check:active { transform: scale(.9); }
.checklist-check.is-checked { background: var(--c-primary); border-color: var(--c-primary); }
.checklist-check.is-checked::after {
  content: ''; position: absolute; left: 5px; top: 1.5px;
  width: 5px; height: 9px;
  border: 2px solid #fff; border-top: 0; border-left: 0;
  transform: rotate(45deg);
}
.checklist-text { flex: 1; font-size: 15px; }
.checklist-item.is-done .checklist-text { color: var(--c-faint); text-decoration: line-through; }

/* ---------- Profile ---------- */
.profile-header {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 28px; align-items: center;
  padding: 36px 40px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.profile-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--c-primary);
  color: #fff; font-weight: 700; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Empty / loading states ---------- */
.empty-state {
  grid-column: 1 / -1;
  padding: 56px 24px;
  text-align: center;
  border-radius: var(--radius-card);
  background: var(--c-soft);
  color: var(--c-muted);
}
.empty-state h4 { color: var(--c-ink); margin-bottom: 8px; }
.empty-state svg { margin: 0 auto 16px; color: var(--c-faint); }

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--c-soft) 25%, #ECEEF3 50%, var(--c-soft) 75%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: shimmer 1.4s linear infinite; }
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Footer (light — Dark Pro stays premium-only) ---------- */
.site-footer {
  background: var(--c-canvas);
  border-top: 1px solid var(--c-border);
  padding: 64px 0 32px;
  color: var(--c-ink);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-col h6 {
  font-size: 12px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--c-faint);
  margin: 0 0 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer a { color: var(--c-muted); font-size: 14px; transition: color .15s var(--ease-out); }
.site-footer a:hover { color: var(--c-link); }
.footer-note { margin-top: 16px; max-width: 320px; font-size: 14px; color: var(--c-muted); line-height: 1.6; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
  font-size: 13px; color: var(--c-faint);
  flex-wrap: wrap;
}

/* ---------- Utilities ---------- */
.mt-xs { margin-top: var(--s-xs); } .mt-sm { margin-top: var(--s-sm); }
.mt-md { margin-top: var(--s-base); } .mt-lg { margin-top: var(--s-lg); }
.mt-xl { margin-top: var(--s-xl); } .mt-xxl { margin-top: var(--s-xxl); }
.mb-sm { margin-bottom: var(--s-sm); } .mb-md { margin-bottom: var(--s-base); }
.mb-lg { margin-bottom: var(--s-lg); } .mb-xl { margin-bottom: var(--s-xl); }
.text-center { text-align: center; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================================
   UPGRADE LAYER — real imagery, photographic hero, product-UI cards
   ============================================================= */

/* (Removed .hero-eyebrow — a tinted uppercase-adjacent eyebrow pill with a green glow dot. No eyebrows, no glow.) */

/* (Removed .hero-photo / .hero-card / .hero-chip / .hc-* with the Dark Pro
   hero on certificates.html, which was their only instance. That page is now
   light and shows the .cert-doc artwork instead of a stock photo.) */

/* Course-card thumbnail: framed product-UI screenshot peeking from the top */
.card-thumb.is-shot { padding: 0; align-items: stretch; overflow: hidden; }
.card-thumb.is-shot .card-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; object-position: center; display: block;
}
.card-thumb.is-shot::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 60px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,18,18,.14), transparent);
}
.card-thumb-tag, .card-thumb-time { z-index: 2; }
/* "Wkrótce" courses: gently mute the thumbnail, keep the tag crisp */
.card.is-soon .card-thumb::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, .34); pointer-events: none; }
/* Course-card thumbnail: full-bleed photograph with legibility scrim */
.card-thumb.is-photo { padding: 18px; overflow: hidden; }
.card-thumb .thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.card-thumb.is-photo::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(18,18,18,.12) 0%, rgba(18,18,18,.58) 100%);
}
.card-thumb.is-photo > *:not(.thumb-img) { position: relative; z-index: 1; }
.card-thumb.is-photo .card-thumb-tag { background: rgba(255,255,255,.94); color: var(--c-ink); }

/* Real-face avatars (testimonials, expert cards) */
.avatar.is-photo { background: none; overflow: hidden; }
.avatar.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 56px; height: 56px; font-size: 16px; }

/* Quote card with real portrait (richer testimonial) */
.quote-cell.has-photo { padding: 26px; background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }

/* Photographic split panel (certificate teaser / "for whom" segments) */
.photo-panel {
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--c-soft);
  box-shadow: var(--shadow-soft);
}
.photo-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =============================================================
   Real imagery layer (webinar hero/thumbs + photo podcast covers)
   The video hero, the kinetic headline and the logo marquee were removed
   with the 2026-08 homepage pass: the hero is now centred and typographic.
   ============================================================= */

/* Real imagery inside webinar hero/thumbs + photo podcast covers (shared) */
.webinar-hero .wbn-media, .webinar-thumb .wbn-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.wbn-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wbn-media::after { content: ''; position: absolute; inset: 0; }
.webinar-hero > div, .webinar-thumb > h5 { position: relative; z-index: 1; }
.webinar-hero > .webinar-date, .webinar-thumb > .webinar-date { z-index: 2; }
.webinar-hero .wbn-media::after { background: linear-gradient(180deg, rgba(17,34,68,.42) 0%, rgba(17,34,68,.86) 100%); }
.webinar-thumb .wbn-media::after { background: linear-gradient(180deg, rgba(18,18,18,.22) 0%, rgba(18,18,18,.74) 100%); }
/* Upcoming-webinar tiles with real artwork: the graphic already carries the
   webinar's name and date (marketing exports it that way), so the view prints
   NOTHING over it — and with no overlaid text there is nothing for the
   darkening gradient to make readable, nor anything for the tile's padding to
   inset. Higher specificity than the shared rule above, so order-independent. */
.webinar-thumb.is-art { padding: 0; }
.webinar-thumb.is-art .wbn-media::after { background: none; }
.podcast-cover.is-photo { overflow: hidden; background: var(--c-primary-tint); }
.podcast-cover.is-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Responsive ---------- */
/* 1200, not 1120: below this the row can no longer fit the logo lockup, the
   centred menu and the actions cluster at the same time. */
@media (max-width: 1200px) {
  .topnav nav { display: none; }
  /* With the menu gone the third grid column is empty, and as a `1fr` track it
     was still claiming half the free space, starving the logo (64px at 390px).
     Two columns while collapsed: logo at its natural width, actions take the
     rest. The centred-menu 3-column grid stays as-is above this breakpoint. */
  .topnav .container { grid-template-columns: auto 1fr; }
  .topnav.is-open nav {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: #fff; padding: 12px 16px 16px;
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
  }
  .topnav.is-open nav a { padding: 13px 14px; }
  .topnav.is-open .nav-drawer-only { display: block; }
  .mobile-toggle { display: inline-flex; }
}
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* .podcast-row is a WIDE horizontal row (16:9 still + text + trailing
     action). Two side by side stop fitting long before the 640px phone
     breakpoint, so the pair collapses to one column across the whole tablet
     range instead of only on phones. */
  .grid-2:has(.podcast-row) { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .photo-panel { aspect-ratio: 16 / 10; }
  .webinar-feature { grid-template-columns: 1fr; }
  .webinar-stack { display: grid; grid-template-columns: 1fr 1fr; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .stat-band .stat-cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat-band .stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--c-border); }
  .quote-grid { grid-template-columns: 1fr; gap: 36px; }
  .band-grow .step-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .course-shell { grid-template-columns: minmax(0, 1fr); }
  .lesson-sidebar { display: none; }
  .course-content { padding: 32px 24px; }
  /* Below 1024 the band's two columns collapse and the certificate would
     stretch to the full container: a 1.41:1 sheet ~980px wide is a poster,
     not a document. Cap it so it keeps the proportions it has on desktop,
     and let the two compact cards size to their content at that width.

     `width: 100%` is LOAD-BEARING, not decoration. .cert-doc is a grid item
     and `margin-inline: auto` cancels its default stretch, which makes the
     box shrink-to-fit; because the same element is the query container
     (`container-type: inline-size`), inline-size containment computes that
     fit-content size WITHOUT its contents, so the sheet collapsed to its own
     24px of padding — measured 24x124 at 375px and 34x27 at 768px, with every
     cqw-sized line inside rendering at ~0.3px. A definite width removes the
     shrink-to-fit entirely; max-width still caps it and the auto margins still
     centre it. Any future rule that drops the width here brings the speck back. */
  .cert-doc { width: 100%; max-width: 560px; margin-inline: auto; }
  .cert-doc.is-compact { aspect-ratio: auto; max-width: none; }
}
@media (max-width: 640px) {
  :root { --s-section: 60px; --band-radius: 20px; --band-overlap: 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .webinar-stack { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .stat-band .stat-cell { padding: 22px 16px; }
  .hero { padding: 44px 0 60px; }
  .hero.is-centered { padding: 56px 0 64px; }
  /* The event hero opts out of that shorthand on phones for two reasons. It is
     pulled up under the sticky bar by --hero-pull, and 56px of top padding is
     less than the bar is tall, so the date badge would sit behind it. And the
     same handover applies as on desktop: less air here, black strip sooner. */
  .hero.is-centered.hero-bw { padding: calc(var(--hero-pull) + 18px) 0 34px; }
  /* Three short facts still fit across a phone at this size; the old rule
     forced a left-aligned 2-column grid, which fought the centred layout. */
  .hero-stats { gap: 16px; margin-top: 34px; padding-top: 22px; }
  .hero-stats .stat .n { font-size: 20px; }
  .hero-stats .stat .l { font-size: 13.5px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .cta-panel { padding: 36px 28px; }
  .band-grow { padding-left: 16px; padding-right: 16px; }
  .profile-header { grid-template-columns: 1fr; text-align: center; }
  .profile-header .profile-avatar { justify-self: center; }
  /* Phone nav keeps logo + primary CTA + menu; the profile avatar drops out
     (the mobile menu carries the link). */
  .nav-avatar { display: none; }
  .wordmark svg { height: 16px; }
  /* Belt and braces: never let the mark push the row wider than the screen. */
  .topnav .wordmark svg { max-width: 100%; }
  .site-footer .wordmark svg { height: 21px; }
  /* Field and submit each take a full row, so both are comfortably tappable. */
  .hero-search__field { flex: 1 1 100%; max-width: none; }
  .hero-search .btn { width: 100%; }

  /* The sheet is a fixed 1.41:1 landscape on desktop. On a phone the same
     ratio is far too short for the award statement: the text spilled out of
     the card onto the band below. Let the sheet grow to its content instead,
     and stop the footer fields from splitting left/right when they wrap. */
  .cert-doc, .cert-doc.is-compact { aspect-ratio: auto; }
  .cert-doc__frame { gap: 16px; }
  .cert-doc__foot { gap: 10px 20px; }
  .cert-doc__foot .cert-field:last-child { margin-left: 0; text-align: left; }
}

@media (max-width: 420px) {
  .hero-stats { grid-template-columns: 1fr; gap: 18px; }
}

/* =============================================================
   Certification map (.cmap) — the knowledge map. One component,
   two instances: aspirational (courses.html) + personal (profile.html).
   Static-first: every cell renders visible without JS. Single accent
   (Skywave), purple only on the Base Connect row. No new colours/eases.
   ============================================================= */
.cmap { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); overflow: hidden; }
.cmap-head, .cmap-row {
  display: grid; grid-template-columns: 248px 1fr 1fr 190px; gap: 14px;
  align-items: center; padding: 12px 22px;
}
.cmap-head { padding-top: 20px; padding-bottom: 14px; }
.cmap-hcol { font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.cmap-hcol:first-child { color: var(--c-faint); }
.cmap-row { border-top: 1px solid var(--c-border); }

/* Product cell */
.cmap-prod { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cmap-ic { flex-shrink: 0; color: var(--c-primary); display: inline-flex; }
.cmap-ic svg { width: 24px; height: 24px; }
.cmap-prod.is-connect .cmap-ic { color: var(--c-purple); }   /* Base Connect only */
.cmap-prod-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; min-width: 0; }
.cmap-prod-meta { display: block; font-size: 13px; font-weight: 500; color: var(--c-muted); margin-top: 2px; }
/* The product cell is a link to the path page (/sciezki/{slug}); the global
   `a { color: inherit }` reset means it needs an explicit hover of its own. */
a.cmap-prod .cmap-prod-name { transition: color .15s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.cmap-prod:hover .cmap-prod-name { color: var(--c-link); }
}

/* Level cells */
.cmap-cell {
  min-height: 56px; border-radius: var(--radius-ui); padding: 9px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--c-ink-2);
  background: #fff; box-shadow: inset 0 0 0 1px var(--c-border);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s var(--ease-out);
}
.cmap-cg { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-primary); }
.cmap-cg svg { width: 18px; height: 18px; }
.cmap-cl { min-width: 0; line-height: 1.3; }
.cmap-cell.is-done { background: var(--c-primary); color: #fff; box-shadow: none; }
.cmap-cell.is-done .cmap-cg { color: #fff; }
.cmap-cell.is-locked, .cmap-cell.is-prod { background: var(--c-soft); color: var(--c-muted); box-shadow: none; }
.cmap-cell.is-locked .cmap-cg, .cmap-cell.is-prod .cmap-cg { color: var(--c-faint); }
/* Level that is not part of this path at all: a blank grey tile (no glyph, no
   "w produkcji" — that label is reserved for a course we really are recording). */
.cmap-cell.is-empty { background: var(--c-soft); color: var(--c-faint); box-shadow: none; }
.cmap-mini { margin-left: auto; width: 64px; height: 5px; border-radius: var(--radius-pill); background: var(--c-soft); overflow: hidden; flex-shrink: 0; }
.cmap-mini span { display: block; height: 100%; width: var(--p, 0%); background: var(--c-primary); border-radius: var(--radius-pill); }
a.cmap-cell:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  a.cmap-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
  a.cmap-cell.is-done:hover { box-shadow: var(--shadow-lift); }
}
/* Rail-hover highlight (progressive enhancement; JS toggles .is-hot) */
.cmap-cell.is-hot { box-shadow: inset 0 0 0 2px var(--c-primary); }
.cmap-cell.is-done.is-hot { box-shadow: inset 0 0 0 2px #fff; }
.cmap-spec.is-hot .cmap-medal { box-shadow: 0 0 0 3px var(--c-primary-tint); }

/* Specialist cell (single connector, grid-aligned) */
.cmap-spec { display: flex; align-items: center; gap: 10px; position: relative; }
.cmap-spec::before { content: ''; position: absolute; left: -14px; top: 50%; width: 14px; height: 1px; background: var(--c-border-strong); }
.cmap-medal {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-soft); color: var(--c-faint);
  transition: box-shadow .18s var(--ease-out);
}
.cmap-medal svg { width: 17px; height: 17px; }
.cmap-spec-name { font-size: 13.5px; font-weight: 600; color: var(--c-ink-2); line-height: 1.25; }
.cmap-spec.is-earned .cmap-medal { background: var(--c-primary); color: #fff; }
.cmap-spec.is-earned .cmap-spec-name { color: var(--c-ink); }

/* Composite rail (how single certs flow up into Base titles) */
.cmap-foot { border-top: 1px solid var(--c-border-strong); padding: 4px 22px 10px; }
.cmap-comp { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--c-border); }
.cmap-comp:first-child { border-top: 0; }
.cmap-comp .cmap-medal { width: 42px; height: 42px; }
.cmap-comp .cmap-medal svg { width: 21px; height: 21px; }
.cmap-comp.is-earned .cmap-medal { background: var(--c-primary); color: #fff; }
.cmap-comp-txt strong { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.cmap-comp-txt span { font-size: 13px; color: var(--c-muted); }
.cmap-comp-side { min-width: 190px; }
.cmap-comp-count { font-size: 13px; color: var(--c-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmap-next { margin: 2px 22px 0; padding: 14px 16px; background: var(--c-primary-tint); border-radius: var(--radius-ui); font-size: 13.5px; color: var(--c-primary-deep); display: flex; gap: 10px; align-items: flex-start; }
.cmap-next svg { flex-shrink: 0; margin-top: 1px; }

@media (max-width: 1024px) {
  .cmap-head { display: none; }
  .cmap-row { grid-template-columns: 1fr 1fr; grid-template-areas: "prod prod" "basic adv" "spec spec"; gap: 10px; padding: 16px 18px; }
  .cmap-prod { grid-area: prod; }
  .cmap-cell[data-lvl="basic"] { grid-area: basic; }
  .cmap-cell[data-lvl="adv"] { grid-area: adv; }
  .cmap-spec { grid-area: spec; padding-top: 2px; }
  .cmap-spec::before { display: none; }
  .cmap-lvltag { display: inline; margin-right: 4px; color: var(--c-faint); }   /* level name inside cell on mobile */
}
@media (min-width: 1025px) { .cmap-lvltag { display: none; } }
@media (max-width: 640px) {
  .cmap-comp { grid-template-columns: 42px 1fr; }
  .cmap-comp-side { grid-column: 1 / -1; padding-left: 58px; }
}

/* Certification tiers ladder (certificates.html) */
.tier-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 22px; align-items: start; padding: 28px 0; border-top: 1px solid var(--c-border); }
.tier-row:first-child { border-top: 0; }
.tier-num { font-size: 34px; font-weight: 700; color: var(--c-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.tier-row h3 { font-size: 21px; letter-spacing: -0.015em; }
.tier-row > div > p { color: var(--c-muted); font-size: 14.5px; margin-top: 6px; max-width: 62ch; }
.tier-count { font-size: 13px; color: var(--c-faint); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.tier-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@media (max-width: 640px) {
  .tier-row { grid-template-columns: 40px 1fr; }
  .tier-count { grid-column: 1 / -1; text-align: left; margin-top: 2px; }
}

/* =============================================================
   Homepage entry layer: hero search, beginner on-ramp, map foot.
   Existing tokens only. No new colours, radii or eases.
   ============================================================= */

/* Hero search is a native GET form posting to courses.html, so it works
   with JS off; app.js adds the live results panel on top of that. */
.hero-search { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; }
.hero-search .search { max-width: none; width: 100%; }
/* The field wraps the input AND the results panel, so the panel anchors to the
   input's width rather than the whole form (the submit button sits outside). */
.hero-search__field { position: relative; flex: 1 1 430px; max-width: 480px; text-align: left; }

/* ---------- Hero live results ----------
   Built by app.js from data/curriculum.js. Empty and [hidden] until then, so
   with JS off there is no stray empty box under the field. */
.hero-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: #fff;
  border-radius: var(--radius-ui);
  box-shadow: var(--shadow-card);
  padding: 6px;
  /* Room for 8 rows plus up to four group headers and the footer link. */
  max-height: min(62vh, 524px); overflow-y: auto;
  text-align: left;
  /* Pin the ink: .hero.is-onblue sets color:#fff on the whole hero, and this
     panel is white. Without this, group headers and <mark> inherit white. */
  color: var(--c-ink);
}
.hero-results[hidden] { display: none; }
.hero-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  transition: background-color .12s var(--ease-out);
}
.hero-result:hover, .hero-result.is-active { background: var(--c-primary-tint); }
.hero-result__ic {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--c-primary-tint); color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
}
.hero-result__ic svg { width: 18px; height: 18px; }
/* All three are spans (valid inside the <a>), so they need explicit block. */
.hero-result__txt { min-width: 0; flex: 1; display: block; }
.hero-result__t { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.hero-result__m { display: block; font-size: 13px; color: var(--c-muted); margin-top: 3px; }
.hero-result__tag { font-size: 12px; font-weight: 600; color: var(--c-muted); white-space: nowrap; flex-shrink: 0; }
.hero-result.is-soon .hero-result__ic { background: var(--c-soft); color: var(--c-faint); }
/* Base Connect keeps its reserved accent even in the results list. */
.hero-result.is-connect .hero-result__ic { background: var(--c-purple-tint); color: var(--c-purple); }
.hero-results__empty { padding: 16px 14px; font-size: 14px; color: var(--c-muted); }
.hero-results__all {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px; padding: 11px 12px;
  border-top: 1px solid var(--c-border);
  font-size: 13.5px; font-weight: 600; color: var(--c-link);
}
.hero-results__all:hover { background: var(--c-soft); }

/* Live-search result groups: four families in ONE listbox, in the fixed
   priority order the server sends. Families are told apart by glyph + header,
   never by colour — four accent hues in an 8-row panel fight each other. */
.hero-results__grp + .hero-results__grp { border-top: 1px solid var(--c-border); margin-top: 4px; padding-top: 4px; }
.hero-results__group {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 12px 4px;
  font-size: 12.5px; font-weight: 600; color: var(--c-faint);
}
.hero-results__n { font-size: 12px; font-weight: 600; color: var(--c-faint); }
/* A long unbroken token must never widen the panel (375px has no h-scroll). */
.hero-result__t { overflow-wrap: anywhere; }
.hero-result__m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-result__s {
  display: block; font-size: 12.5px; color: var(--c-faint); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Highlight by weight, not by a chromatic background. */
.hero-results mark { background: transparent; color: inherit; font-weight: 700; }
.hero-results__loading { display: flex; flex-direction: column; gap: 8px; padding: 8px 6px; }
.hero-results__loading .skeleton { display: block; height: 44px; }
/* Refetching with the panel already open: dim, do not re-lay-out. */
.hero-results.is-stale .hero-results__grp { opacity: .55; }
/* The hero's white focus ring would be invisible on the white panel. */
.hero.is-onblue .hero-results :where(a, button):focus-visible { outline-color: var(--c-primary); }
/* Phone sizing MUST sit after the base .hero-result* rules above: a media
   query adds no specificity, so an earlier @media block loses to a later
   plain rule. (The .hero-search__field override up in the 640px block has the
   same problem and is a no-op today — separate, pre-existing.) */
@media (max-width: 640px) {
  /* Shorter panel, smaller glyph, no badge — the group header already names
     the family and the meta line carries the substance. */
  .hero-results { max-height: min(56vh, 420px); }
  .hero-result { padding: 9px 10px; gap: 10px; }
  .hero-result__ic { width: 28px; height: 28px; }
  .hero-result__ic svg { width: 15px; height: 15px; }
  .hero-result__tag { display: none; }
}

/* Beginner on-ramp: one wide card, real panel screenshot beside the copy */
.start-card {
  display: grid; grid-template-columns: 296px 1fr; align-items: stretch;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}
a.start-card:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  a.start-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
.start-card__media { position: relative; overflow: hidden; background: var(--c-primary-tint); min-height: 208px; }
.start-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.start-card__body { padding: 30px 34px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.start-card__body h3 { font-size: 24px; letter-spacing: -0.018em; }
.start-card__body .card-desc { max-width: 56ch; }

/* Goal tiles: the second entry axis next to the product taxonomy */
.tile .tile-meta { font-size: 13.5px; color: var(--c-muted); font-variant-numeric: tabular-nums; margin-top: 5px; }

/* Homepage map instance: a foot row pointing at the full 10-row map */
.cmap-more {
  border-top: 1px solid var(--c-border-strong);
  padding: 16px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: var(--c-ink-2);
}

/* Steps stacked in one column, beside the certificate artwork on the blue band */
.band-grow .step-grid.is-stack { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
.band-grow .step-grid.is-stack .step-cell h3 { font-size: 19px; }

/* The certificate artwork is a white card sitting ON the blue band, so it must
   opt out of the band's ink flip (h4 and the field values inherit this). */
.band-grow .cert-doc { color: var(--c-ink); }

/* Quiet pill for colour bands (replaces the per-instance inline rgba style) */
.pill-on-dark { background: rgba(255, 255, 255, .16); color: #fff; }

/* Named replacements for one-off inline styles on the homepage */
.card-thumb.is-connect { background: var(--c-purple-tint); }   /* Base Connect only */
.webinar-host { color: rgba(255, 255, 255, .85); font-size: 14.5px; }
.webinar-card__foot { padding: 16px 20px; }
.accordion.is-narrow { max-width: 880px; }
.cta-tail { padding: 0 0 var(--s-section); }
.cta-panel__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.gap-sm { gap: var(--s-base); }

@media (max-width: 640px) {
  .start-card { grid-template-columns: 1fr; }
  .start-card__media { min-height: 0; aspect-ratio: 16 / 9; }
  .start-card__body { padding: 22px 20px; }
  .cmap-more { padding: 16px 18px; }
}

/* ---------- Reduced-motion net (global off-switch) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================================
   PRODUCTION LAYER — everything below exists only in the live academy
   (not in the BASE_ACADEMY_PAGE_NEW mock) plus small production fixes to
   shared components. The block ABOVE this line is a verbatim port of
   BASE_ACADEMY_PAGE_NEW/styles.css (2026-08 redesign); keep the two in
   sync separately. scss/site/site.scss mirrors this whole file 1:1.
   ===================================================================== */

/* ---------- Breadcrumbs bar (production feature; the mock has none) ---------- */
.breadcrumbs { border-bottom: 1px solid var(--c-border); background: var(--c-canvas); }
.breadcrumbs__list { list-style: none; margin: 0; padding: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--c-muted); }
.breadcrumbs__item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.breadcrumbs__item:not(:last-child)::after { content: "\203A"; color: var(--c-faint); }
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-link); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--c-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch; }

/* ---------- Multi-host byline (.spk-faces) ----------
   A webinar can be run by two or three people: the byline then reads
   "Prowadzą" and lists every name, so the faces have to sit side by side.
   They overlap slightly, each ringed in the page colour to stay readable. */
.spk-faces { display: inline-flex; align-items: center; flex: none; }
.spk-faces .avatar { width: 34px; height: 34px; font-size: 12px; box-shadow: 0 0 0 2px var(--c-canvas); }
.spk-faces .avatar + .avatar { margin-left: -10px; }

/* ---------- Featured-webinar tiles (.wbn-tile) ----------
   Shared by the homepage webinar section and the top of /webinary. The 16:9
   graphic is the whole visual: marketing bakes the title and the date into it,
   so nothing is laid over it (no pill, no heading, no darkening gradient — a
   scrim would only muddy artwork it no longer has to make text readable).
   The white bar underneath carries the admin's "Podpis", or the presenters.

   Composition: one big tile, two stacked beside it. The ratio is 2.4:1, not
   the 1.6:1 of the pre-16:9 design, because the tiles no longer stretch — a
   strict 16:9 box derives its height from its width, and at 2.4:1 the big tile
   and the two-tile stack land on the same height (0.3px apart in the 1200px
   container). The leftover pixels go into a white bar, never into a cropped
   graphic: .wbn-tile__bar grows, and the stack spaces its two tiles out. */
.wbn-tiles { display: grid; gap: 24px; align-items: stretch; }
.wbn-tiles--feature { grid-template-columns: 2.4fr 1fr; }
.wbn-tiles--pair { grid-template-columns: repeat(2, 1fr); }
/* A lone webinar: full bleed would be a 660px-tall graphic. */
.wbn-tiles--solo { grid-template-columns: minmax(0, 720px); }
.wbn-tiles__stack { display: flex; flex-direction: column; gap: 24px; justify-content: space-between; }
.wbn-tile {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--radius-card);
  /* A 1px ring, then a card-level lift. Both sections sit on the white canvas,
     so a blurred shadow alone left the white caption bar bleeding into the page
     — only a hard edge defines where the card ends. The ring is --c-border-STRONG,
     not --c-border: measured against #fff the latter is a 1.19:1 line, which is
     what "rozlewa się" looked like; #D5DAE3 reads 1.40:1 and still stays quiet.
     It has to be an OUTSET ring: the tile clips its 16:9 artwork, and an inset
     one (the .cmap-cell pattern) would be painted under the image and vanish
     along the top edge. --shadow-card, not --shadow-soft, because these tiles
     are the page's hero-level component (the same lift the /webinary booking
     card carries). */
  box-shadow: 0 0 0 1px var(--c-border-strong), var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}
.wbn-tile__art {
  display: block; position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-primary);
}
.wbn-tile__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fallback only: a webinar with no artwork keeps its title on the tile. */
.wbn-tile__t {
  position: absolute; inset: auto 20px 20px 20px;
  color: #fff; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em;
}
.wbn-tile__bar {
  display: block;
  flex: 1;                 /* absorbs the row's leftover height (it is white) */
  padding: 15px 18px;
  background: #fff;
  font-size: 14px; line-height: 1.45; color: var(--c-ink-2);
  border-top: 1px solid var(--c-border);
}
@media (max-width: 900px) {
  /* The feature composition needs the width; below it every tile is a card. */
  .wbn-tiles--feature, .wbn-tiles--pair { grid-template-columns: 1fr; }
  .wbn-tiles__stack { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wbn-tiles__stack { grid-template-columns: 1fr; }
}
a.wbn-tile:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  /* The ring darkens with the lift, so hover reads as the card coming forward. */
  a.wbn-tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--c-border-strong), var(--shadow-lift); }
}

/* ---------- Archive row thumbnail (.wbn-arch__play) ----------
   Was a plain dark square. A 16:9 crop of the recording's own artwork at the
   same height tells the rows apart at a glance; the play glyph stays on top,
   on a solid black disc so it survives bright artwork. The dark square remains
   the fallback for a recording with no graphic. */
.wbn-arch__play { width: 80px; height: 45px; position: relative; overflow: hidden; }
.wbn-arch__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wbn-arch__play.is-photo::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: var(--c-dark); }
.wbn-arch__play svg { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .wbn-arch__play { width: 64px; height: 36px; }
  .wbn-arch__play.is-photo::after { width: 26px; height: 26px; }
}

/* ---------- Recording row cover (.podcast-cover.is-thumb) ----------
   Same idea for the homepage "Nie zdążyłeś na żywo?" rows: the 88px dark
   square becomes a small 16:9 still of the recording with the play glyph on
   it. The row's first track has to widen with it, and the dark block stays
   underneath as the fallback for a recording with no graphic. */
.podcast-row:has(.podcast-cover.is-thumb) { grid-template-columns: 160px minmax(0, 1fr) auto; }
.podcast-cover.is-thumb {
  width: 160px; height: 90px;
  position: relative; overflow: hidden;
}
.podcast-cover.is-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.podcast-cover.is-thumb:has(img)::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: var(--c-dark); }
.podcast-cover.is-thumb svg { position: relative; z-index: 1; }
@media (max-width: 640px) {
  /* Phones: the row drops its trailing action and the still shrinks with it. */
  .podcast-row:has(.podcast-cover.is-thumb) { grid-template-columns: 112px minmax(0, 1fr); }
  .podcast-cover.is-thumb { width: 112px; height: 63px; }
}

/* ---------- Draft-preview banner (admin "Podgląd") ---------- */
.preview-banner { background: var(--c-yellow); color: var(--c-ink); font-size: 14px; line-height: 1.5; padding: 10px 0; }
.preview-banner .container { display: flex; align-items: flex-start; gap: 10px; }
.preview-banner svg { flex: none; margin-top: 3px; }
.preview-banner strong { font-weight: 700; }

/* ---------- Certificate name (imię + nazwisko podawane raz) ----------
   Standing bar under the nav for an account that still owes us the name,
   the hint under the registration inputs, and the one-shot profile card. */
.cert-name-bar { background: #eff6ff; border-bottom: 1px solid #bfdbfe; color: #1e3a8a; font-size: 14px; line-height: 1.5; padding: 10px 0; }
.cert-name-bar .container { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cert-name-bar svg { flex: none; }
.cert-name-bar span { flex: 1 1 260px; }
.cert-name-bar strong { font-weight: 700; }
.cert-name-bar .btn { flex: none; }
.cert-name-note { display: flex; gap: 8px; align-items: flex-start; margin: -4px 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--c-muted); }
.cert-name-note svg { flex: none; margin-top: 2px; color: var(--c-primary); }
.cert-name-card .card-body { display: flex; flex-direction: column; }
.cert-name-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .cert-name-grid { grid-template-columns: 1fr; } }

/* ---------- Heading-level widening ----------
   The public Hx hierarchy uses h2/h3 where the mock uses h4/h5 (no level
   jumps, decision 2026-07-21) — mirror the mock styles onto those levels. */
.tile h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.podcast-row h3 { font-size: 16px; margin-top: 4px; letter-spacing: -0.01em; }
.webinar-thumb h3 { font-size: 17px; line-height: 1.3; color: #fff; letter-spacing: -0.012em; max-width: 30ch; margin: 0; position: relative; z-index: 1; }
.webinar-thumb.is-tint h3, .webinar-thumb.is-yellow h3 { color: var(--c-ink); }
.checklist-header h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.014em; }
.empty-state h3 { color: var(--c-ink); margin-bottom: 8px; }
.start-card__body h3 + .card-desc { margin-top: 0; }

/* Badges must float above photographic thumbs (production fix, 2026-08-18). */
.card-thumb-tag, .card-thumb-time { z-index: 2; }
.card-thumb.is-photo > *:not(.thumb-img) { position: relative; z-index: 1; }
.card-thumb.is-photo > .card-thumb-tag,
.card-thumb.is-photo > .card-thumb-time { position: absolute; }

/* ---------- Scroll-driven band growth (production enhancement) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band-grow { view-timeline-name: --growView; view-timeline-axis: block; }
    .band-grow .grow-bg { animation: growBg linear both; animation-timeline: --growView; animation-range: cover 0% cover 50%; }
    .cta-panel { view-timeline-name: --ctaView; view-timeline-axis: block; }
    .cta-panel .grow-bg { animation: growBgSubtle linear both; animation-timeline: --ctaView; animation-range: cover 0% cover 45%; }
  }
}
.cta-panel > *:not(.grow-bg) { position: relative; z-index: 1; }

/* ---------- Accordion inner + checklist separators (production content) ---------- */
.accordion-content > .acc-inner { overflow: hidden; min-height: 0; }
.acc-inner > * { padding: 0 4px 22px; max-width: 68ch; }
.checklist-item + .checklist-item { border-top: 1px solid var(--c-border); }

/* Featured-webinar stack: cards share the hero column height. */
.webinar-stack { justify-content: space-between; }
/* Byline/hover layering over the photographic hero card. */
.webinar-hero > div { position: relative; z-index: 1; }

/* ---------- Catalog toolbar (/kursy) ---------- */
.cat-toolbar { display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; }
.cat-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cat-count { font-size: 14px; color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Course player (ply-*) ---------- */
.ply-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-faint); margin-bottom: 14px; flex-wrap: wrap; }
.ply-crumbs a { color: var(--c-muted); }
.ply-crumbs a:hover { color: var(--c-link); }
.ply-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: #000; box-shadow: var(--shadow-card); display: block; }
.ply-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ply-facade { cursor: pointer; }
.ply-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ply-playbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: var(--c-dark); color: #fff; display: flex; align-items: center; justify-content: center; padding-left: 4px; transition: transform .2s var(--ease-out), background-color .2s var(--ease-out); }
.ply-facade:hover .ply-playbtn { transform: translate(-50%, -50%) scale(1.05); background: #2A2A2A; }
.ply-embed.is-playing .ply-poster, .ply-embed.is-playing .ply-playbtn { display: none; }
.ply-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 18px; font-size: 13.5px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.ply-fill-track { height: 6px; background: var(--c-soft); border-radius: 999px; overflow: hidden; }
.ply-fill { display: block; height: 100%; background: var(--c-primary); border-radius: 999px; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .35s var(--ease-out); }
.lesson-trigger .status.is-current { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-tint); }
.ply-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-faint); }
.cert-note { display: flex; gap: 12px; align-items: center; padding: 14px 18px; background: var(--c-primary-tint); border-radius: var(--radius-ui); margin-top: 22px; font-size: 14px; }
.cert-note a { color: var(--c-primary-deep); font-weight: 600; }
.prog-list { list-style: none; padding: 0; margin: 16px 0 0; }
.prog-list li { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--c-border); font-size: 14.5px; }
.prog-list li .pn { color: var(--c-faint); font-variant-numeric: tabular-nums; min-width: 22px; }
/* ---------- "Recording coming soon" (.ply-soon) ----------
   A webinar that already happened but whose YouTube link is not in yet. The
   poster stays as a dimmed backdrop and the box states the fact — the moment
   the link is pasted in the admin, this becomes the .ply-facade player. */
.ply-soon .ply-poster { filter: grayscale(.35) brightness(.5); }
.ply-soon__box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92%, 460px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; color: #fff;
}
.ply-soon__ic {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ply-soon__box strong { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.ply-soon__box span:last-child { font-size: 15.5px; line-height: 1.55; color: #fff; text-wrap: pretty; }
@media (max-width: 640px) {
  .ply-soon__box strong { font-size: 19px; }
  .ply-soon__box span:last-child { display: none; }   /* the headline carries it */
}
@media (max-width: 1024px) { .ply-embed { border-radius: 12px; } }

/* ---------- Auth pages (login / register / reset) ---------- */
.authcard { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 36px 32px; }
.authform { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.authform label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.authform input { height: 46px; padding: 0 14px; border-radius: var(--radius-ui); background: #fff; box-shadow: inset 0 0 0 1px var(--c-border); font-size: 15px; color: var(--c-ink); transition: box-shadow .15s var(--ease-out); }
.authform input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--c-primary); }
.authform .btn { margin-top: 6px; }
.consent-fields { display: flex; flex-direction: column; gap: 12px; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--c-ink-2); cursor: pointer; }
.authform label.consent { flex-direction: row; }
.consent input[type="checkbox"],
.consent input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; padding: 0; box-shadow: none; background: #fff; accent-color: var(--c-primary); }
.consent a { color: var(--c-link); font-weight: 600; text-decoration: underline; }
.choice-field { border: 1px solid var(--c-border); border-radius: var(--radius-ui); padding: 12px 14px 14px; margin: 0; min-width: 0; background: var(--c-soft); }
.choice-field legend { font-size: 13px; font-weight: 600; color: var(--c-ink-2); padding: 0 6px; margin-left: -6px; }
.choice-field .consent-fields { margin-top: 4px; }
.auth-error { background: #fdecec; color: #b42318; border-radius: var(--radius-ui); padding: 12px 16px; font-size: 14px; margin-top: 16px; }

/* ---------- Quiz pages ---------- */
.quiz-q { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 22px 24px; margin-bottom: 16px; }
.quiz-q__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.quiz-opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-ui); cursor: pointer; font-size: 14.5px; box-shadow: inset 0 0 0 1px var(--c-border); margin-top: 8px; transition: box-shadow .15s var(--ease-out); }
.quiz-opt:hover { box-shadow: inset 0 0 0 1px var(--c-border-strong); }
.quiz-opt input { accent-color: var(--c-primary); width: 18px; height: 18px; flex-shrink: 0; }
.quiz-text { width: 100%; padding: 12px 14px; border-radius: var(--radius-ui); box-shadow: inset 0 0 0 1px var(--c-border); font-size: 15px; margin-top: 8px; background: #fff; }
.quiz-text:focus { outline: none; box-shadow: inset 0 0 0 2px var(--c-primary); }
.quiz-result { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--radius-card); margin-top: 24px; box-shadow: var(--shadow-soft); background: #fff; }
.quiz-result__pct { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.quiz-result.is-pass .quiz-result__pct { color: var(--c-primary); }
.quiz-result.is-fail .quiz-result__pct { color: var(--c-faint); }
.quiz-review { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.quiz-review li { padding: 8px 12px; border-radius: var(--radius-ui); background: var(--c-soft); font-size: 14px; }
.quiz-review li.is-correct { background: var(--c-primary-tint); color: var(--c-primary-deep); font-weight: 600; }

/* ---------- Lesson content blocks (3-tab editor output) ---------- */
.prose .lesson-figure { margin: 1.5rem 0; }
.prose .lesson-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-ui); margin: 0; }
.prose .lesson-figure figcaption, .prose .lesson-video figcaption { margin-top: 8px; font-size: 13px; color: var(--c-muted); text-align: center; }
.prose .lesson-video { position: relative; margin: 1.5rem 0; }
.prose .lesson-video__facade { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-ui); overflow: hidden; background: #000; text-decoration: none; }
.prose .lesson-video__poster { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.prose .lesson-video__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--c-dark); color: #fff; }
.prose .lesson-video__facade:hover .lesson-video__play { background: var(--c-primary); }
.prose .lesson-video__facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose .lesson-file { margin: 1rem 0; }
.prose .lesson-file a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-ui); background: var(--c-primary-tint); color: var(--c-primary-deep); font-weight: 600; text-decoration: none; }
.prose .lesson-file a:hover { background: var(--c-primary-soft); }
.prose .lesson-file a::before { content: "\2193"; font-weight: 700; }
.prose .lesson-callout { --cc: #1a63e6; --cc-bg: #EAF2FF; --cc-ico: "i"; position: relative; margin: 1.5rem 0; padding: 16px 18px 16px 52px; border-radius: var(--radius-ui); background: var(--cc-bg); border-left: 3px solid var(--cc); color: var(--c-ink-2); }
.prose .lesson-callout::before { content: var(--cc-ico); position: absolute; left: 16px; top: 16px; width: 24px; height: 24px; border-radius: 999px; background: var(--cc); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; line-height: 1; font-family: var(--font-sans); }
.prose .lesson-callout > :last-child { margin-bottom: 0; }
.prose .lesson-callout--tip { --cc: #1a63e6; --cc-bg: #EAF2FF; --cc-ico: "\2726"; }
.prose .lesson-callout--note { --cc: #5D6470; --cc-bg: #F4F5F7; --cc-ico: "i"; }
.prose .lesson-callout--important { --cc: #c2410c; --cc-bg: #FFF4ED; --cc-ico: "!"; }
.prose .lesson-callout--success { --cc: #00885a; --cc-bg: #E7F9F0; --cc-ico: "\2713"; }
.prose .lesson-steps { list-style: none; counter-reset: step; margin: 1.5rem 0; padding: 0; }
.prose .lesson-steps li { counter-increment: step; position: relative; padding-left: 46px; margin-bottom: 14px; min-height: 32px; }
.prose .lesson-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 999px; background: var(--c-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.prose .lesson-card { margin: 1.5rem 0; padding: 20px 22px; border-radius: var(--radius-card); border: 1px solid var(--c-border); background: var(--c-canvas); box-shadow: var(--shadow-card); }
.prose .lesson-card__title { margin: 0 0 8px; font-size: 1.125rem; }
.prose .lesson-card__body > :first-child { margin-top: 0; }
.prose .lesson-card__body > :last-child { margin-bottom: 0; }
.prose .lesson-stat { margin: 1.5rem 0; padding: 18px 20px; border-radius: var(--radius-ui); background: var(--c-primary-tint); display: flex; flex-direction: column; gap: 4px; }
.prose .lesson-stat__num { font-size: 2.25rem; font-weight: 800; color: var(--c-primary-deep); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.prose .lesson-stat__label { font-size: .95rem; color: var(--c-ink-2); }
.prose .lesson-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 1.5rem 0; }
.prose .lesson-cols__col > :first-child { margin-top: 0; }
.prose .lesson-cols__col > :last-child { margin-bottom: 0; }
.prose .lesson-cta { margin: 1.5rem 0; }
.prose .lesson-cta a { text-decoration: none; }
.prose .lesson-cta a.btn-primary, .prose .lesson-cta .btn.btn-primary { color: var(--c-on-primary); }
.prose .lesson-faq { margin: 1rem 0; border: 1px solid var(--c-border); border-radius: var(--radius-ui); overflow: hidden; background: var(--c-canvas); }
.prose .lesson-faq summary { cursor: pointer; padding: 14px 44px 14px 18px; font-weight: 600; list-style: none; position: relative; }
.prose .lesson-faq summary::-webkit-details-marker { display: none; }
.prose .lesson-faq summary::after { content: "+"; position: absolute; right: 16px; top: 11px; font-size: 20px; color: var(--c-muted); }
.prose .lesson-faq[open] summary::after { content: "\2212"; }
.prose .lesson-faq__a { padding: 0 18px 14px; color: var(--c-ink-2); }
.prose .lesson-faq__a > :last-child { margin-bottom: 0; }
.prose .lesson-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.prose .lesson-table th, .prose .lesson-table td { border: 1px solid var(--c-border); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose .lesson-table thead th { background: var(--c-soft); font-weight: 700; }

/* ---------- Webinar registration (ClickMeeting-mapped form) ---------- */
.reg-panel { margin: 14px 0 46px; }
.reg-panel[hidden] { display: none; }
.reg-card { background: var(--c-soft); border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--c-border-strong), var(--shadow-card); padding: 28px; }
.reg-grid { display: grid; grid-template-columns: 1fr; gap: 16px 18px; }
@media (min-width: 720px) { .reg-grid { grid-template-columns: 1fr 1fr; } }
.reg-field { display: flex; flex-direction: column; min-width: 0; }
.reg-field--wide { grid-column: 1 / -1; }
.reg-label { font-size: 13px; font-weight: 600; color: var(--c-ink-2); margin-bottom: 6px; line-height: 1.35; padding: 0; }
.reg-req { color: var(--c-primary); font-weight: 700; }
.reg-input { width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: var(--radius-ui); background: #fff; box-shadow: inset 0 0 0 1px var(--c-border); font: inherit; font-size: 15px; color: var(--c-ink); transition: box-shadow .15s var(--ease-out); }
.reg-input::placeholder { color: var(--c-faint); }
.reg-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--c-primary); }
.reg-input--area { height: auto; padding: 12px 14px; resize: vertical; }
select.reg-input { padding-right: 34px; cursor: pointer; }
.reg-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.reg-choice__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.reg-opt { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--c-border); font-size: 14px; color: var(--c-ink-2); cursor: pointer; transition: box-shadow .15s var(--ease-out), background-color .15s var(--ease-out); }
.reg-opt:hover { box-shadow: inset 0 0 0 1px var(--c-border-strong); }
.reg-opt input { accent-color: var(--c-primary); width: 17px; height: 17px; margin: 0; flex: none; }
.reg-opt:has(input:checked) { background: var(--c-primary-tint); box-shadow: inset 0 0 0 1.5px var(--c-primary); color: var(--c-ink); }
.reg-consents { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--c-border-strong); }
.reg-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--c-muted); cursor: pointer; }
.reg-consent input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-primary); }
.reg-consent a { color: var(--c-link); font-weight: 600; text-decoration: underline; }
.reg-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.reg-status { font-size: 13.5px; color: var(--c-muted); }
.reg-note { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--c-faint); }
.reg-success { display: flex; gap: 14px; align-items: flex-start; background: var(--c-primary-tint); border-radius: var(--radius-card); padding: 22px 24px; }
.reg-success__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--c-primary); color: #fff; }
.reg-success strong { font-size: 16px; letter-spacing: -0.01em; color: var(--c-ink); }
.reg-success p { margin-top: 4px; font-size: 14px; color: var(--c-ink-2); }
.reg-success__cta { margin-top: 14px; }
.reg-success__cta .btn-primary { color: var(--c-on-primary); }
.reg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Opening the panel flashes it once so nobody misses that the form appeared
   (the toggle can sit a screenful above it). site.js adds .is-flash on open and
   drops it when the animation ends, so a re-open replays it. */
@keyframes regFlash {
  0%   { background: var(--c-primary-tint); box-shadow: inset 0 0 0 2px var(--c-primary), 0 0 0 0 rgba(47, 125, 255, .35), var(--shadow-card); }
  55%  { background: var(--c-primary-tint); box-shadow: inset 0 0 0 2px var(--c-primary), 0 0 0 14px rgba(47, 125, 255, 0), var(--shadow-card); }
  100% { background: var(--c-soft); box-shadow: inset 0 0 0 1px var(--c-border-strong), 0 0 0 0 rgba(47, 125, 255, 0), var(--shadow-card); }
}
.reg-panel.is-flash .reg-card { animation: regFlash .95s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .reg-panel.is-flash .reg-card { animation: none; }
}
@media (max-width: 640px) {
  .reg-grid { grid-template-columns: 1fr; }
  .reg-card { padding: 20px; }
  .reg-panel { margin-bottom: 32px; }
}

/* ---------- DORMANT: admin-managed logo slider (/admin/logos) ----------
   The 2026-08 redesign removed the marquee from the homepage; the admin
   feature and these styles stay so the section can be re-added by simply
   rendering it again (see the removed block in git history of home.php). */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--lm-copies, 2))); } }
.logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lm-label { font-size: 13.5px; color: var(--c-muted); font-weight: 500; margin-bottom: 18px; }
.lm-track { display: flex; width: max-content; align-items: center; animation: marquee 44s linear infinite; }
.lm-group { display: flex; align-items: center; gap: 14px; padding-right: 14px; flex: 0 0 auto; }
.lm-logo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 80px; padding: 0 24px; }
.lm-logo img { max-height: 38px; max-width: 148px; width: auto; height: auto; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) { .lm-track { animation: none !important; transform: none !important; } }

/* ---------- Page: /certyfikaty (ported from the mock's page-scoped block) ---------- */
.certs-hero .hero-stats .stat .n { font-size: 21px; }
.certs-hero .hero-stats .stat .l { font-size: 14px; }
.tier-row.is-platform { padding-bottom: 18px; }
.plat-panel { position: relative; overflow: hidden; border-radius: 20px; color: #fff; padding: 34px 36px; margin-bottom: 34px; }
.plat-panel .grow-bg { background: var(--grad-sky); border-radius: 20px; }
.plat-panel > *:not(.grow-bg) { position: relative; z-index: 1; }
.plat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.plat-badge { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.plat-badge svg { width: 20px; height: 20px; }
.plat-cell h3 { font-size: 18px; color: #fff; letter-spacing: -0.015em; }
.plat-cell p { color: rgba(255, 255, 255, .82); font-size: 14px; line-height: 1.55; margin-top: 6px; }
.earn-strip { border-top: 1px solid var(--c-border); padding-top: 22px; }
.earn-strip__k { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.earn-strip__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.earn-step { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--c-ink); }
.earn-step .num { font-weight: 500; color: var(--c-muted); }
.earn-step__n { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: var(--c-primary-tint); color: var(--c-primary-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; }
.earn-step__sep { color: var(--c-border-strong); display: inline-flex; }
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cert-tile { display: flex; gap: 14px; background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 20px; }
.cert-tile__medal { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--c-primary-tint); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; }
.cert-tile__medal svg { width: 19px; height: 19px; }
.cert-tile.is-connect .cert-tile__medal { background: var(--c-purple-tint); color: var(--c-purple); }
.cert-tile__body { min-width: 0; flex: 1; }
.cert-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cert-tile__group { font-size: 12px; font-weight: 600; color: var(--c-muted); }
.cert-tile__code { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--c-ink-2); background: var(--c-soft); padding: 3px 8px; border-radius: var(--radius-sm); }
.cert-tile__auto { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--c-primary); }
.cert-tile__name { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; margin: 8px 0 8px; }
.cert-tile__req { display: block; font-size: 13px; color: var(--c-muted); line-height: 1.5; }
.cert-tile .btn-text { font-size: 13.5px; }
.cert-tile__soon { display: inline-block; font-size: 13px; font-weight: 600; color: var(--c-faint); }
.verify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.verify-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 22px 26px; }
.verify-card .k { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-faint); }
.verify-card .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; margin-top: 3px; }
.verify-status { display: inline-flex; align-items: center; gap: 8px; background: var(--c-primary-tint); color: #1450B8; border-radius: var(--radius-pill); padding: 8px 14px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) {
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .plat-grid { grid-template-columns: 1fr; gap: 22px; }
  .verify-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .cert-grid { grid-template-columns: 1fr; }
  .plat-panel { padding: 26px 20px; }
  .earn-strip__row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .earn-step__sep { display: none; }
}

/* ---------- Page: /certyfikaty/weryfikacja (vf-*) ---------- */
.vf-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.vf-form .search { max-width: 420px; }
.vf-form input { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.vf-example { font-size: 13.5px; color: var(--c-muted); margin-top: 14px; }
.vf-example a { color: var(--c-link); font-weight: 600; }
.vf-card { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 30px 32px; max-width: 720px; }
.vf-status { display: inline-flex; align-items: center; gap: 8px; background: var(--c-primary-tint); color: var(--c-primary-deep); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 14px; font-weight: 600; }
.vf-status.is-missing { background: var(--c-soft); color: var(--c-ink-2); display: block; font-weight: 600; }
.vf-card.is-missing { box-shadow: var(--shadow-soft); }
.vf-hint { font-size: 14.5px; color: var(--c-muted); margin-top: 14px; max-width: 60ch; line-height: 1.6; }
.vf-person { display: flex; align-items: center; gap: 20px; margin-top: 24px; }
.vf-photo { width: 84px; height: 84px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--c-primary-tint); color: var(--c-primary-deep); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 600; }
.vf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-who { min-width: 0; }
.vf-name { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--c-ink); }
.vf-cert { font-size: 16px; font-weight: 600; color: var(--c-primary-deep); margin-top: 5px; }
.vf-kind { font-size: 13.5px; color: var(--c-muted); margin-top: 3px; }
.vf-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border-top: 1px solid var(--c-border); margin-top: 24px; padding-top: 20px; }
.vf-field .k { font-size: 12px; color: var(--c-faint); }
.vf-field .v { font-size: 15px; font-weight: 600; color: var(--c-ink); margin-top: 3px; }
.vf-covers { border-top: 1px solid var(--c-border); margin-top: 20px; padding-top: 18px; }
.vf-covers__k { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; }
.vf-covers p { font-size: 14.5px; color: var(--c-ink-2); line-height: 1.6; max-width: 66ch; }
@media (max-width: 640px) {
  .vf-form .btn { width: 100%; }
  .vf-card { padding: 24px 20px; }
  .vf-person { gap: 16px; }
  .vf-photo { width: 64px; height: 64px; font-size: 24px; }
  .vf-name { font-size: 22px; }
  .vf-fields { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- Page: webinar detail (agenda + poster + photo thumbs) ---------- */
.wbn-agenda { max-width: 880px; border-bottom: 1px solid var(--c-border); }
.wbn-row { display: grid; grid-template-columns: 88px 1fr; gap: 24px; padding: 18px 4px; border-top: 1px solid var(--c-border); align-items: baseline; }
.wbn-time { font-variant-numeric: tabular-nums; color: var(--c-faint); font-size: 14px; font-weight: 600; }
/* Base Week session plan: its rows are NUMBERED, not timed (the minute a part
   starts is no longer shown), so the first column only has to hold "1." The
   width hangs off what the row CONTAINS, so it cannot drift from the markup. */
.wbn-no { font-variant-numeric: tabular-nums; color: var(--c-faint); font-size: 14px; font-weight: 600; }
.wbn-row:has(.wbn-no) { grid-template-columns: 34px 1fr; gap: 18px; }
.wbn-item strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.wbn-item p { font-size: 14px; color: var(--c-muted); margin-top: 4px; }
.wbn-video { max-width: 880px; }
.wbn-video .video-frame .wbn-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(.42); }
.wbn-video .video-frame::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(18, 18, 18, 0) 42%, rgba(18, 18, 18, .62) 100%); }
.wbn-video .video-frame .play { position: relative; z-index: 2; }
.wbn-video .video-time { z-index: 2; }
.webinar-thumb.wbn-photo { background: var(--c-dark); }
.webinar-thumb.wbn-photo .wbn-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.webinar-thumb.wbn-photo::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18, 18, 18, .12) 0%, rgba(18, 18, 18, .66) 100%); }
.webinar-thumb.wbn-photo h5, .webinar-thumb.wbn-photo h3 { position: relative; z-index: 2; }
.webinar-thumb.wbn-photo .webinar-date { z-index: 2; }
@media (max-width: 640px) {
  .wbn-row { grid-template-columns: 64px 1fr; gap: 14px; }
  .wbn-row:has(.wbn-no) { grid-template-columns: 26px 1fr; gap: 12px; }
  .wbn-fields { grid-template-columns: 1fr 1fr; }
}

/* ---------- Production touch-ups on shared components ---------- */
/* Text course-thumb in the Connect accent: ink on the light purple tint. */
.card-thumb.is-connect { color: var(--c-ink); }
.card-thumb.is-connect .card-thumb-tag { background: rgba(18, 18, 18, .86); color: #fff; }
/* On /profil each compact certificate is a link to its PDF. */
a.cert-doc { display: block; color: inherit; transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.cert-doc:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
/* Featured-webinar title on /webinary uses h2 semantics with h1 sizing. */
.wbn-hero h2 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.026em; }

/* Latent mock bug fixed in production: .podcast-row has no mobile rule, so
   its 88px+1fr+auto grid overflowed a 375px viewport (measured +23px on the
   home recordings). Stack the trailing action under the text on phones. */
@media (max-width: 640px) {
  .podcast-row { grid-template-columns: 64px minmax(0, 1fr); }
  .podcast-row > .btn { grid-column: 1 / -1; justify-self: start; }
}

/* A pill is nowrap by design — a label should not break mid-phrase — but a
   few real labels are simply longer than a phone: "Zobacz wszystkie wpisy na
   blogu Base" measures 325px and pushed /materialy open at 320px, and the
   lesson toolbar's "Zaloguj się, aby zapisać postęp" did the same to the
   player. Inside the page a pill may therefore grow TALLER instead of wider:
   the min-height keeps every short label pixel-identical to the fixed-height
   version, so only the labels that would have overflowed actually change.

   Scoped to `main` deliberately. Chrome outside it — above all the 68px top
   bar — negotiates widths in a flex/grid row, and there `white-space: normal`
   lets the pill shrink below its one-line width and wrap when there was room:
   measured, the nav's "Załóż konto" went from 113x44 to 107x63 and no longer
   fit the bar. Chrome labels are short and code-owned, never DB copy, so they
   keep the nowrap fixed-height form. */
@media (max-width: 640px) {
  main .btn { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 48px; padding: 10px 24px; }
  main .btn-sm { min-height: 44px; padding: 9px 18px; }
  main .btn-lg { min-height: 54px; padding: 12px 28px; }
  /* The lesson player's three actions (prev / mark watched / next) cannot sit
     on one line on a phone; the empty <span> that stands in for a missing
     "previous" would otherwise leave a gap in the stack. */
  .course-content { padding: 32px 16px; }
  .lesson-toolbar { flex-direction: column; align-items: stretch; padding: 14px 16px; }
  .lesson-toolbar > .btn { width: 100%; }
  .lesson-toolbar > span:empty { display: none; }
}

/* ---------- Podcasts (/podcasty) ----------
   Ported from the mock's page-scoped block in BASE_ACADEMY_PAGE_NEW/
   practice.html (that page keeps these rules in a <style> element because no
   other mock page uses them). Here they live in the production layer, since
   /podcasty is a real route. Two deliberate changes against the mock:
     - .ep-chapter's first column is wider: our rows are labelled "Termin",
       "Czas", "Tematy" (the mock had 00:00 timestamps and no chapter data
       exists for a Spotify/RSS episode);
     - the episode list carries the shared .filter-chips + .empty-state, so a
       filtered-out list behaves exactly like the course and webinar catalogs. */

/* Hero: cover-art led */
.episode-hero { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
/* .ep-hero__media wraps the cover so an embed can replace it in place. */
.ep-hero__media { min-width: 0; }
.ep-hero__cover {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  border-radius: 20px; overflow: hidden;
  /* Brand blue, not the dark surface: with object-fit: contain this box IS
     the letterbox around a square cover, and it is the same blue as the
     loading plate — so clicking play does not change the frame's colour. */
  background: var(--c-primary);
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
}
/* The box is the panel's shape, the artwork is square: `contain` keeps the
   whole cover visible and centred rather than letting it bleed past the
   box's edges, and the dark box shows through as the letterbox. */
.ep-hero__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.ep-hero__cover .play {
  position: absolute; right: 14px; bottom: 14px; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding-left: 4px;
  transition: transform .2s var(--ease-out), background-color .2s var(--ease-out);
}
.ep-hero__cover:active .play { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .ep-hero__cover:hover .play { transform: scale(1.05); background: #2A2A2A; }
}
.ep-hero__body { min-width: 0; }
.ep-series { font-size: 14.5px; color: var(--c-muted); max-width: 60ch; }
.ep-series strong { color: var(--c-ink); }
.ep-kicker { font-size: 13px; font-weight: 600; color: var(--c-primary); margin-top: 16px; }
.episode-hero h1 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.026em; margin-top: 8px; }
.ep-hero__by { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; font-size: 14.5px; color: var(--c-muted); }
.ep-hero__by .avatar { width: 34px; height: 34px; }
.ep-hero__by strong { color: var(--c-ink); }
.ep-hero__dot { color: var(--c-faint); }
.ep-hero__cta { margin-top: 26px; }
.platform-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* "Od czego zacząć" starter cards */
.start-ep { display: flex; flex-direction: column; overflow: hidden; }
.start-ep__cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-primary-tint); }
.start-ep__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.start-ep .card-body { display: flex; flex-direction: column; gap: 6px; }
.start-ep__kicker { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.start-ep__title { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }
.start-ep__why { display: block; font-size: 14px; color: var(--c-muted); line-height: 1.5; }

/* Episode list: native details/summary (expands with JS off) */
.pod-list { display: flex; flex-direction: column; gap: 12px; }
.ep-item { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); overflow: hidden; }
.ep-item > summary {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px; min-height: 44px;
  cursor: pointer; list-style: none;
  transition: background-color .15s var(--ease-out);
}
.ep-item > summary::-webkit-details-marker { display: none; }
.ep-item > summary:hover { background: var(--c-soft); }
.ep-item > summary:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -3px; }
.ep-item__cover { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-primary-tint); }
.ep-item__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Spans: only phrasing content is valid inside a summary element, so each one
   needs an explicit display or they run together on a single line. */
.ep-item__txt { flex: 1; min-width: 0; display: block; }
.ep-item__kicker { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.ep-item__title { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; margin-top: 3px; }
.ep-item__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--c-muted); margin-top: 5px; }
.ep-item__cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 16px; border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--c-border-strong);
  font-size: 14px; font-weight: 600; color: var(--c-ink);
}
.ep-item > summary:hover .ep-item__cta { background: #fff; box-shadow: inset 0 0 0 1px var(--c-ink); }
.ep-item__caret {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-soft); color: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s var(--ease-out), background-color .2s var(--ease-out);
}
.ep-item[open] > summary .ep-item__caret { transform: rotate(180deg); background: var(--c-primary-tint); color: var(--c-primary-deep); }
.ep-item[open] > summary .ep-item__cta { display: none; }

.ep-item__body { padding: 4px 20px 22px; border-top: 1px solid var(--c-border); }
/* Same split as the episode hero above: a narrow media column on the left, and
   ALL the text — description included — on the right (the description used to
   sit under the player and left the facts column half-empty). */
.ep-item__grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; margin-top: 20px; align-items: start; }
.ep-item__desc { font-size: 14.5px; line-height: 1.6; color: var(--c-ink-2); margin-top: 16px; }
/* In the right column the facts table follows the description; without this
   its top border sits right on the last line of text. */
.ep-item__desc + .ep-chapters { margin-top: 14px; }
.ep-item__h { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 10px; }

/* Player facade: cover + play. Upgrades to an inline embed only when the slot
   carries a real id (site.js initEpisodePlayers); otherwise it stays a link.
   NOTE: only the .video-frame form gets `display:flex`. .ep-player also sits on
   the hero's .btn, and a bare flex there beat .btn's inline-flex and stretched
   the button across the column. */
/* Brand blue, not .video-frame's dark surface: same treatment as the hero
   cover — the box IS the letterbox around a contained square artwork, and it
   matches the loading plate, so clicking play does not change the frame's
   colour. */
.video-frame.ep-player { position: relative; display: flex; margin-bottom: 0; background: var(--c-primary); }
.ep-player .ep-player__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; z-index: 0; }
.ep-player .video-time { position: relative; z-index: 1; }
.ep-player .play { position: absolute; right: 14px; bottom: 14px; z-index: 1; width: 56px; height: 56px; padding-left: 4px; }
/* The duration used to ride on a dimmed cover; the cover is no longer dimmed,
   so the label carries its own plate — same device as .card-thumb-time. */
.ep-player .video-time { position: absolute; bottom: 12px; left: 16px; background: rgba(18, 18, 18, .68); padding: 3px 8px; border-radius: var(--radius-pill); }
/* The player slot: holds the facade, the embed that replaces it and the source
   switcher. min-width:0 so a mounted iframe cannot blow out the grid.

   --ep-h is ONE height for the Spotify panel and for the artwork it replaces,
   so mounting the player moves nothing on the page. Measured before this:
   an archive tile pushed everything below it down 33px (facade 16:9 = 320px,
   panel 352px) and the phone hero yanked the page up 96px (square 327px,
   panel 232px). Scoped to slots that will actually mount Spotify (data-yt
   empty) — a YouTube slot is 16:9 on both sides already, so it matches by
   construction and must keep its aspect-ratio. */
.ep-media { min-width: 0; --ep-h: 352px; }
/* ONE rule covers both facades: the tile's 16:9 frame and the hero's square
   (.ep-player carries both). Reserving the height around a square cover was
   not enough — the page stayed put, but the block itself still grew 300 -> 352
   on mount, which is what reads as movement. The artwork is object-fit:
   contain on a brand-blue plate (both facades share the hero treatment), so
   the panel's shape only changes the letterbox, never the crop. */
.ep-media[data-yt=""] .ep-player { aspect-ratio: auto; height: var(--ep-h); }

/* The two embeds: YouTube is a 16:9 video frame, Spotify a fixed-height audio
   player that ignores aspect-ratio. Sized so the footprints nearly match, which
   is what keeps swapping sources from jumping the layout. */
.ep-embed { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.ep-embed iframe { display: block; width: 100%; border: 0; transition: opacity .25s var(--ease-out); }
.ep-embed.is-video { aspect-ratio: 16 / 9; background: #000; }
.ep-embed.is-video iframe { position: absolute; inset: 0; height: 100%; }
/* Spotify draws its own surface and its own 12px corners, so this box only
   reserves the height. Never force an aspect-ratio on it: the player crops. */
.ep-embed.is-audio { height: var(--ep-h); background: transparent; box-shadow: none; }
.ep-embed.is-audio iframe { height: var(--ep-h); }
/* Loading plate. The iframe can take 2-3 s to paint (Spotify especially) and
   an empty box in the artwork's place reads as a dead click, so the box holds
   the footprint as a brand-blue plate with a white spinner until the frame
   reports itself loaded (site.js initEpisodePlayers). These rules must stay
   BELOW .is-audio: same specificity, so source order is what wins the
   background back from `transparent`. */
.ep-embed.is-loading { background: var(--c-primary); box-shadow: var(--shadow-card); }
.ep-embed.is-loading iframe { opacity: 0; }
.ep-embed.is-loading::after {
  content: ''; position: absolute; left: 50%; top: 50%; margin: -18px 0 0 -18px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .38); border-top-color: #fff;
  animation: ep-spin .8s linear infinite;
}
@keyframes ep-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* Still a progress indicator, just slow enough not to read as motion. */
  .ep-embed.is-loading::after { animation-duration: 2.4s; }
}

/* Source switcher: shown when an episode exists in both places. Each button is
   a real link to the platform, so with JS off it still goes somewhere useful. */
.ep-src { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ep-src__btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--c-border);
  font-size: 13px; font-weight: 600; color: var(--c-ink-2);
  transition: box-shadow .15s var(--ease-out), background-color .15s var(--ease-out), color .15s var(--ease-out);
}
.ep-src__btn svg { flex-shrink: 0; opacity: .75; }
.ep-src__btn:hover { background: var(--c-soft); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-border-strong); }
.ep-src__btn.is-active { background: var(--c-primary-tint); color: var(--c-primary-deep); box-shadow: inset 0 0 0 1px var(--c-primary-soft); }
.ep-src__btn.is-active svg { opacity: 1; }
/* The hero's cover is its own slot, so its switcher sits under the platform row. */
.ep-hero__media .ep-src { justify-content: center; }

.ep-chapters { border-top: 1px solid var(--c-border); }
.ep-chapter { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 9px 2px; border-bottom: 1px solid var(--c-border); align-items: baseline; }
.ep-chapter .t { font-size: 13.5px; font-weight: 600; color: var(--c-primary); }
.ep-chapter .l { font-size: 14px; color: var(--c-ink-2); line-height: 1.45; }

.ep-guest { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.ep-guest .avatar { width: 42px; height: 42px; }
.ep-guest__txt { display: flex; flex-direction: column; font-size: 13.5px; color: var(--c-muted); }
.ep-guest__txt strong { font-size: 14.5px; color: var(--c-ink); }

.ep-listen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; font-size: 13.5px; }
.ep-listen__k { font-weight: 600; color: var(--c-muted); }
.ep-listen a { color: var(--c-link); font-weight: 600; }
.ep-listen a:hover { color: var(--c-primary-deep); }

/* Subscribe strip above the closing CTA */
.pod-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 30px 34px; border-radius: var(--radius-card);
  background: var(--c-soft);
}
.pod-sub .platform-row { margin-top: 0; }

@media (max-width: 1024px) {
  .episode-hero { grid-template-columns: 220px 1fr; gap: 32px; }
  /* Spotify's compact bar from here down. The hero column is 220px wide, so
     the full 352px panel would force the square cover into a 0.63 strip to
     keep the footprints equal; at 232px the cover stays near-square. */
  .ep-media { --ep-h: 232px; }
  .ep-item__grid { grid-template-columns: 220px 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .episode-hero { grid-template-columns: 1fr; gap: 24px; }
  /* The cover and the player that replaces it share one width, or the column
     jumps at the moment it mounts. */
  .ep-hero__cover { max-width: 100%; }
  .ep-hero__media { max-width: 100%; }
  .ep-hero__cta .btn { width: 100%; }
  .ep-item > summary { flex-wrap: wrap; padding: 14px 16px; gap: 14px; }
  .ep-item__cover { width: 52px; height: 52px; }
  .ep-item__cta { display: none; }          /* the caret is the affordance here */
  .ep-item__body { padding: 4px 16px 18px; }
  .ep-item__grid { grid-template-columns: 1fr; gap: 24px; }
  /* Length and topics each take their own line, so the middot orphaned. */
  .ep-item__meta { display: block; }
  .ep-item__meta > span + span { display: none; }
  .ep-item__meta > span:nth-child(3) { display: block; margin-top: 2px; }
  .ep-chapter { grid-template-columns: 84px 1fr; gap: 10px; }
  .pod-sub { padding: 24px 20px; }
}

/* Fallback player: only for a feed whose episodes are not on Spotify/YouTube
   (see $audioOnly in site/podcasty/index.php). Feeds hosted on Spotify for
   Creators resolve to a real episode id, so this stays unused there. */
.ep-audio { display: block; width: 100%; margin-top: 12px; }

/* ---------- Search results (/szukaj) ----------
   The page reuses the catalog/webinar/material components wholesale; these are
   the only additions. Family chips are anchors that jump to a section, so a
   family with no hits is shown muted rather than silently missing. */
.filter-chip.is-empty { opacity: .45; pointer-events: none; }
.sr-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; flex: 1 1 420px; }
.sr-form .search { max-width: none; width: 100%; flex: 1 1 260px; }
.sr-snippet { font-size: 13.5px; color: var(--c-muted); margin-top: 6px; line-height: 1.55; }
.sr-snippet mark { background: transparent; color: var(--c-ink); font-weight: 700; }
@media (max-width: 640px) {
  .sr-form { flex: 1 1 100%; }
  .sr-form .btn { width: 100%; }
}

/* =============================================================
   Base Week (event surface) — /base-week and /base-week/sesja/{slug}.
   Ported from BASE_ACADEMY_PAGE_BASE_WEEK/styles.css (lines 1688-1983).
   Everything here is additive: event nav -> event hero -> day strip ->
   agenda rows/rail -> session card -> speakers -> registration -> FAQ ->
   session page -> compact footer -> responsive -> expired state.

   Deliberately NOT ported: the .wbn-agenda/.wbn-row/.wbn-fields rules plus
   the reduced-motion net, which this stylesheet already defines above.
   (The homepage takeover hero and its week strip — .hero-event / .wstrip —
   WERE out of scope in 2026-09; they now live at the end of this file, as
   slide 1 of the homepage spotlight carousel.)
   ============================================================= */

/* ---------- Outcome tiles ("Co wyniesiesz", Base Week) ----------
   The day's name is a black band across the top of the tile, white on black,
   starting at the tile's own left edge; the promise underneath keeps the white
   card it always had (2026-09-14, Sebastian). The band deliberately echoes the
   black partner strip under the hero, which is what ties this section to it.

   The icon sits at the RIGHT end of the band. It used to come first, and being
   first is exactly what stopped the heading starting at the left — margin-left:
   auto pushes it over instead of dropping it, so the tile keeps its mark.

   Scoped by #co-wyniesiesz, which exists in one view only, plus the .bw-outcome
   class on the tiles themselves: .tile is shared with the home page, /materialy
   and /szukaj, and none of those may inherit a black header.

   The band has a min-height so a one-line and a two-line heading still produce
   the same black bar across a row of three; the heading is centred in it, so
   the extra height is shared above and below rather than stacking at the top. */
#co-wyniesiesz .tile.bw-outcome {
  display: block; align-items: stretch;
  padding: 0; overflow: hidden;
}
.bw-outcome__head {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 14px 20px;
  background: #000;
}
.bw-outcome__head h4 { color: #fff; min-width: 0; }
.bw-outcome__head .icon-box { margin-left: auto; height: 30px; color: #fff; }
.bw-outcome__body { padding: 16px 20px 18px; }
.bw-outcome__body p { margin-top: 0; }
@media (max-width: 640px) {
  /* One tile per row on a phone, so the headings no longer have to line up with
     each other — the band can shrink to its content. */
  .bw-outcome__head { min-height: 0; padding: 13px 18px; }
  .bw-outcome__body { padding: 14px 18px 16px; }
}
/* ---------- Event nav: the event's own wordmark, not a way back ----------
   Standalone chrome (2026-09-11): this slot used to hold a back link to the
   Academy. It now holds the event's own name, linking to the event's own home,
   with the brand dot the Academy nav gives its campaign item. justify-self
   keeps the hover pill around the words instead of stretching it across the
   whole 1fr grid column the bar gives this slot. */
.topnav.is-event .bw-brand {
  display: inline-flex; align-items: center; gap: 7px; justify-self: start;
  min-height: 44px; padding: 0 12px 0 6px; margin-left: -6px;
  border-radius: 10px;
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--c-ink);
  white-space: nowrap;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out);
}
.topnav.is-event .bw-brand::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-primary); flex-shrink: 0;
}
.topnav.is-event .bw-brand:hover { background: var(--c-soft); }
.topnav.is-over-hero .bw-brand { color: #fff; }
.topnav.is-over-hero .bw-brand::after { background: #fff; }
.topnav.is-over-hero .bw-brand:hover { background: rgba(255, 255, 255, .14); }
.topnav.is-event nav a.is-current { color: var(--c-primary-deep); font-weight: 600; }
.topnav.is-over-hero nav a.is-current { color: #fff; }
/* Campaign item in the Academy nav: Skywave text with the brand dot. Text
   colour only, no pill, so the bar keeps one accent. */
.topnav nav a.nav-event { color: var(--c-primary-deep); font-weight: 600; }
.topnav nav a.nav-event::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 5px;
  border-radius: 50%; background: var(--c-primary); vertical-align: middle; position: relative; top: -1px;
}
.topnav.is-over-hero nav a.nav-event { color: #fff; }
.topnav.is-over-hero nav a.nav-event::after { background: #fff; }
.topnav.is-over-hero.is-open nav a.nav-event { color: var(--c-primary-deep); }
.topnav.is-over-hero.is-open nav a.nav-event::after { background: var(--c-primary); }


/* ---------- Event hero (base-week.html) ---------- */
.hero-bw .hero-cta-row { justify-content: center; margin-bottom: 8px; }
.hero-bw .hero-start { font-size: 14.5px; color: rgba(255, 255, 255, .78); margin-top: 14px; }
.hero-bw .hero-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 920px;
  margin-top: 24px; padding-top: 18px;
}
.hero-bw .hero-stats .stat .n { font-size: 24px; white-space: nowrap; }
/* Tighter than the shared hero rhythm (2026-09-14, Sebastian). This hero's job
   is to hand over to the black partner strip directly beneath it, and that
   strip should be on the first screenful for as many visitors as possible.
   Moving the countdown into the bar gave back ~104px; the gaps above give back
   another ~90 — badge to headline 20 -> 12, headline to lead 22 -> 14, lead to
   buttons 32 -> 20, buttons to figures 40 -> 24 (and 26 -> 18 inside), and the
   hero's own foot 96 -> 52. Everything is scoped to .hero-bw, so the Academy's
   own centred blue hero keeps its airier spacing.
   The headline's top margin used to be an inline style on the <h1> in the view;
   it belongs here with the rest of the rhythm, where it can be seen next to the
   values it is balanced against. */
.hero-bw h1 { margin-top: 12px; margin-bottom: 14px; }
.hero-bw .lead { margin-bottom: 20px; }
.hero.is-onblue.hero-bw { padding-bottom: 52px; }

/* ---------- Gradient BG field (base-week.html) ----------
   "Base Week 2026 Gradient BG clean" (assets/), ported from the design-system
   component. Two surfaces run it: the event hero and the bonus box.

   .kv-field / .kv-scrim are shared primitives so the two can't drift apart.
   --kv-blur scales the blur per surface: the component's 60/70/80px reads as
   soft over a 745px-tall hero but would erase a 150px-tall card, so the card
   sets a smaller base and the 1.17/1.33 ratios carry over unchanged.
   Whoever owns the field must set position and overflow, plus isolation, so
   the blobs' mix-blend-mode meets that surface's own gradient rather than
   whatever the page paints behind it. */
.kv-field { position: absolute; inset: 0; overflow: hidden; }
.kv-field span { position: absolute; display: block; border-radius: 50%; }
.kv-field .f1 {
  left: -20%; top: -32%; width: 72%; height: 104%;
  background: radial-gradient(circle at 50% 50%, rgba(47, 125, 255, .9), rgba(47, 125, 255, 0) 70%);
  filter: blur(var(--kv-blur)); mix-blend-mode: screen; opacity: .7;
}
.kv-field .f2 {
  right: -24%; bottom: -38%; width: 76%; height: 108%;
  background: radial-gradient(circle at 50% 50%, rgba(81, 143, 255, .78), rgba(81, 143, 255, 0) 68%);
  filter: blur(calc(var(--kv-blur) * 1.17)); mix-blend-mode: screen; opacity: .6;
}
.kv-field .f3 {
  left: 14%; bottom: -46%; width: 52%; height: 82%;
  background: radial-gradient(circle at 50% 50%, rgba(50, 95, 236, .5), rgba(50, 95, 236, 0) 72%);
  filter: blur(calc(var(--kv-blur) * 1.33)); mix-blend-mode: screen; opacity: .4;
}
/* Flat, not a vignette: this version of the component darkens evenly, which
   is what keeps the sweeps and dots legible at the edges too. */
.kv-scrim { position: absolute; inset: 0; background: rgba(6, 12, 18, .4); }

.hero.is-onblue.hero-bw {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--grad-kv) #081116;
  --kv-blur: 60px;
}
/* Lift the event hero's copy toward the nav: 84px of air down to 24px, i.e.
   60px higher. That is the floor, not a taste call — the hero is pulled up by
   its own --hero-pull, so the first line of copy meets the sticky bar's lower
   edge at 0 and any less would park the date pill behind it. Dropping the
   "Start za N dni" line takes another 38px out of the block below the buttons,
   so the stats row lands ~98px higher than before. */
.hero.is-onblue.hero-bw { --hero-top-gap: 24px; }
.hero-bw > .container { position: relative; z-index: 1; }
/* No z-index on .hero-kv on purpose: a z-index would make it a stacking
   context and cut the blobs' blend modes off from the gradient. Paint order
   below the copy comes from the container's z-index: 1 instead. */
.hero-kv { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* slice = background-size: cover for an SVG, so the 1440x780 canvas fills any
   hero height without letterboxing. */
.hero-kv__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.kv-grain { mix-blend-mode: overlay; }

@media (prefers-reduced-motion: no-preference) {
  .kv-field .f1 { animation: kvField1 11s ease-in-out infinite; }
  .kv-field .f2 { animation: kvField2 14s ease-in-out infinite; }
  .kv-field .f3 { animation: kvField3 12.5s ease-in-out infinite; }
  .kv-sweep     { animation: kvSweep var(--sd) linear var(--sdl, 0s) infinite; }
  .kv-node      { animation: kvNode var(--nd) linear var(--ndl, 0s) infinite; }
  .bonus-gifts svg { animation: giftDrift var(--gd) linear var(--gdl, 0s) infinite; }
  /* The gift breathes as ONE object — box, lid, ribbon and bow together, over
     a ground shadow that stays put, which is what makes it read as hovering.
     The bow used to have an animation of its own and that was the bug: a bow
     bobbing away from the lid it is tied to. The perk cards keep a separate,
     longer travel on a different period, so they drift out of step with the
     gift instead of moving with it as one rigid block.
     Translation only, no rotation: an SVG group's transform-origin is the
     viewBox corner, so even a degree of rotation swings the whole gift across
     the panel rather than tilting it in place. */
  .bonus-art__gift { animation: bonusFloat 7s ease-in-out infinite; }
  .bonus-art__cards { animation: bonusCards 6.5s ease-in-out -2s infinite; }
  /* Where the browser can drive an animation from the scroll position, the
     whole drawing also drifts up and tilts back as the section crosses the
     viewport — the "moves a little as you scroll" part. It REPLACES the idle
     float rather than joining it (same element, later rule), so the two can
     never fight over the same transform. Everything else keeps the loop, and a
     browser without view() timelines simply never matches this block. */
  @supports (animation-timeline: view()) {
    .bonus-art__svg {
      animation: bonusScroll linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 65%;
    }
  }
}
@keyframes bonusFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
@keyframes bonusCards {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
@keyframes bonusScroll {
  from { transform: translateY(22px) rotate(2.5deg) scale(.97); }
  to   { transform: translateY(-14px) rotate(-2deg) scale(1); }
}
/* Motion off: hold the field as a composed still frame. Position needs no
   restoring — every sweep, dot and gift already sits at its resting place in
   the markup and animates IN from --from — but opacity does, since the
   animation is what reveals them. */
@media (prefers-reduced-motion: reduce) {
  .hero-kv, .hero-kv *, .bonus-gifts svg { animation: none !important; }
  /* Lower than the animation's peak: staggered sweeps are rarely all visible
     at once, so a still frame at full strength would read busier than the
     motion ever does. */
  .kv-sweep { opacity: .5; }
  .kv-node { opacity: 1; }
  .bonus-gifts svg { opacity: var(--go); }
}

@keyframes kvField1 {
  0%   { transform: translate3d(0, 0, 0) scale(1);        opacity: .7; }
  28%  { transform: translate3d(34%, 22%, 0) scale(1.5);  opacity: 1; }
  62%  { transform: translate3d(-18%, 26%, 0) scale(.72); opacity: .55; }
  100% { transform: translate3d(0, 0, 0) scale(1);        opacity: .7; }
}
@keyframes kvField2 {
  0%   { transform: translate3d(0, 0, 0) scale(1.15);      opacity: .6; }
  32%  { transform: translate3d(-40%, -26%, 0) scale(.7);  opacity: 1; }
  70%  { transform: translate3d(24%, 20%, 0) scale(1.55);  opacity: .7; }
  100% { transform: translate3d(0, 0, 0) scale(1.15);      opacity: .6; }
}
@keyframes kvField3 {
  0%   { transform: translate3d(0, 0, 0) scale(.85);        opacity: .4; }
  36%  { transform: translate3d(-34%, -38%, 0) scale(1.55); opacity: 1; }
  72%  { transform: translate3d(28%, -14%, 0) scale(1.05);  opacity: .6; }
  100% { transform: translate3d(0, 0, 0) scale(.85);        opacity: .4; }
}
/* All three travel the same way: in from --from (off-screen, left or right
   depending on sign) to the element's own resting position, where they fade
   out. Direction lives in the sign of --from, so one keyframe set covers both
   sides and the resting layout stays readable in the markup.
   A sweep crosses in the first quarter of its cycle and waits out the rest,
   which is what keeps the field sparse rather than a moving grid. */
@keyframes kvSweep {
  0%   { transform: translateX(var(--from)); opacity: 0; }
  4%   { opacity: 1; }
  17%  { opacity: 1; }
  25%  { transform: translateX(0);           opacity: 0; }
  100% { transform: translateX(0);           opacity: 0; }
}
/* Dots hold full strength almost the whole way, so they dissolve just as they
   reach the middle rather than fading out early. */
@keyframes kvNode {
  0%   { transform: translateX(var(--from)); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(0);           opacity: 0; }
}
/* The gifts, in cqw so their travel tracks the card's width instead of a
   pixel guess. Same shape as kvNode. */
@keyframes giftDrift {
  0%   { transform: translateX(var(--from)); opacity: 0; }
  10%  { opacity: var(--go); }
  88%  { opacity: var(--go); }
  100% { transform: translateX(0);           opacity: 0; }
}


/* ---------- Day strip: pinned under the event bar ---------- */
.day-strip {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--c-border);
  margin: 0 -24px 40px; padding: 0 24px;
}
.day-strip__inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.day-strip__inner::-webkit-scrollbar { display: none; }
.day-strip a {
  flex: 1 0 auto; min-width: 128px; min-height: 60px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--c-muted); white-space: nowrap;
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.day-strip a .ds-d { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-ink-2); }
.day-strip a .ds-t { font-size: 12.5px; }
.day-strip a:hover .ds-d, .day-strip a:hover { color: var(--c-ink); }
.day-strip a.is-current { border-bottom-color: var(--c-primary); }
.day-strip a.is-current .ds-d { color: var(--c-primary-deep); }
.day-strip a.is-current .ds-t { color: var(--c-ink-2); }

/* ---------- Agenda rows ---------- */
.agenda-day { padding: 8px 0 44px; }
.agenda-day + .agenda-day { border-top: 1px solid var(--c-border); padding-top: 40px; }
/* The pinned bar + day strip together cover ~130px; the plain .scroll-anchor
   offset only clears the nav. */
.agenda-day.scroll-anchor { scroll-margin-top: calc(var(--nav-h) + 76px); }
.agenda-day__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.agenda-day__head h3 { font-size: 24px; letter-spacing: -0.018em; }
.agenda-day__count { font-size: 13.5px; color: var(--c-muted); white-space: nowrap; padding-top: 8px; }
.agenda-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* ---------- Session card ---------- */
.session-card {
  position: relative;
  background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .session-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
.session-card__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--c-primary-tint); overflow: hidden; }
.session-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.session-card__badge { position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, .94); color: var(--c-primary-deep); }
/* Format sesji: YouTube ma WLASNY kolor, zeby plakietka czytala sie jak znak
   platformy, a nie jak kolejny akcent Skywave. Czerwien jest przyciemniona
   wzgledem markowego #FF0000 z pomiaru, nie z gustu: bialy tekst na #FF0000
   daje 4,00:1, czyli NIE przechodzi WCAG AA dla 12-pikselowej etykiety pill,
   a #E50000 daje 4,85:1 przy tym samym odcieniu (hue 0). Warsztat zostaje na
   bialej plakietce z bazowej reguly; sesja po terminie i tak szarzeje przez
   .session-card.is-past .session-card__badge (0,3,0 bije 0,2,0). */
.session-card__badge.is-yt { background: #E50000; color: #fff; }
.session-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.session-card__time { font-size: 13.5px; font-weight: 600; color: var(--c-primary-deep); }
.session-card__title { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; }
.session-card__title a { color: var(--c-ink); }
/* Stretched link: the title's link covers the whole card; the calendar link
   sits above it so it stays a separate control. */
.session-card__title a::after { content: ''; position: absolute; inset: 0; }
.session-card__benefit { font-size: 14px; color: var(--c-muted); line-height: 1.55; }
.session-card__speakers { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--c-ink-2); margin-top: 2px; }
.session-card__avatars { display: inline-flex; }
.session-card__avatars .avatar { width: 30px; height: 30px; font-size: 11px; box-shadow: 0 0 0 2px #fff; }
.session-card__avatars .avatar + .avatar { margin-left: -8px; }
.session-card__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.session-card__foot .btn-text { font-size: 14px; }
.session-card__cal { position: relative; z-index: 1; font-size: 13px; font-weight: 600; color: var(--c-muted); min-height: 44px; display: inline-flex; align-items: center; }
.session-card__cal:hover { color: var(--c-link); }

/* ---------- Bonus band ---------- */
/* One short card alone in a full-height section band, so it sat in ~176px of
   empty space above AND below it: its own section padding plus the
   neighbouring section's. Halved on all three sides that touch it, which
   keeps the gap symmetric around the card (88px each side on desktop, 60px
   on phones — every value derives from --s-section, so both breakpoints
   scale together).
   The band BELOW is soft-on-soft with this one: same background, so its
   rounded top and overlap are invisible there and its top padding merely
   stacks onto ours — pure dead space, hence the trim.
   Scoped by id, so no other section is touched; :has() degradation is a
   slightly taller gap above the band, never a broken layout. */
#bonusy { padding-top: calc(var(--s-section) / 2 + var(--band-overlap)); padding-bottom: calc(var(--s-section) / 2); }
.section:has(+ #bonusy) { padding-bottom: calc(var(--s-section) / 2); }
#bonusy + .section-soft { padding-top: calc(var(--s-section) / 2 + var(--band-overlap)); }

/* ---------- Speakers ---------- */
.speaker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.speaker-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-soft); padding: 14px;
}
.speaker-card h4 { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.speaker-card__org { font-size: 13.5px; color: var(--c-muted); margin-top: 3px; }
/* The speaker's logo joins the identity block, above the timetable line. Fixed
   height + contain so a wide mark and a narrow one occupy the same band and the
   cards in a row keep matching heights; wraps because one person can front two
   partners across the week. */
.speaker-card__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.speaker-card__logos img { height: 24px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.speaker-card__when { font-size: 12.5px; color: var(--c-faint); margin-top: 6px; }
.speaker-note { margin-top: 24px; font-size: 14px; color: var(--c-muted); }

/* ---------- Registration (on the blue band) ---------- */
.bw-reg { display: grid; grid-template-columns: 1fr .9fr; gap: 56px; align-items: start; }
.bw-reg > * { min-width: 0; }
/* The three consents are long legal sentences, so at 13px/1.5 the block stood
   taller than the four fields above it. 11px on a 1.3 line-height, and 1.3 is a
   measured floor rather than a preference: with Inter at 11px the gap between a
   descending ą/ę and the Ó/Ż on the next line is -0.81px at 1.2, -0.25px at
   1.25 and +0.3px at 1.3 - i.e. 1.3 is the first value where Polish diacritics
   stop touching. Going tighter overlaps ink, which is why this stops here.
   Scoped to .bw-reg because .reg-consent is shared with the webinar sign-up
   form, which was not part of this change. The 12px gap BETWEEN consents stays
   — three separate permissions have to stay separable at a glance. */
.bw-reg .reg-consent { font-size: 11px; line-height: 1.3; }
.band-grow .bw-card { color: var(--c-ink); }   /* white card on the band: opt out of the ink flip */
.band-grow .bw-card h3 { color: var(--c-ink); font-size: 21px; }
.bw-form .wbn-input + label { margin-top: 4px; }
.bw-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--c-muted); line-height: 1.5; }
.bw-consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--c-primary); }
.bw-consent a { color: var(--c-link); }
.bw-success { display: none; }
.bw-card.is-done .bw-form, .bw-card.is-done .bw-form-note { display: none; }
.bw-card.is-done .bw-success { display: flex; flex-direction: column; gap: 14px; }
.bw-success__mark { width: 44px; height: 44px; border-radius: 50%; background: var(--c-primary-tint); color: var(--c-primary-deep); display: flex; align-items: center; justify-content: center; }
.bw-form-error { display: none; font-size: 13px; color: var(--c-ink-2); }
.bw-card.has-error .bw-form-error { display: block; }
.bw-card.has-error .wbn-input:invalid { box-shadow: inset 0 0 0 2px var(--c-primary); }

/* ---------- FAQ: native <details>, same reasoning as .wbn-arch ---------- */
.bw-faq { max-width: 880px; }
.bw-faq details { border-top: 1px solid var(--c-border); }
.bw-faq details:last-child { border-bottom: 1px solid var(--c-border); }
.bw-faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; min-height: 44px;
}
.bw-faq summary::-webkit-details-marker { display: none; }
.bw-faq summary svg { flex-shrink: 0; color: var(--c-primary); transition: transform .2s var(--ease-out); }
.bw-faq details[open] summary svg { transform: rotate(45deg); }
.bw-faq details > p { padding: 0 4px 22px; max-width: 68ch; color: var(--c-ink-2); font-size: 15.5px; line-height: 1.65; }

/* ---------- Session detail page ---------- */
.bw-session .wbn-hero { margin-top: 8px; }
.bw-session__how { font-size: 13.5px; color: var(--c-muted); line-height: 1.55; }
.bw-session__how strong { color: var(--c-ink); }
/* The SAME two tracks as .wbn-hero above, and the same 56px gutter, so the
   "Prowadza" rail lines up exactly under the sign-up card instead of starting
   at its own 320px. minmax(0, ...) on both halves because an fr track's
   automatic minimum is min-content, and this grid's left column carries prose:
   one unbreakable token would widen that track and break the match. */
.bw-session__body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: start; }
.bw-session__body h2 { font-size: 26px; margin-bottom: 14px; letter-spacing: -0.018em; }
.bw-session__body h2 + p { color: var(--c-ink-2); font-size: 16.5px; line-height: 1.65; max-width: 62ch; }
.bw-session__block + .bw-session__block { margin-top: 44px; }
.bw-side { display: flex; flex-direction: column; gap: 20px; }
/* Bigger than the same card on the programme: there it is one of four in a row,
   here it stands alone in a ~490px column, where a 56px avatar next to a 15px
   name reads as a leftover from the narrower rail. Scoped to .bw-side, so
   .speaker-grid on /base-week keeps its size. */
.bw-side .speaker-card { gap: 16px; padding: 22px 24px; border-radius: 16px; }
.bw-side .speaker-card .avatar--lg { width: 72px; height: 72px; font-size: 20px; }
.bw-side .speaker-card h4 { font-size: 17px; }
.bw-side .speaker-card__org { font-size: 14.5px; margin-top: 4px; }
.bw-side .speaker-card__when { font-size: 13.5px; margin-top: 8px; }
.bw-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.bw-prevnext a {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-soft); padding: 18px 20px; color: var(--c-ink);
  transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}
.bw-prevnext a span { font-size: 12.5px; color: var(--c-muted); }
.bw-prevnext a strong { font-size: 15px; font-weight: 600; line-height: 1.35; }
.bw-prevnext a.is-next { text-align: right; }
@media (hover: hover) and (pointer: fine) {
  .bw-prevnext a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
}
/* Facade for a YouTube session: poster + play; app.js mounts the player only
   when data-yt is filled (initEpisodePlayers), otherwise it stays a link. */
.video-frame.ep-player { position: relative; display: flex; margin-bottom: 0; }
.ep-player .ep-player__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); z-index: 0; }
.ep-player .play, .ep-player .video-time { position: relative; z-index: 1; }
.ep-player .video-time { position: absolute; bottom: 12px; left: 16px; }
.ep-embed { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.ep-embed iframe { display: block; width: 100%; border: 0; }
.ep-embed.is-video { aspect-ratio: 16 / 9; background: #000; }
.ep-embed.is-video iframe { position: absolute; inset: 0; height: 100%; }


/* ---------- Compact event footer ---------- */
.event-footer { padding: 36px 0 40px; border-top: 1px solid var(--c-border); }
.event-footer .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
/* The footer names the event: the .wordmark lockup that used to sit here was
   the Academy's, and it linked to the Academy home. The pair below outranks the
   generic `.event-footer a` rules on specificity, so size and colour hold. */
.event-footer .bw-footer-brand { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--c-ink); }
.event-footer .bw-footer-brand:hover { color: var(--c-link); }
.event-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.event-footer a { font-size: 14px; color: var(--c-muted); }
.event-footer a:hover { color: var(--c-link); }
.event-footer .event-footer__copy { font-size: 13px; color: var(--c-faint); width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .topnav.is-event nav { display: none; }
  .topnav.is-event.is-open nav { display: flex; }
}
@media (max-width: 1024px) {
  .hero-bw .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-bw .hero-stats .stat .n { white-space: normal; }
  .bw-reg { grid-template-columns: 1fr; gap: 36px; }
  .speaker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bw-session__body { grid-template-columns: 1fr; gap: 36px; }
  /* Rail: ≤3 cards per day, so a snap rail stays inside the 3–4-step limit.
     The next card bleeds past the edge so nobody mistakes one card for all. */
  .agenda-rail {
    display: flex; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 24px;
    margin: 0 -24px; padding: 4px 24px 12px;
    scrollbar-width: thin;
  }
  .agenda-rail > .session-card { flex: 0 0 min(86%, 360px); scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .day-strip { margin-bottom: 28px; }
  .day-strip a { min-width: 104px; }
  .agenda-day__head { flex-direction: column; gap: 4px; }
  .agenda-day__head h3 { font-size: 21px; }
  .agenda-day__count { padding-top: 0; }
  .speaker-grid { grid-template-columns: 1fr; }
  .bw-prevnext { grid-template-columns: 1fr; }
  .bw-prevnext a.is-next { text-align: left; }
  .event-footer nav { gap: 14px; }
  /* Wordmark + CTA + menu toggle must share 390px. */
  .topnav.is-event .bw-brand { font-size: 15px; padding-right: 8px; }
}


/* ---------- Past sessions and days (NOT in the mock) ----------
   The mock only ever describes a future event, so it has no expired state at
   all. Once a session's end time passes it must read as over without becoming
   unreadable: muted ink, a flat card, a desaturated still, and no hover lift
   (nothing is going to happen when you click, so the card should not invite
   it). The link stays live — the plan and the speakers are still worth
   reading, and the recording lands there later. */
.session-card.is-past {
  box-shadow: none;
  background: var(--c-soft);
  outline: 1px solid var(--c-border);
  outline-offset: -1px;
}
@media (hover: hover) and (pointer: fine) {
  /* Same specificity as the lift rule above, declared after it, so it wins. */
  .session-card.is-past:hover { transform: none; box-shadow: none; }
}
.session-card.is-past .session-card__thumb img { filter: grayscale(1); opacity: .5; }
.session-card.is-past .session-card__badge { background: rgba(255, 255, 255, .9); color: var(--c-muted); }
.session-card.is-past .session-card__time { color: var(--c-faint); }
.session-card.is-past .session-card__title a { color: var(--c-muted); }
.session-card.is-past .session-card__benefit,
.session-card.is-past .session-card__speakers { color: var(--c-faint); }
.session-card.is-past .avatar { filter: grayscale(1); opacity: .7; }

/* "Zakończone" / "Trwa teraz" marker in the card footer. */
.session-card__state { font-size: 13px; font-weight: 600; color: var(--c-faint); }
.session-card__state.is-live { color: var(--c-primary-deep); }

/* A whole day that is over. The heading stays black enough to scan the
   programme by; only the supporting copy recedes. */
.agenda-day.is-past .agenda-day__head h3 { color: var(--c-muted); }
.agenda-day.is-past .agenda-day__count { color: var(--c-faint); }

/* Day strip: a finished day is still a working anchor, just visibly spent. */
.day-strip a.is-past { opacity: .55; }
.day-strip a.is-past .ds-t { color: var(--c-faint); }

/* Today's day, while it runs. */
.day-strip a.is-live .ds-d { color: var(--c-primary-deep); }
.agenda-day.is-live .agenda-day__head h3::after {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 10px;
  border-radius: 50%; background: var(--c-primary); vertical-align: middle;
}

/* ---------- Registration on hold ----------
   Until the main ClickMeeting event exists there is no form to show, so the
   card carries an honest note instead of a dead control. */
.bw-note {
  border: 1px dashed var(--c-border-strong); border-radius: var(--radius-ui);
  padding: 18px 20px; background: var(--c-soft);
  font-size: 14px; color: var(--c-ink-2); line-height: 1.6;
}
.bw-note strong { color: var(--c-ink); }

/* Base Week sign-up. One form covers the WHOLE week, so the panel opens with
   a lead ABOVE the fields (it changes whether someone wants to sign up at all,
   so it must not hide under the button) and the consent block gets a heading —
   there are three long ones here, not one line like on a webinar. */
.reg-lead { margin-bottom: 16px; font-size: 13.5px; line-height: 1.6; color: var(--c-ink-2); }
.reg-hint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--c-faint); }
.reg-consents__head { font-size: 13px; font-weight: 600; color: var(--c-ink); }
.bw-note--warn { border-style: solid; border-color: var(--c-primary); background: var(--c-primary-tint); color: var(--c-ink); }

/* Session card without a cover: the tinted panel carries the title, exactly
   like a course card without a thumbnail on /kursy. Keeps a programme that
   has no artwork yet from reading as ten broken images. */
.session-card__thumb.is-tint {
  display: flex; align-items: center; padding: 18px 20px 20px;
  background: var(--grad-sky); color: #fff;
}
.session-card__tintlabel { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.session-card.is-past .session-card__thumb.is-tint { background: var(--c-border-strong); }


/* =============================================================
   Homepage spotlight carousel (.hero-spot) — the hero the page opens on.
   Ported from the reference build (base-academy-page.vercel.app): the takeover
   hero + week strip that the 2026-09-02 Base Week pass deliberately left out
   are now slide 1, and the centred Academy hero is slide 2.

   Three static slides in a scroll-snap track; site.js only ever moves
   scrollLeft, so every slide is reachable with JS off (native horizontal
   scroll). NEVER put transform/filter on .spot-track or .spot-slide: the
   search dropdown (.hero-results) is taken out of the track's overflow with
   position:fixed and needs the VIEWPORT as its containing block.
   ============================================================= */

/* Unlike the mock, the padding is written against --hero-pull, not --nav-h:
   .hero.is-onblue slides up by the nav's FLOW height (nav + its 1px hairline)
   and adds it back here. Using --nav-h would leave the 1px strip of white body
   above the hero back (the 2026-08-25 fix), and it would also break the
   cert-name-bar case, where the pull is zeroed. */
.hero.is-onblue.hero-spot { padding-top: var(--hero-pull); padding-bottom: 72px; }
.spot-track {
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.spot-track::-webkit-scrollbar { display: none; }
.spot-slide {
  flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center;   /* the track is as tall as its tallest slide; shorter ones centre */
  padding-top: 64px;
}
.spot-slide > .container { width: 100%; }

/* Dots + arrows under the slide. 44px hit targets, 8px dots. */
.spot-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 36px; }
.spot-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
  transition: background-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.spot-arrow:hover { background: rgba(255, 255, 255, .08); }
.spot-arrow:active { transform: scale(.94); }
.spot-dots { display: flex; gap: 6px; }
.spot-dot { width: 44px; height: 44px; display: grid; place-items: center; }
.spot-dot span {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  transition: background-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.spot-dot:hover span { background: rgba(255, 255, 255, .7); }
.spot-dot[aria-current="true"] span { background: #fff; transform: scale(1.25); }

/* ---------- Takeover slide: two columns on the blue ---------- */
.hero-event__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero-event__grid > * { min-width: 0; }
.hero-event__title {
  font-size: clamp(34px, 4.2vw, 54px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04;
  color: #fff; margin: 18px 0 16px; text-wrap: balance;
}
.hero-event__title .num { font-variant-numeric: tabular-nums; }
.hero-event .lead { color: rgba(255, 255, 255, .86); max-width: 48ch; margin-bottom: 28px; }
.hero-event .hero-cta-row { margin-bottom: 26px; }
.hero-event__facts {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .28);
  font-size: 14.5px; color: rgba(255, 255, 255, .84);
}
.hero-event__facts .num { color: #fff; font-weight: 600; }

/* ---------- Week strip: the white card on the blue ---------- */
.wstrip {
  background: #fff; color: var(--c-ink);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.wstrip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px 8px; }
.wstrip__head h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--c-ink); }
.wstrip__head span { font-size: 13px; color: var(--c-muted); }
.wstrip__day {
  display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 14px;
  padding: 11px 14px; border-radius: 10px; color: var(--c-ink);
  transition: background-color .15s var(--ease-out);
}
.wstrip__day:hover { background: var(--c-soft); }
.wstrip__d { font-size: 13.5px; font-weight: 600; color: var(--c-primary-deep); font-variant-numeric: tabular-nums; }
.wstrip__t { font-size: 14.5px; font-weight: 500; min-width: 0; }
.wstrip__n { font-size: 13px; color: var(--c-muted); white-space: nowrap; }
.wstrip__foot { padding: 10px 14px 8px; border-top: 1px solid var(--c-border); margin-top: 4px; }
.wstrip__foot .btn-text { font-size: 14px; }
/* The card is white, but .hero.is-onblue .btn-text is white too: the
   "Pełny program" link would be invisible. Cards on the blue keep the link
   colour. */
.hero.is-onblue .wstrip .btn-text, .hero.is-onblue .spot-webinar .btn-text { color: var(--c-link); }
.hero.is-onblue .wstrip .btn-text:hover, .hero.is-onblue .spot-webinar .btn-text:hover { color: var(--c-primary-deep); }

/* ---------- Webinar slide: the white card on the blue ---------- */
.spot-webinar { color: var(--c-ink); box-shadow: var(--shadow-card); }
.spot-webinar .wbn-media img { object-position: 50% 30%; }
.spot-webinar__foot { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.spot-webinar .wbn-speaker-line { margin-top: 0; }
.spot-webinar .btn-text { font-size: 14px; }

/* The dropdown escapes the track: .spot-track is overflow-x:auto, which forces
   overflow-y:auto too, so an absolutely positioned panel is clipped at the
   track's bottom edge AND grows it a vertical scrollbar. Only the panel INSIDE
   the carousel switches to fixed — the nav magnifier and every other typeahead
   keep the absolute panel they have. site.js sets top/left/width from the
   field's rect on open, resize and scroll (initTypeahead → place). */
.spot-track .hero-results { position: fixed; top: auto; left: auto; right: auto; z-index: 60; }

@media (max-width: 1024px) {
  .hero-event__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .hero.is-onblue.hero-spot { padding-bottom: 48px; }
  .spot-slide { padding-top: 40px; }
  .spot-arrow { display: none; }            /* swipe does the job on a phone */
  .spot-controls { margin-top: 28px; }
  .hero-event__title { margin-top: 14px; }
  .wstrip__day { grid-template-columns: 70px 1fr; }
  .wstrip__n { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   BASE WEEK — logotypy sesji (2026-09-11)
   ══════════════════════════════════════════════════════════════════════════ */

/* Pasek logotypów pod hero. Czarny, bo niesie wersje znaków przygotowane NA
   CIEMNE tło. Marquee bez ani jednej linii JS: tor to N identycznych grup, a
   animacja przesuwa go o DOKŁADNIE jedną grupę, więc pętla domyka się bez szwu
   (ta sama arytmetyka co dawny pasek logotypów strony głównej — własny keyframe
   i własna zmienna, żeby oba komponenty nie zależały od siebie).
   Liczbę kopii liczy widok z liczby logotypów, bo przy dwóch znakach jedna
   grupa jest węższa niż ekran i pasek wyjeżdżałby w połowie cyklu. */
.bw-logos { background: #000; padding: 44px 0 48px; overflow: hidden; }
.bw-logos__label { margin: 0 0 26px; color: rgba(255, 255, 255, .72); font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.bw-logos__marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.bw-logos__track { display: flex; width: max-content; align-items: center; animation: bw-logos-marquee 48s linear infinite; }
.bw-logos__group { display: flex; align-items: center; flex: 0 0 auto; }
.bw-logos__item { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 64px; padding: 0 30px; }
.bw-logos__item img { display: block; width: auto; height: auto; max-height: 40px; max-width: 160px; object-fit: contain; }
@keyframes bw-logos-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--bw-copies, 2))); } }
@media (prefers-reduced-motion: reduce) { .bw-logos__track { animation: none !important; transform: none !important; } }

/* Logotyp na karcie sesji: pod zdjęciem, na całą szerokość karty, maks. 40px
   wysokości. Box ma stałe 40px, a `object-fit: contain` wpisuje w niego znak z
   zachowaniem proporcji — dzięki temu szeroki i wąski logotyp zajmują ten sam
   pas i karty w rzędzie nie rozjeżdżają się o kilka pikseli.
   Boczne 20px to ten sam margines co treść karty poniżej. */
.session-card__logo { padding: 14px 20px 0; }
.session-card__logo img { display: block; width: 100%; height: 40px; object-fit: contain; object-position: center; }
.session-card.is-past .session-card__logo img { filter: grayscale(1); opacity: .5; }

@media (max-width: 640px) {
  .bw-logos { padding: 34px 0 36px; }
  .bw-logos__label { margin-bottom: 20px; font-size: 12.5px; }
  .bw-logos__item { height: 54px; padding: 0 20px; }
  .bw-logos__item img { max-height: 32px; max-width: 130px; }
  .session-card__logo { padding: 12px 18px 0; }
  .session-card__logo img { height: 34px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   BASE WEEK — okno sesji (2026-09-11)
   ══════════════════════════════════════════════════════════════════════════ */

/* A session opens INTO the programme instead of replacing it. A native
   <dialog>, so focus trapping, Escape, the backdrop and inertness for the rest
   of the page are the browser's job, not ours.

   The dialog itself is only a full-screen flex box for centring; every visual
   property belongs to .bw-modal__panel, because that is the element site.js
   animates out of the card that was clicked. Animating a <dialog> directly
   fights the UA's own centring. */
.bw-modal {
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
}
.bw-modal:not([open]) { display: none; }
.bw-modal[open] { display: flex; align-items: center; justify-content: center; }
.bw-modal::backdrop { background: rgba(8, 14, 26, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.bw-modal__panel {
  position: relative;
  width: min(1060px, calc(100vw - 48px));
  /* A DEFINITE height, not a fitted one. The content arrives after the window
     is already on screen, so a height that followed it would make the panel
     jump mid-animation; a fixed box scrolls its content instead and the grow
     animation always has the same target. */
  height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  background: var(--c-canvas);
  border-radius: var(--radius-card);
  box-shadow: 0 40px 90px rgba(8, 14, 26, .34);
  overflow: hidden;
  /* The transform origin for the grow: site.js supplies the translate, so the
     centre is the right anchor for the scale. */
  transform-origin: 50% 50%;
}

.bw-modal__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;   /* the page behind must not take over the wheel */
  padding: 56px 44px 44px;
  -webkit-overflow-scrolling: touch;
}
/* The session partial's top block leads with its own spacing on the standalone
   page, where a back link sits above it. In the window there is nothing above
   it, so that margin would read as a gap under the close button. */
.bw-modal__scroll > .wbn-hero { margin-top: 0; }

.bw-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--c-ink-2);
  background: hsla(0, 0%, 100%, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out);
}
.bw-modal__close:hover { background: #fff; color: var(--c-ink); }

.bw-modal__status {
  padding: 40px 0;
  text-align: center;
  color: var(--c-muted);
  font-size: 15px;
}
.bw-modal__status .btn { margin-top: 16px; }

/* The backdrop cannot be driven by the Web Animations API the way the panel is,
   so it fades in CSS. `.is-closing` exists because an exit animation on
   ::backdrop has no portable declarative form; site.js holds the close back
   until this has run. */
@keyframes bwBackdropIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes bwBackdropOut { from { opacity: 1 } to { opacity: 0 } }
.bw-modal[open]::backdrop { animation: bwBackdropIn .32s var(--ease-out) both; }
.bw-modal.is-closing::backdrop { animation: bwBackdropOut .24s ease both; }

@media (max-width: 640px) {
  /* Full-bleed on a phone: a 1060px reading panel inset by 24px is a sheet,
     and a sheet with rounded corners floating over 12px of backdrop looks like
     a mistake at that size. */
  .bw-modal__panel {
    width: 100vw;
    height: 100%;
    border-radius: 0;
  }
  .bw-modal__scroll { padding: 56px 18px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  /* site.js already skips the grow/shrink; this is the backdrop's half. */
  .bw-modal[open]::backdrop,
  .bw-modal.is-closing::backdrop { animation: none; }
}


/* Event mark under the sign-up block, on the session page and in the window
   that opens over the programme (both render the same partial).
   Same treatment as the mark on a session card in the programme: a box the
   full width of the column with a fixed 40px height and `contain` inside it,
   so a wide and a narrow logo occupy the same strip instead of shifting what
   sits under them. */
.bw-session__logo { margin-top: 20px; }
.bw-session__logo img { display: block; width: 100%; height: 40px; object-fit: contain; object-position: center; }