.ok-main, .ok-shell {
	--ok-background: #fff; --ok-card: #fff; --ok-muted: #64748b;
	--ok-border: #e2e8f0; --ok-primary: #18181b; --ok-primary-foreground: #fff;
	--ok-accent: #f1f5f9; --ok-accent-color: var(--global-palette1, var(--wp--preset--color--primary, var(--ok-primary))); --ok-success: #16803c; --ok-success-soft: #ecfdf3; --ok-error: #b42318;
	--ok-button-bg: var(--global-palette-btn-bg, var(--wp--preset--color--primary, var(--ok-primary))); --ok-button-bg-hover: var(--global-palette-btn-bg-hover, var(--global-palette-highlight-alt, var(--ok-button-bg)));
	--ok-button-color: var(--global-palette-btn, var(--wp--preset--color--base, var(--ok-primary-foreground))); --ok-button-color-hover: var(--global-palette-btn-hover, var(--ok-button-color));
	--ok-radius: .75rem; --ok-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.05);
	font-family: inherit;
}
.ok-main { background: #fafafa; min-height: 70vh; padding: clamp(2rem, 5vw, 5rem) 1rem; }
.ok-shell { box-sizing: border-box; margin: 0 auto; max-width: 1120px; width: 100%; }
.ok-shell *, .ok-shell *::before, .ok-shell *::after { box-sizing: border-box; }
.ok-shell h1, .ok-shell h2, .ok-shell h3, .ok-shell p { margin-top: 0; }
.ok-shell h1 { margin-bottom: 1rem; }
.ok-subheadline { font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.4; margin-bottom: 1rem; max-width: 55ch; opacity: .78; }
.ok-eyebrow { color: var(--ok-muted); margin-bottom: .6rem; }
.ok-muted { color: var(--ok-muted); }
.ok-lead { color: var(--ok-muted); max-width: 62ch; }
.ok-hero { align-items: center; display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr); margin-bottom: 2rem; }
.ok-hero-image { aspect-ratio: 4/3; border-radius: calc(var(--ok-radius) + .35rem); box-shadow: var(--ok-shadow); overflow: hidden; }
.ok-hero-image img, .ok-card-image img, .ok-card-image video, .ok-card-image iframe { border: 0; height: 100%; object-fit: cover; width: 100%; }
.ok-hero-card { align-items: stretch; background: #fff; border: 1px solid var(--ok-border); border-radius: var(--ok-radius); box-shadow: var(--ok-shadow); gap: 0; grid-template-columns: minmax(280px, 1fr) minmax(0, 1fr); overflow: hidden; }
.ok-hero-card .ok-hero-image { aspect-ratio: auto; border-radius: 0; box-shadow: none; min-height: 340px; }
.ok-hero-card .ok-hero-copy { align-self: center; padding: clamp(1.5rem, 5vw, 4rem); }
@media (min-width: 801px) {
	.ok-hero:not(.ok-hero-has-image) { grid-template-columns: minmax(0, 1fr); }
	.ok-hero:not(.ok-hero-has-image) h1 { white-space: nowrap; }
}
.ok-content { background: var(--ok-card); border: 1px solid var(--ok-border); border-radius: var(--ok-radius); box-shadow: var(--ok-shadow); margin: 2rem 0; padding: clamp(1.25rem, 4vw, 3rem); }
.ok-content > *:last-child { margin-bottom: 0; }
.ok-content img { height: auto; max-width: 100%; }
.ok-downloads { margin: 2rem 0; }
.ok-download-list { display: grid; gap: .75rem; }
.ok-download-item { align-items: center; background: var(--ok-card); border: 1px solid var(--ok-border); border-radius: var(--ok-radius); box-shadow: var(--ok-shadow); color: inherit; display: grid; gap: 1rem; grid-template-columns: auto 1fr auto; padding: 1rem 1.25rem; text-decoration: none; }
.ok-download-item:hover { border-color: var(--ok-accent-color); color: inherit; transform: translateY(-1px); }
.ok-download-item strong, .ok-download-item small { display: block; }
.ok-download-item small { color: var(--ok-muted); margin-top: .15rem; }
.ok-download-icon { align-items: center; background: var(--ok-accent-color); border-radius: 999px; color: #fff; display: inline-flex; font-size: 1.15rem; height: 2.6rem; justify-content: center; width: 2.6rem; }
.ok-video { aspect-ratio: 16/9; background: #000; border-radius: calc(var(--ok-radius) - .2rem); margin-bottom: 2rem; overflow: hidden; }
.ok-video iframe, .ok-video video, .ok-video .wp-video { height: 100% !important; max-width: 100%; width: 100% !important; }
.ok-section { margin: clamp(3rem, 7vw, 6rem) 0; }
.ok-section-heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.25rem; }
.ok-section-heading h2 { margin-bottom: 0; }
.ok-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ok-stack { display: grid; gap: 1rem; }
.ok-card, .ok-course-card, .ok-lesson-card, .ok-module-card, .ok-module-grid-card { background: var(--ok-card); border: 1px solid var(--ok-border); border-radius: var(--ok-radius); box-shadow: var(--ok-shadow); overflow: hidden; }
.ok-course-card > a, .ok-lesson-card > a, .ok-module-grid-card > a { color: inherit; display: block; height: 100%; text-decoration: none; }
.ok-course-card > a:hover h3, .ok-lesson-card > a:hover h3, .ok-module-grid-card > a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.ok-card-image { aspect-ratio: 16/10; background: var(--ok-accent); overflow: hidden; position: relative; }
.ok-card-image-video { aspect-ratio: 16/9; }
.ok-card-video-still { display: block; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.ok-card-video-still.is-ready { opacity: 1; }
.ok-card-image .ok-card-video-embed { display: block; inset: 0; pointer-events: none; position: absolute; width: 100%; }
.ok-placeholder { background: linear-gradient(135deg,#e2e8f0,#f8fafc); display: block; height: 100%; width: 100%; }
.ok-card-body { padding: 1.25rem; }
.ok-card-body h3 { margin: .75rem 0 .5rem; }
.ok-card-body p { color: var(--ok-muted); }
.ok-badge, .ok-status-label { align-items: center; background: var(--ok-accent); border-radius: 999px; color: inherit; display: inline-flex; gap: .4rem; padding: .25rem .65rem; }
.ok-card-progress { display: block; margin-top: .5rem; }
.ok-progress-card { background: var(--ok-primary); border-radius: var(--ok-radius); color: var(--ok-primary-foreground); margin: 2rem 0; padding: 1.25rem 1.5rem; }
.ok-progress-copy { display: flex; justify-content: space-between; margin-bottom: .8rem; }
.ok-progress-copy span { color: #cbd5e1; }
.ok-progress-track { background: rgba(148,163,184,.3); border-radius: 999px; height: .45rem; overflow: hidden; }
.ok-progress-track span { background: #fff; border-radius: inherit; display: block; height: 100%; transition: width .25s ease; }
.ok-card-body .ok-progress-track span { background: var(--ok-primary); }
.ok-module-grid-card .ok-progress-track { margin-top: 1rem; }
.ok-module-grid-card.is-locked { background: color-mix(in srgb, var(--ok-card) 92%, var(--ok-accent)); }
.ok-module-card-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.ok-congrats { align-items: center; border-top: 1px solid rgba(255,255,255,.18); display: flex; justify-content: space-between; margin-top: 1rem; padding-top: 1rem; }
.ok-congrats span { color: #cbd5e1; }
.ok-module-card { padding: .3rem 1.25rem; }
.ok-module-card.is-locked { background: color-mix(in srgb, var(--ok-card) 92%, var(--ok-accent)); }
.ok-module-card.is-locked .ok-card-main { cursor: default; opacity: .48; }
.ok-module-card.is-locked .ok-number { filter: grayscale(.45); opacity: .72; }
.ok-lock { font-size: 1.15rem; }
.ok-locked-actions { border-top: 1px solid var(--ok-border); display: flex; justify-content: flex-end; padding: .85rem 0 1rem; }
.ok-module-grid-card.is-locked .ok-card-image { filter: grayscale(1); opacity: .42; }
.ok-module-grid-card.is-locked .ok-module-card-meta, .ok-module-grid-card.is-locked h3, .ok-module-grid-card.is-locked p { opacity: .52; }
.ok-card-main { align-items: center; color: inherit; display: grid; gap: 1.5rem; grid-template-columns: auto 1fr auto; padding: 1rem 0; text-decoration: none; }
.ok-card-main h3 { margin: 0; }
.ok-number { align-items: center; background: var(--ok-accent-color); border-radius: 999px; color: #fff; display: inline-flex; font-size: 1.1em; height: 3.25rem; justify-content: center; width: 3.25rem; }
.ok-number svg { height: 1.45rem; width: 1.45rem; }
.ok-module-card-meta { align-items: center; display: flex; gap: .75rem; justify-content: space-between; }
.ok-lesson-links { border-top: 1px solid var(--ok-border); display: grid; gap: .35rem; padding: .75rem 0 1rem 4.75rem; }
.ok-lesson-links a { align-items: center; color: inherit; display: flex; gap: .6rem; padding: .25rem 0; text-decoration: none; }
.ok-lesson-links a:hover { opacity: .8; }
.ok-status-dot { border: 1.5px solid #94a3b8; border-radius: 50%; display: inline-block; flex: 0 0 auto; height: .7rem; width: .7rem; }
.ok-status-dot.is-done { background: var(--ok-success); border-color: var(--ok-success); box-shadow: inset 0 0 0 2px #fff; }
.ok-search { margin: 1.25rem 0; position: relative; }
.ok-search input, .ok-form input, .ok-form select { background: #fff; border: 1px solid var(--ok-border); border-radius: calc(var(--ok-radius) - .2rem); color: inherit; font: inherit; min-height: 2.75rem; padding: .65rem .8rem; width: 100%; }
.ok-search input { padding-left: .8rem; padding-right: 3.15rem; }
.ok-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.ok-search input::-ms-clear { display: none; height: 0; width: 0; }
.ok-search input:focus, .ok-form input:focus { border-color: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.16); outline: none; }
.ok-search-icon { color: var(--ok-muted); font-size: 1.4em; left: auto; line-height: 1; pointer-events: none; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }
.ok-search-empty { background: var(--ok-accent); border-radius: var(--ok-radius); padding: 1rem; text-align: center; }
[data-ok-search-item][hidden] { display: none !important; }
.ok-button { align-items: center; background: var(--ok-button-bg); border: 1px solid transparent; border-radius: calc(var(--ok-radius) - .2rem); color: var(--ok-button-color) !important; cursor: pointer; display: inline-flex; font: inherit; justify-content: center; min-height: 2.7rem; padding: .6rem 1rem; text-decoration: none !important; }
.ok-button:hover { background: var(--ok-button-bg-hover); color: var(--ok-button-color-hover) !important; }
.ok-button:focus-visible { outline: 2px solid var(--global-palette-highlight, var(--ok-button-bg)); outline-offset: 2px; }
.ok-button:disabled { cursor: wait; opacity: .6; }
.ok-button-secondary { background: var(--global-palette-btn-sec-bg, #fff); border-color: var(--ok-border); color: var(--global-palette-btn-sec, inherit) !important; }
.ok-button-secondary:hover { background: var(--global-palette-btn-sec-bg-hover, var(--ok-accent)); color: var(--global-palette-btn-sec-hover, inherit) !important; }
.ok-button-wide { width: 100%; }
.ok-notice { border: 1px solid var(--ok-border); border-left-width: 4px; border-radius: calc(var(--ok-radius) - .25rem); margin: 1rem 0; padding: .8rem 1rem; }
.ok-notice-success { background: var(--ok-success-soft); border-left-color: var(--ok-success); color: #166534; }
.ok-notice-error { background: #fff1f1; border-left-color: var(--ok-error); color: var(--ok-error); }
.ok-notice-info { background: #eff6ff; border-left-color: #2563eb; }
.ok-breadcrumbs { align-items: center; color: var(--ok-muted); display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
.ok-breadcrumbs a { color: inherit; }
.ok-bottom-nav { align-items: center; border-top: 1px solid var(--ok-border); display: grid; gap: 1rem; grid-template-columns: 1fr auto 1fr; margin-top: 4rem; padding-top: 1.5rem; }
.ok-nav-side { color: inherit; display: flex; flex-direction: column; text-decoration: none; }
.ok-nav-side span { color: var(--ok-muted); }
.ok-nav-next { align-items: flex-end; text-align: right; }
.ok-completion-card { align-items: center; background: var(--ok-accent); border-radius: var(--ok-radius); display: flex; gap: 1.5rem; justify-content: space-between; margin: 2rem 0; padding: 1.5rem; }
.ok-completion-card > div { flex: 1; }
.ok-completion-card > .ok-save-status { order: 1; }
.ok-completion-card > .ok-button { margin-left: auto; order: 2; }
.ok-completion-card h2 { margin-bottom: .25rem; }
.ok-completion-card p { color: var(--ok-muted); margin-bottom: 0; }
.ok-auth-shell { display: flex; justify-content: center; padding: clamp(1rem,5vw,4rem) 0; }
.ok-auth-card { background: #fff; border: 1px solid var(--ok-border); border-radius: var(--ok-radius); box-shadow: var(--ok-shadow); max-width: 460px; padding: clamp(1.25rem, 5vw, 2.5rem); width: 100%; }
.ok-login-logo { display: block; height: auto; margin: 0 auto 2rem; max-height: 140px; max-width: min(100%, 320px); }
.ok-form { display: grid; gap: 1rem; }
.ok-form label { display: grid; gap: .35rem; }
.ok-form .ok-check { align-items: center; display: flex; }
.ok-form .ok-check input { min-height: auto; width: auto; }
.ok-divider { align-items: center; color: var(--ok-muted); display: flex; gap: .75rem; margin: 1.5rem 0; }
.ok-divider::before, .ok-divider::after { background: var(--ok-border); content: ''; flex: 1; height: 1px; }
.ok-profile { margin: 2rem auto; max-width: 800px; padding: clamp(1.25rem,4vw,2.5rem); }
.ok-profile .avatar { border-radius: 50%; }
.ok-form-grid { grid-template-columns: 1fr 1fr; }
.ok-form-section { border-top: 1px solid var(--ok-border); grid-column: 1/-1; margin-top: .5rem; padding-top: 1.25rem; }
.ok-empty { background: var(--ok-accent); border-radius: var(--ok-radius); padding: clamp(2rem,7vw,5rem); text-align: center; }
.ok-centered { padding: 2rem; text-align: center; }
.ok-welcome-page .entry-content > .wp-block-heading { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 1120px; width: 100%; }
.screen-reader-text { clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute !important; white-space: nowrap; width: 1px; }
@media (max-width: 800px) {
	.ok-hero { grid-template-columns: 1fr; }
	.ok-hero-image { max-height: 420px; }
	.ok-hero-card { grid-template-columns: 1fr; }
	.ok-hero-card .ok-hero-image { min-height: 240px; }
	.ok-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
	.ok-main { padding-left: .75rem; padding-right: .75rem; }
	.ok-grid, .ok-form-grid { grid-template-columns: 1fr; }
	.ok-form-grid > span { display: none; }
	.ok-progress-copy, .ok-congrats, .ok-completion-card { align-items: flex-start; flex-direction: column; }
	.ok-card-main { grid-template-columns: auto 1fr; }
	.ok-percent { grid-column: 2; }
	.ok-lock { grid-column: 2; }
	.ok-bottom-nav { grid-template-columns: 1fr 1fr; }
	.ok-bottom-nav .ok-button { grid-column: 1/-1; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .ok-shell * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
