/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Hallmark · macrostructure: Split Studio · genre: playful · design-system: DESIGN.md · tone: soft · anchor hue: purple · contrast: pass (40–41) · nav: N2 · footer: inherited · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; margin: 0; }
.kenz-course-detail { min-height: 100vh; overflow-x: clip; background: var(--kenz-color-page); color: var(--kenz-color-text); font-family: var(--kenz-font-body); }
.kenz-course-detail :where(a, button) { font: inherit; }
.kenz-course-detail :where(a, button):focus-visible { outline: var(--kenz-focus-width) solid var(--kenz-color-focus); outline-offset: var(--kenz-space-1); }
.kenz-course-hero :where(a, button):focus-visible { outline-color: var(--kenz-white); }
.kenz-course-detail :where(button:disabled, [aria-disabled="true"]) { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.kenz-course-detail .kenz-icon { width: var(--kenz-icon-size); height: var(--kenz-icon-size); flex: 0 0 auto; }
.kenz-visually-hidden { position: absolute !important; width: var(--kenz-visually-hidden-size) !important; height: var(--kenz-visually-hidden-size) !important; overflow: hidden !important; padding: 0 !important; border: 0 !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.kenz-skip-link { position: fixed; inset-block-start: var(--kenz-space-3); inset-inline-start: var(--kenz-space-3); z-index: 100; padding: var(--kenz-space-3) var(--kenz-space-4); border-radius: var(--kenz-control-radius); background: var(--kenz-color-surface); color: var(--kenz-color-primary); font-weight: 700; transform: translateY(-200%); }
.kenz-skip-link:focus { transform: translateY(0); }

.kenz-course-hero { background: var(--kenz-color-primary); color: var(--kenz-white); }
.kenz-course-detail__header, .kenz-course-hero__inner, .kenz-course-body { width: min(100% - 2.5rem, var(--kenz-content-width)); margin-inline: auto; }
.kenz-course-detail__header { display: flex; min-height: var(--kenz-header-height); align-items: center; justify-content: space-between; border-block-end: 2px solid var(--kenz-color-on-primary-border); }
.kenz-course-detail .kenz-brand { display: inline-flex; align-items: center; }
.kenz-course-detail .kenz-brand img { width: auto; height: var(--kenz-brand-logo-height); filter: brightness(0) invert(1); }
.kenz-course-detail__back { display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--kenz-space-2); color: var(--kenz-white); font-weight: 700; text-decoration: none; }
.kenz-course-detail__back .kenz-icon { transform: rotate(180deg); transition: transform var(--kenz-duration-fast) var(--kenz-ease-out); }
.kenz-course-hero__inner { display: grid; gap: var(--kenz-space-10); align-items: center; padding-block: var(--kenz-space-8) var(--kenz-space-12); }
.kenz-course-hero__copy { width: 100%; min-width: 0; align-self: center; }
.kenz-course-terms { display: flex; flex-wrap: wrap; gap: var(--kenz-space-2); }
.kenz-course-terms span { display: inline-flex; align-items: center; min-height: 2rem; padding-inline: var(--kenz-space-3); border: var(--kenz-line-thin) solid currentColor; border-radius: var(--kenz-chip-radius); color: var(--kenz-color-highlight); font-size: var(--kenz-course-utility-size); font-weight: 700; }
.kenz-course-hero h1 { min-width: 0; max-width: 18ch; margin: var(--kenz-space-5) 0 var(--kenz-space-4); overflow-wrap: anywhere; color: var(--kenz-white); font-family: var(--kenz-font-display); font-size: clamp(2rem, 3.2vw, 3.25rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.18; text-wrap: balance; }
.kenz-course-hero__excerpt { max-width: var(--kenz-copy-width); color: var(--kenz-purple-100); font-size: var(--kenz-text-lg); line-height: 1.85; }
.kenz-course-hero__excerpt > :first-child { margin-block-start: 0; }
.kenz-course-hero__excerpt > :last-child { margin-block-end: 0; }
.kenz-course-format { margin: 0; color: var(--kenz-color-highlight); font-size: var(--kenz-text-sm); font-weight: 700; line-height: 1.6; }
.kenz-course-hero-purchase { display: grid; gap: var(--kenz-space-4); max-width: 31rem; margin-block-start: var(--kenz-space-6); padding-block-start: var(--kenz-space-5); border-block-start: var(--kenz-line-thin) solid var(--kenz-purple-700); }
.kenz-course-hero-progress { display: grid; gap: var(--kenz-space-4); max-width: 31rem; margin-block-start: var(--kenz-space-6); padding-block-start: var(--kenz-space-5); border-block-start: var(--kenz-line-thin) solid var(--kenz-purple-700); }
.kenz-course-hero-progress h2 { margin: 0; color: var(--kenz-white); font-family: var(--kenz-font-display); font-size: var(--kenz-text-xl); }
.kenz-course-hero-progress .kenz-course-progress__figures strong { color: var(--kenz-white); }
.kenz-course-hero-progress .kenz-course-progress__figures span { color: var(--kenz-purple-100); }
.kenz-course-hero-progress .kenz-course-progress__bar { background: var(--kenz-purple-700); }
.kenz-course-hero-progress .kenz-button { width: 100%; }
.kenz-course-gift { max-width: 31rem; margin-block-start: var(--kenz-space-3); }
.kenz-course-gift .tutor-btn-gift { display: inline-flex; width: 100%; min-height: var(--kenz-control-height); align-items: center; justify-content: center; gap: var(--kenz-space-2); padding: var(--kenz-space-3) var(--kenz-space-5); border: var(--kenz-line-thin) solid var(--kenz-white); border-radius: var(--kenz-control-radius); background: transparent; color: var(--kenz-white); font-family: var(--kenz-font-body); font-weight: 700; white-space: nowrap; cursor: pointer; transition: color var(--kenz-duration-fast) var(--kenz-ease-out), background var(--kenz-duration-fast) var(--kenz-ease-out), transform var(--kenz-duration-fast) var(--kenz-ease-out); }
.kenz-course-media-column { min-width: 0; }
.kenz-course-utility-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--kenz-space-2); }
.kenz-course-utility-actions > :where(a, button) { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: var(--kenz-space-1); padding: var(--kenz-space-2) var(--kenz-space-3); border: var(--kenz-line-thin) solid var(--kenz-color-on-primary-border); border-radius: var(--kenz-control-radius); background: transparent; color: var(--kenz-white); font-size: var(--kenz-course-utility-size); font-weight: 700; line-height: 1.4; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--kenz-duration-fast) var(--kenz-ease-out), background var(--kenz-duration-fast) var(--kenz-ease-out), border-color var(--kenz-duration-fast) var(--kenz-ease-out), transform var(--kenz-duration-fast) var(--kenz-ease-out); }
.kenz-course-utility-actions .kenz-icon { width: 1.15rem; height: 1.15rem; }
.kenz-wishlist-state-hook { display: none; }
.kenz-course-price { color: var(--kenz-white); font-family: var(--kenz-font-display); font-size: var(--kenz-text-2xl); font-weight: 800; line-height: 1.15; }
.kenz-course-price del { margin-inline-end: var(--kenz-space-2); color: var(--kenz-color-accent); font-size: var(--kenz-text-md); font-weight: 600; opacity: 1; }
.kenz-course-price ins { color: var(--kenz-white); text-decoration: none; }
.kenz-course-purchase__actions { display: flex; flex-wrap: wrap; gap: var(--kenz-space-3); }
.kenz-button { display: inline-flex; min-height: var(--kenz-control-height); align-items: center; justify-content: center; padding: var(--kenz-space-3) var(--kenz-space-5); border: var(--kenz-line-thin) solid transparent; border-radius: var(--kenz-control-radius); font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; white-space: nowrap; transition: color var(--kenz-duration-fast) var(--kenz-ease-out), background var(--kenz-duration-fast) var(--kenz-ease-out), transform var(--kenz-duration-fast) var(--kenz-ease-out); }
.kenz-button-primary { background: var(--kenz-button-commerce-bg); border-color: var(--kenz-gold-600); color: var(--kenz-button-commerce-text); }
.kenz-button-secondary { background: var(--kenz-button-secondary-bg); border-color: var(--kenz-button-secondary-border); color: var(--kenz-button-secondary-text); }
.kenz-course-action-band { background: var(--kenz-color-highlight-soft); color: var(--kenz-text-heading); }
.kenz-course-cta-band { background: var(--kenz-brand-coral); color: var(--kenz-white); }
.kenz-course-cta-band > div { width: min(100% - 2.5rem, var(--kenz-content-width)); margin-inline: auto; padding-block: var(--kenz-space-5); font-family: var(--kenz-font-display); font-size: var(--kenz-text-xl); font-weight: 800; line-height: 1.55; text-align: center; }
.kenz-course-action-band__inner { display: flex; width: min(100% - 2.5rem, var(--kenz-content-width)); flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--kenz-space-4) var(--kenz-space-6); margin-inline: auto; padding-block: var(--kenz-space-5); }
.kenz-course-action-band .kenz-course-price { color: var(--kenz-text-heading); }
.kenz-course-action-band .kenz-course-price del { color: var(--kenz-color-accent-hover); }
.kenz-course-action-band .kenz-course-purchase__actions { align-items: center; }
.kenz-course-action-band .kenz-button-primary { background: var(--kenz-button-commerce-bg); border-color: var(--kenz-gold-600); color: var(--kenz-button-commerce-text); }
.kenz-course-action-band .kenz-button-primary:hover { background: var(--kenz-button-commerce-bg-hover); color: var(--kenz-button-commerce-text); }
.kenz-course-action-band .kenz-button-secondary { background: var(--kenz-button-secondary-bg); border-color: var(--kenz-button-secondary-border); color: var(--kenz-button-secondary-text); }
.kenz-course-action-band .kenz-button-secondary:hover { background: var(--kenz-button-secondary-bg-hover); color: var(--kenz-button-secondary-text); }
.kenz-course-action-band .kenz-course-gift { flex: 1 1 100%; max-width: 31rem; margin-block-start: 0; }
.kenz-course-action-band .kenz-course-gift .tutor-btn-gift { border-color: var(--kenz-color-primary); background: transparent; color: var(--kenz-color-primary); }
.kenz-course-action-band .kenz-course-gift .tutor-btn-gift:hover { background: var(--kenz-color-primary-soft); color: var(--kenz-color-primary); }
.kenz-course-media { position: relative; width: 100%; min-width: 0; overflow: hidden; aspect-ratio: var(--kenz-course-media-aspect); margin: 0; border-radius: var(--kenz-card-radius); background: var(--kenz-color-surface); box-shadow: var(--kenz-shadow-lead); }
.kenz-course-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kenz-course-media__fallback { display: grid; height: 100%; place-items: center; align-content: center; gap: var(--kenz-space-3); color: var(--kenz-color-primary); }
.kenz-course-media__fallback .kenz-icon { width: var(--kenz-fallback-icon-size); height: var(--kenz-fallback-icon-size); }
.kenz-course-media__play { position: absolute; right: auto; bottom: var(--kenz-space-5); left: 50%; display: inline-flex; min-height: var(--kenz-control-height); align-items: center; gap: var(--kenz-space-3); padding: var(--kenz-space-3) var(--kenz-space-5); border: 0; border-radius: var(--kenz-chip-radius); background: var(--kenz-color-primary); color: var(--kenz-white); font-weight: 700; box-shadow: var(--kenz-shadow-lead); cursor: pointer; transform: translateX(-50%); transition: background var(--kenz-duration-fast) var(--kenz-ease-out), transform var(--kenz-duration-fast) var(--kenz-ease-out); }
.kenz-course-media__play-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--kenz-color-highlight); color: var(--kenz-color-primary-hover); }
.kenz-course-media__play-icon .kenz-icon { width: 1.1rem; height: 1.1rem; fill: currentColor; }

.kenz-course-body { display: grid; gap: var(--kenz-space-10); align-items: start; padding-block: var(--kenz-space-16) var(--kenz-space-20); }
.kenz-course-body__main { min-width: 0; }
.kenz-course-tabs { overflow: hidden; padding: var(--kenz-space-6); border: var(--kenz-line-thin) solid var(--kenz-color-border); border-radius: var(--kenz-card-radius); background: var(--kenz-color-surface); }
.kenz-course-tabs__select-label, .kenz-course-tabs__select { display: none; }
.kenz-course-tabs__list { display: flex; gap: var(--kenz-space-6); overflow-x: auto; overscroll-behavior-inline: contain; border-block-end: var(--kenz-line-thin) solid var(--kenz-color-border); scroll-snap-type: inline proximity; scrollbar-width: thin; }
.kenz-course-tabs__list button { position: relative; min-height: 3.75rem; flex: 0 0 auto; padding: var(--kenz-space-3) 0; border: 0; background: transparent; color: var(--kenz-color-text-muted); font-family: var(--kenz-font-display); font-size: var(--kenz-text-lg); font-weight: 700; white-space: nowrap; cursor: pointer; scroll-snap-align: start; }
.kenz-course-tabs__list button[aria-selected="true"] { color: var(--kenz-color-accent); }
.kenz-course-tabs__list button[aria-selected="true"]::after { position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px; background: var(--kenz-color-accent); content: ""; }
.kenz-course-tab-panel { padding-block: var(--kenz-space-8) var(--kenz-space-3); }
.kenz-course-tab-panel > h2, .kenz-course-description > h2, .kenz-course-outcomes h2, .kenz-course-curriculum h2 { margin: 0; color: var(--kenz-color-primary); font-family: var(--kenz-font-display); font-size: var(--kenz-text-2xl); line-height: 1.3; }
.kenz-course-outcomes { padding-block-end: var(--kenz-space-10); }
.kenz-course-outcomes h2 { max-width: 22ch; margin-block-end: var(--kenz-space-8); }
.kenz-course-outcomes ol { max-width: var(--kenz-reading-width); margin: 0; padding: 0; list-style: none; }
.kenz-course-outcomes li { display: grid; grid-template-columns: var(--kenz-step-number-size) minmax(0, 1fr); gap: var(--kenz-space-4); align-items: start; padding-block: var(--kenz-space-4); border-block-end: var(--kenz-line-thin) solid var(--kenz-color-border); }
.kenz-course-outcomes li span { display: grid; width: var(--kenz-step-number-size); height: var(--kenz-step-number-size); place-items: center; border-radius: 50%; background: var(--kenz-color-primary); color: var(--kenz-white); }
.kenz-course-outcomes li span .kenz-icon { width: 1rem; height: 1rem; }
.kenz-course-outcomes li p { margin: 0; font-size: var(--kenz-text-lg); line-height: 1.8; }
.kenz-course-description { padding-block: var(--kenz-space-10); border-block-start: var(--kenz-line-thin) solid var(--kenz-color-border); }
.kenz-course-description > h2 { margin-block-end: var(--kenz-space-5); }
.kenz-course-description__content { position: relative; max-width: var(--kenz-reading-width); font-size: var(--kenz-text-lg); line-height: 1.95; }
.kenz-course-description__content.is-collapsed { max-height: 17.5rem; overflow: hidden; mask-image: linear-gradient(to bottom, var(--kenz-color-text) 72%, transparent); }
.kenz-course-description__content > :first-child { margin-block-start: 0; }
.kenz-course-description__content h2, .kenz-course-description__content h3 { margin-block: var(--kenz-space-10) var(--kenz-space-4); color: var(--kenz-color-text); font-size: var(--kenz-text-xl); }
.kenz-course-description__content img { max-width: 100%; height: auto; border-radius: var(--kenz-card-radius); }
.kenz-course-description__toggle { display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--kenz-space-2); margin-block-start: var(--kenz-space-4); padding: 0; border: 0; background: transparent; color: var(--kenz-color-primary); font-weight: 700; cursor: pointer; }
.kenz-course-description__toggle .kenz-icon { transform: rotate(90deg); transition: transform var(--kenz-duration-fast) var(--kenz-ease-out); }
.kenz-course-description__toggle[aria-expanded="true"] .kenz-icon { transform: rotate(-90deg); }
.kenz-course-curriculum { margin-block-start: var(--kenz-space-6); padding: var(--kenz-space-6); border: var(--kenz-line-thin) solid var(--kenz-color-border); border-radius: var(--kenz-card-radius); background: var(--kenz-color-surface); }
.kenz-course-curriculum__heading { margin-block-end: var(--kenz-space-8); }
.kenz-course-curriculum__heading p { margin: var(--kenz-space-2) 0 0; color: var(--kenz-color-text-muted); }
.kenz-course-curriculum__tutor { color: var(--kenz-color-text); }
.kenz-course-curriculum__tutor :where(.tutor-accordion-item, .tutor-course-topic) { overflow: hidden; border: var(--kenz-line-thin) solid var(--kenz-color-border); border-radius: var(--kenz-control-radius); background: var(--kenz-color-surface); }
.kenz-course-curriculum__tutor :where(.tutor-accordion-item, .tutor-course-topic) + :where(.tutor-accordion-item, .tutor-course-topic) { margin-block-start: var(--kenz-space-3); }
.kenz-course-curriculum__tutor :where(.tutor-accordion-item-header, .tutor-course-topic-header) { padding: var(--kenz-space-4) var(--kenz-space-5); color: var(--kenz-color-primary); font-weight: 700; }
.kenz-course-curriculum__tutor a { color: var(--kenz-color-primary); }
.kenz-course-curriculum__tutor .tutor-course-content-title { color: var(--kenz-text-heading) !important; }
.kenz-course-curriculum__tutor .tutor-accordion-item-header.is-active { background: var(--kenz-color-accent-soft) !important; color: var(--kenz-color-accent-text) !important; }
.kenz-course-curriculum__tutor .tutor-accordion-item-body-content { border-color: var(--kenz-color-border) !important; }
.kenz-course-curriculum__tutor .tutor-course-content-list-item-icon { color: var(--kenz-color-support) !important; }
.kenz-course-curriculum__tutor .tutor-course-content-list-item-duration { color: var(--kenz-color-text-muted) !important; }
.kenz-course-feedback-list { display: grid; gap: var(--kenz-space-4); margin-block-start: var(--kenz-space-6); }
.kenz-course-feedback-list article { max-width: var(--kenz-reading-width); padding-block-end: var(--kenz-space-4); border-block-end: var(--kenz-line-thin) solid var(--kenz-color-border); }
.kenz-course-feedback-list h3 { margin: 0 0 var(--kenz-space-2); color: var(--kenz-color-primary); font-family: var(--kenz-font-display); font-size: var(--kenz-text-lg); }
.kenz-course-feedback-list p, .kenz-course-empty, .kenz-course-access-note { max-width: var(--kenz-reading-width); margin: var(--kenz-space-5) 0 0; color: var(--kenz-color-text-muted); font-size: var(--kenz-text-lg); line-height: 1.85; }
.kenz-course-access-note { padding: var(--kenz-space-4); border-radius: var(--kenz-control-radius); background: var(--kenz-color-primary-soft); color: var(--kenz-color-primary); }
.kenz-course-resources { display: grid; gap: var(--kenz-space-3); max-width: var(--kenz-reading-width); margin: var(--kenz-space-6) 0 0; padding: 0; list-style: none; }
.kenz-course-resources a { display: inline-flex; align-items: center; gap: var(--kenz-space-3); color: var(--kenz-color-primary); font-weight: 700; }

.kenz-course-rail { display: grid; gap: var(--kenz-space-6); }
.kenz-course-progress, .kenz-course-facts, .kenz-course-notes { padding: var(--kenz-space-6); border: var(--kenz-line-thin) solid var(--kenz-color-border); border-radius: var(--kenz-card-radius); background: var(--kenz-color-surface); }
.kenz-course-progress { display: grid; gap: var(--kenz-space-5); }
.kenz-course-progress__eyebrow { margin: 0; color: var(--kenz-color-primary); font-size: var(--kenz-text-sm); font-weight: 700; }
.kenz-course-progress h2 { margin: 0; color: var(--kenz-color-text); font-family: var(--kenz-font-display); font-size: var(--kenz-text-2xl); }
.kenz-course-progress__figures { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kenz-space-3); font-variant-numeric: tabular-nums; }
.kenz-course-progress__figures strong { color: var(--kenz-color-primary); font-family: var(--kenz-font-display); font-size: var(--kenz-text-2xl); }
.kenz-course-progress__figures span { color: var(--kenz-color-text-muted); font-weight: 700; }
.kenz-course-progress__bar { height: 0.5rem; overflow: hidden; border-radius: var(--kenz-radius-pill); background: var(--kenz-color-border); }
.kenz-course-progress__bar span { display: block; height: 100%; border-radius: inherit; background: var(--kenz-color-accent); }
.kenz-course-progress .kenz-button { width: 100%; }
.kenz-course-facts { display: grid; gap: var(--kenz-space-4); margin: 0; }
.kenz-course-facts > div + div { padding-block-start: var(--kenz-space-4); border-block-start: var(--kenz-line-thin) solid var(--kenz-color-border); }
.kenz-course-facts dt { display: flex; align-items: center; gap: var(--kenz-space-2); margin-block-end: var(--kenz-space-2); color: var(--kenz-color-primary); font-size: var(--kenz-text-sm); font-weight: 700; }
.kenz-course-facts dd { margin: 0; color: var(--kenz-color-text); line-height: 1.75; }
.kenz-course-notes { display: grid; gap: var(--kenz-space-6); }
.kenz-course-notes > div + div { padding-block-start: var(--kenz-space-6); border-block-start: var(--kenz-line-thin) solid var(--kenz-color-border); }
.kenz-course-notes h2 { display: flex; align-items: center; gap: var(--kenz-space-3); margin: 0 0 var(--kenz-space-4); color: var(--kenz-color-primary); font-family: var(--kenz-font-display); font-size: var(--kenz-text-xl); }
.kenz-course-notes ul { margin: 0; padding-inline-start: var(--kenz-space-6); color: var(--kenz-color-text-muted); line-height: 1.85; }
.kenz-course-notes li + li { margin-block-start: var(--kenz-space-2); }
.kenz-course-presenter { padding: var(--kenz-space-6); border: var(--kenz-line-thin) solid var(--kenz-color-border); border-radius: var(--kenz-card-radius); background: var(--kenz-color-surface); }
.kenz-course-presenter h2 { margin: 0 0 var(--kenz-space-4); color: var(--kenz-color-primary); font-family: var(--kenz-font-display); font-size: var(--kenz-text-xl); }
.kenz-course-presenter-list { display: grid; gap: var(--kenz-space-3); }
.kenz-course-presenter a { display: flex; align-items: center; gap: var(--kenz-space-3); color: inherit; text-decoration: none; }
.kenz-course-presenter__photo { display: grid; width: 3.5rem; height: 3.5rem; flex: 0 0 auto; overflow: hidden; place-items: center; border-radius: 50%; background: var(--kenz-color-primary-soft); }
.kenz-course-presenter__photo img { width: 100%; height: 100%; object-fit: cover; }
.kenz-course-presenter strong, .kenz-course-presenter small { display: block; }
.kenz-course-presenter strong { color: var(--kenz-color-text); }
.kenz-course-presenter small { margin-block-start: var(--kenz-space-1); color: var(--kenz-color-text-muted); line-height: 1.55; }

.kenz-video-dialog { width: min(100% - 2rem, 64rem); max-width: none; padding: 0; border: 0; border-radius: var(--kenz-card-radius); background: var(--kenz-purple-900); color: var(--kenz-white); box-shadow: var(--kenz-shadow-lead); }
.kenz-video-dialog::backdrop { background: var(--kenz-color-scrim); }
.kenz-video-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--kenz-space-4); padding: var(--kenz-space-4) var(--kenz-space-5); }
.kenz-video-dialog__header h2 { margin: 0; color: var(--kenz-white); font-family: var(--kenz-font-display); font-size: var(--kenz-text-lg); }
.kenz-video-dialog__close { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; border: var(--kenz-line-thin) solid var(--kenz-purple-700); border-radius: 50%; background: transparent; color: var(--kenz-white); cursor: pointer; }
.kenz-video-dialog__frame { aspect-ratio: 16 / 9; }
.kenz-video-dialog__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (min-width: 60rem) { .kenz-course-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(22rem, 1fr); } .kenz-course-media-column { display: grid; align-self: stretch; align-items: center; } .kenz-course-body { grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.38fr); } .kenz-course-rail { position: sticky; inset-block-start: var(--kenz-space-6); } }
@media (max-width: 47.9375rem) { .kenz-course-detail__header, .kenz-course-hero__inner, .kenz-course-body, .kenz-course-action-band__inner, .kenz-course-cta-band > div { width: min(100% - 2rem, var(--kenz-content-width)); } .kenz-course-detail__header { min-height: 4rem; } .kenz-course-hero__inner { gap: var(--kenz-space-6); padding-block: var(--kenz-space-5) var(--kenz-space-8); } .kenz-course-media-column { order: -1; } .kenz-course-media { border-radius: var(--kenz-control-radius); box-shadow: none; } .kenz-course-hero h1 { margin-block: var(--kenz-space-4) var(--kenz-space-3); font-size: var(--kenz-text-2xl); } .kenz-course-hero__excerpt, .kenz-course-description__content, .kenz-course-outcomes li p, .kenz-course-feedback-list p { font-size: var(--kenz-text-md); } .kenz-course-purchase__actions { display: grid; width: 100%; } .kenz-course-purchase__actions .kenz-button { width: 100%; } .kenz-course-utility-actions { justify-content: flex-start; } .kenz-course-utility-actions > :where(a, button) { min-height: 2.25rem; flex: 0 1 auto; font-size: var(--kenz-text-xs); } .kenz-course-media__play { bottom: var(--kenz-space-3); width: calc(100% - 2 * var(--kenz-space-6)); justify-content: center; } .kenz-course-action-band__inner { align-items: stretch; flex-direction: column; gap: var(--kenz-space-3); padding-block: var(--kenz-space-5); } .kenz-course-action-band .kenz-course-price, .kenz-course-action-band .kenz-course-purchase__actions, .kenz-course-action-band .kenz-course-gift { width: 100%; max-width: none; } .kenz-course-action-band .kenz-course-price { text-align: center; } .kenz-course-tabs { padding: var(--kenz-space-4); border-radius: var(--kenz-control-radius); } .kenz-course-tabs__select-label { display: block; margin-block-end: var(--kenz-space-2); color: var(--kenz-color-text-muted); font-size: var(--kenz-text-2xs); font-weight: 700; } .kenz-course-tabs__select { display: block; width: 100%; min-height: var(--kenz-control-height); padding: var(--kenz-space-3) var(--kenz-space-4); border: var(--kenz-line-thin) solid var(--kenz-color-border-strong); border-radius: var(--kenz-control-radius); background: var(--kenz-color-surface); color: var(--kenz-color-primary); font: inherit; font-weight: 700; } .kenz-course-tabs__list { display: none; } .kenz-course-tab-panel { padding-block: var(--kenz-space-7) var(--kenz-space-2); } .kenz-course-curriculum { padding: var(--kenz-space-4); border-radius: var(--kenz-control-radius); } }
@media (hover: hover) and (pointer: fine) { .kenz-course-detail__back:hover .kenz-icon { transform: rotate(180deg) translateX(var(--kenz-space-1)); } .kenz-course-gift .tutor-btn-gift:hover, .kenz-course-utility-actions > :where(a, button):hover { border-color: var(--kenz-white); background: var(--kenz-white); color: var(--kenz-color-primary); } .kenz-button:hover { transform: translateY(-0.125rem); } .kenz-button-primary:hover { background: var(--kenz-button-commerce-bg-hover); color: var(--kenz-button-commerce-text); } .kenz-button-secondary:hover { background: var(--kenz-button-secondary-bg-hover); color: var(--kenz-button-secondary-text); } .kenz-course-media__play:hover { background: var(--kenz-color-primary-hover); transform: translateX(-50%) translateY(-0.125rem); } }
.kenz-button:active, .kenz-course-gift .tutor-btn-gift:active, .kenz-course-utility-actions > :where(a, button):active { transform: scale(0.97); }
.kenz-course-tabs__list button:active, .kenz-course-description__toggle:active, .kenz-video-dialog__close:active { transform: scale(0.97); }
.kenz-course-media__play:active { transform: translateX(-50%) scale(0.97); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .kenz-button, .kenz-course-gift .tutor-btn-gift, .kenz-course-utility-actions > :where(a, button), .kenz-course-detail__back .kenz-icon, .kenz-course-media__play, .kenz-course-description__toggle .kenz-icon { transition-duration: 100ms; } .kenz-button:hover, .kenz-button:active, .kenz-course-gift .tutor-btn-gift:active, .kenz-course-utility-actions > :where(a, button):active { transform: none; } .kenz-course-media__play:hover, .kenz-course-media__play:active { transform: translateX(-50%); } }