/* Approved Matgamsa course preview. All overrides stay within the two course pages. */
.course-preview-page,
.course-application-page {
  --motion-white: #fff;
  --motion-paper: #f6f8fa;
  --motion-ink: #17191b;
  --motion-muted: #62676c;
  --motion-line: #dfe3e7;
  --motion-pink: #f53178;
  --motion-mint: #18bca8;
  --motion-lime: #d8fb68;
  margin: 0;
  background: var(--motion-white);
  color: var(--motion-ink);
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-x: hidden;
}

.course-preview-page *,
.course-preview-page *::before,
.course-preview-page *::after,
.course-application-page *,
.course-application-page *::before,
.course-application-page *::after {
  letter-spacing: 0;
}

.course-preview-page a,
.course-application-page a {
  color: inherit;
}

.course-preview-page .course-skip,
.course-application-page .course-skip {
  border-radius: 6px;
  background: var(--motion-ink);
  color: var(--motion-white);
}

.course-preview-page .course-header,
.course-application-page .course-header,
.course-application-page .course-header--dark {
  height: 76px;
  padding: 0 48px;
  border-bottom: 1px solid rgba(23, 25, 27, .1);
  background: rgba(255, 255, 255, .9);
  color: var(--motion-ink);
  backdrop-filter: blur(14px);
}

.course-preview-page .course-brand,
.course-application-page .course-brand {
  font-size: 19px;
  font-weight: 900;
}

.course-preview-page .course-header nav,
.course-application-page .course-header nav {
  gap: 24px;
}

.course-preview-page .course-header nav a,
.course-application-page .course-header nav a {
  font-size: 14px;
  font-weight: 800;
}

.course-preview-page .course-header a:focus-visible,
.course-application-page .course-header a:focus-visible {
  outline: 3px solid var(--motion-pink);
  outline-offset: 5px;
}

/* Hero */
.course-preview-page .course-hero {
  min-height: 820px;
  grid-template-columns: minmax(460px, .9fr) minmax(560px, 1.1fr);
  grid-template-rows: 1fr auto;
  gap: 28px 56px;
  align-items: center;
  padding: 112px 64px 42px;
  background: var(--motion-white);
  isolation: isolate;
}

.course-preview-page .course-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 13px;
  background: linear-gradient(90deg, var(--motion-pink) 0 37%, var(--motion-mint) 37% 72%, var(--motion-lime) 72% 100%);
}

.course-preview-page .course-hero-field {
  right: -52px;
  top: 94px;
  width: min(50vw, 720px);
  height: 650px;
  border: 1px solid #e7eaed;
  border-radius: 8px 0 0 8px;
  background: var(--motion-paper);
  opacity: 1;
  transform: none;
}

.course-preview-page .course-hero-copy {
  align-self: center;
  max-width: 670px;
}

.course-preview-page .course-eyebrow,
.course-preview-page .course-flow-intro > span,
.course-preview-page .course-decision-copy > span,
.course-application-page .application-intro > span {
  color: var(--motion-pink);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 900;
}

.course-preview-page .course-hero h1 {
  margin: 22px 0 0;
  color: var(--motion-ink);
  font-size: 76px;
  line-height: 1;
  font-weight: 900;
}

.course-preview-page .course-hero-hook {
  max-width: 660px;
  margin: 20px 0 0;
  color: var(--motion-ink);
  font-size: 39px;
  line-height: 1.16;
  font-weight: 900;
}

.course-preview-page .course-hero-copy > .course-hero-support {
  max-width: 630px;
  margin: 24px 0 0;
  color: var(--motion-muted);
  font-size: 17px;
  line-height: 1.66;
  font-weight: 650;
}

.course-preview-page .course-hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.course-preview-page .course-hero-actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 56px;
  padding: 14px 19px;
  border: 2px solid var(--motion-ink);
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 850;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.course-preview-page .course-action-primary {
  min-width: 210px;
  background: var(--motion-pink);
  color: var(--motion-white);
}

.course-preview-page .course-action-secondary {
  min-width: 182px;
  background: var(--motion-white);
  color: var(--motion-ink);
}

.course-preview-page .course-hero-actions a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(23, 25, 27, .14);
}

.course-preview-page .course-hero-actions a:active {
  transform: translateY(0);
}

.course-preview-page .course-hero-actions a:focus-visible {
  outline: 3px solid var(--motion-mint);
  outline-offset: 4px;
}

.course-preview-page .course-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 630px;
  margin: 32px 0 0;
  border-top: 1px solid var(--motion-line);
}

.course-preview-page .course-hero-facts div {
  min-width: 0;
  padding: 15px 12px 0 0;
}

.course-preview-page .course-hero-facts div + div {
  padding-left: 14px;
  border-left: 1px solid var(--motion-line);
}

.course-preview-page .course-hero-facts dt {
  color: var(--motion-muted);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
}

.course-preview-page .course-hero-facts dd {
  margin: 6px 0 0;
  color: var(--motion-ink);
  font-size: 14px;
  line-height: 1.42;
  font-weight: 850;
}

.course-preview-page .course-phone-scene {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: 172px 194px 172px;
  align-items: center;
  gap: 12px;
  width: 574px;
  min-height: 560px;
  padding: 34px 0 20px;
}

.course-preview-page .course-phone-scene::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 12px;
  right: 12px;
  bottom: 17px;
  height: 2px;
  background: var(--motion-ink);
  box-shadow: 0 18px 38px rgba(23, 25, 27, .18);
}

.course-preview-page .course-phone {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 13px;
  width: 172px;
  margin: 0;
  aspect-ratio: auto;
  filter: none;
  transform: none;
}

.course-preview-page .course-phone--plan {
  transform: translateY(22px) rotate(-2deg);
}

.course-preview-page .course-phone--shoot {
  width: 194px;
  transform: translateY(-10px);
}

.course-preview-page .course-phone--upload {
  transform: translateY(22px) rotate(2deg);
}

.course-preview-page .course-phone-frame,
.course-preview-page .course-lesson-phone {
  width: 100%;
  aspect-ratio: .512;
  height: auto;
  padding: 7px;
  border: 1px solid #72767a;
  border-radius: 34px;
  background: linear-gradient(145deg, #94999d 0, #25282b 10%, #08090a 82%, #787d80 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 24px 42px rgba(23, 25, 27, .2);
}

.course-preview-page .course-phone-island,
.course-preview-page .course-lesson-island {
  top: 15px;
  width: 30%;
  height: 17px;
  background: #050607;
}

.course-preview-page .course-phone-screen,
.course-preview-page .course-lesson-screen {
  border-radius: 27px;
  background: var(--motion-ink);
}

.course-preview-page .course-phone-screen img {
  transform: none;
}

.course-preview-page .course-phone-shade,
.course-preview-page .course-lesson-shade {
  background: linear-gradient(180deg, rgba(0, 0, 0, .02) 26%, rgba(0, 0, 0, .08) 50%, rgba(0, 0, 0, .9) 100%);
}

.course-preview-page .course-phone-screen > small {
  right: 9px;
  top: 40px;
  padding: 5px 7px;
  border-radius: 5px;
  background: rgba(23, 25, 27, .88);
  color: var(--motion-white);
  font-size: 10px;
}

.course-preview-page .course-phone-screen > div {
  left: 12px;
  right: 12px;
  bottom: 17px;
  gap: 5px;
}

.course-preview-page .course-phone-screen > div b {
  color: var(--motion-lime);
  font-size: 10px;
}

.course-preview-page .course-phone-screen > div strong {
  color: var(--motion-white);
  font-size: 20px;
  line-height: 1.12;
}

.course-preview-page .course-phone--shoot .course-phone-screen > div strong {
  font-size: 22px;
}

.course-preview-page .course-phone-screen > div i {
  height: 4px;
  margin-top: 3px;
}

.course-preview-page .course-phone-screen > div i::after {
  width: 76%;
  background: var(--motion-pink);
}

.course-preview-page .course-phone figcaption {
  color: var(--motion-ink);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.course-preview-page .course-phone--shoot figcaption {
  color: var(--motion-pink);
}

.course-preview-page .course-hero-note {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--motion-line);
  color: var(--motion-muted);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 650;
}

/* Concern resolution */
.course-preview-page .course-concerns {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: 70px;
  padding: 86px 64px 90px;
  background: var(--motion-paper);
}

.course-preview-page .course-concerns header {
  max-width: 490px;
}

.course-preview-page .course-concerns header > span,
.course-preview-page .course-takeaways header > span {
  color: var(--motion-mint);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 900;
}

.course-preview-page .course-concerns h2,
.course-preview-page .course-takeaways h2 {
  margin: 16px 0 0;
  color: var(--motion-ink);
  font-size: 48px;
  line-height: 1.08;
  font-weight: 900;
}

.course-preview-page .course-concern-list {
  border-top: 2px solid var(--motion-ink);
}

.course-preview-page .course-concern-list article {
  display: grid;
  grid-template-columns: 46px minmax(150px, .52fr) minmax(220px, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 94px;
  border-bottom: 1px solid #cfd4d8;
}

.course-preview-page .course-concern-list article > span {
  color: var(--motion-pink);
  font-size: 13px;
  font-weight: 900;
}

.course-preview-page .course-concern-list h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 900;
}

.course-preview-page .course-concern-list p {
  margin: 0;
  color: var(--motion-muted);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 650;
}

/* Five-step flow, with existing data attributes left intact for course-v6-preview.js. */
.course-preview-page .course-flow,
.course-preview-page .course-flow[data-course-lesson="setup"],
.course-preview-page .course-flow[data-course-lesson="ai"],
.course-preview-page .course-flow[data-course-lesson="shoot"],
.course-preview-page .course-flow[data-course-lesson="edit"],
.course-preview-page .course-flow[data-course-lesson="upload"] {
  --course-flow-bg: var(--motion-white);
  --lesson-accent: var(--motion-pink);
  padding: 108px 64px 118px;
  background: var(--motion-white);
  color: var(--motion-ink);
}

.course-preview-page .course-flow[data-course-lesson="ai"],
.course-preview-page .course-flow[data-course-lesson="edit"] {
  --lesson-accent: var(--motion-mint);
}

.course-preview-page .course-flow[data-course-lesson="shoot"],
.course-preview-page .course-flow[data-course-lesson="upload"] {
  --lesson-accent: #8dbb14;
}

.course-preview-page .course-flow-intro {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .58fr);
  max-width: 1320px;
  margin-bottom: 68px;
}

.course-preview-page .course-flow h2 {
  color: var(--motion-ink);
  font-size: 64px;
  line-height: 1.02;
}

.course-preview-page .course-flow h2 mark {
  color: var(--lesson-accent);
}

.course-preview-page .course-flow-intro > p {
  color: var(--motion-muted);
  font-size: 16px;
}

.course-preview-page .course-flow-stage {
  grid-template-columns: minmax(0, 1fr) 330px;
  max-width: 1320px;
  gap: 72px;
}

.course-preview-page .course-flow-list {
  border-top: 2px solid var(--motion-ink);
}

.course-preview-page .course-flow-list li {
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 176px;
  padding: 30px 12px 32px 18px;
  border-bottom: 1px solid var(--motion-line);
  color: var(--motion-ink);
  opacity: .42;
}

.course-preview-page .course-flow-list li::before {
  top: 20px;
  bottom: 20px;
  width: 4px;
  border-radius: 0;
  background: var(--lesson-accent);
}

.course-preview-page .course-flow-list li[aria-current="step"] {
  padding-block: 40px 44px;
  background: var(--motion-paper);
  opacity: 1;
}

.course-preview-page .course-flow-list time,
.course-preview-page .course-flow-list b {
  color: var(--lesson-accent);
}

.course-preview-page .course-flow-list li > div {
  grid-template-columns: 46px minmax(0, 1fr);
}

.course-preview-page .course-flow-list h3,
.course-preview-page .course-flow-list li[aria-current="step"] h3 {
  color: var(--motion-ink);
  font-size: 36px;
  line-height: 1.08;
}

.course-preview-page .course-flow-list p {
  color: var(--motion-muted);
  font-size: 16px;
  line-height: 1.58;
}

.course-preview-page .course-lesson-device {
  top: 104px;
  gap: 18px;
}

.course-preview-page .course-lesson-phone {
  width: 300px;
}

.course-preview-page .course-lesson-screen > section {
  transform: none;
}

.course-preview-page .course-lesson-screen section > small {
  border-radius: 5px;
  background: rgba(23, 25, 27, .88);
  color: var(--motion-white);
  font-size: 10px;
}

.course-preview-page .course-lesson-screen section > div:not(.course-lesson-ai > div) {
  color: var(--motion-white);
}

.course-preview-page .course-lesson-screen section > div > strong {
  font-size: 25px;
}

.course-preview-page .course-lesson-screen section > div > p {
  font-size: 14px;
}

.course-preview-page .course-lesson-ai {
  background: var(--motion-paper) !important;
  color: var(--motion-ink);
}

.course-preview-page .course-lesson-ai span {
  color: var(--motion-pink);
}

.course-preview-page .course-lesson-ai strong {
  font-size: 28px;
}

.course-preview-page .course-lesson-ai li {
  border-color: var(--motion-line);
  border-radius: 6px;
  color: var(--motion-ink);
}

.course-preview-page .course-lesson-ai li b {
  background: var(--motion-lime);
  color: var(--motion-ink);
}

.course-preview-page .course-focus-frame {
  border-color: var(--motion-lime);
  border-radius: 8px;
}

.course-preview-page .course-edit-rail em {
  background: var(--motion-mint);
}

.course-preview-page .course-upload-pulse {
  background: var(--motion-lime);
  color: var(--motion-ink);
}

.course-preview-page .course-lesson-progress {
  width: 300px;
  height: 5px;
  background: var(--motion-line);
}

.course-preview-page .course-lesson-progress i {
  background: linear-gradient(90deg, var(--motion-pink), var(--motion-mint), #9ccc24);
}

/* What participants leave with */
.course-preview-page .course-takeaways {
  display: grid;
  grid-template-columns: minmax(300px, .68fr) minmax(0, 1.32fr);
  gap: 70px;
  padding: 92px 64px;
  border-top: 1px solid #bdd45f;
  border-bottom: 1px solid #bdd45f;
  background: var(--motion-lime);
  color: var(--motion-ink);
}

.course-preview-page .course-takeaways header > span {
  color: var(--motion-ink);
}

.course-preview-page .course-takeaways ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--motion-ink);
  list-style: none;
}

.course-preview-page .course-takeaways li {
  display: grid;
  align-content: start;
  min-height: 220px;
  padding: 22px 24px 0 0;
  border-bottom: 1px solid rgba(23, 25, 27, .46);
}

.course-preview-page .course-takeaways li + li {
  padding-left: 24px;
  border-left: 1px solid rgba(23, 25, 27, .35);
}

.course-preview-page .course-takeaways li b {
  color: #9e1e53;
  font-size: 13px;
}

.course-preview-page .course-takeaways li strong {
  margin-top: 42px;
  font-size: 22px;
  line-height: 1.24;
  font-weight: 900;
}

.course-preview-page .course-takeaways li p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
}

/* Decision and calendar */
.course-preview-page .course-decision {
  min-height: 850px;
  grid-template-columns: minmax(0, 1fr) minmax(390px, .7fr);
  gap: 38px 76px;
  padding: 110px 64px 54px;
  background: var(--motion-paper);
}

.course-preview-page .course-decision h2 {
  margin-top: 18px;
  color: var(--motion-ink);
  font-size: 62px;
  line-height: 1.03;
}

.course-preview-page .course-decision h2 mark {
  color: var(--motion-pink);
}

.course-preview-page .course-confirmed-facts {
  border-color: #cfd4d8;
}

.course-preview-page .course-confirmed-facts div {
  border-color: #cfd4d8;
}

.course-preview-page .course-confirmed-facts dt {
  color: var(--motion-mint);
}

.course-preview-page .course-confirmed-facts dd {
  color: var(--motion-ink);
}

.course-preview-page .course-price > span,
.course-preview-page .course-decision-action > p,
.course-preview-page .course-calendar > p {
  color: var(--motion-muted);
}

.course-preview-page .course-price del {
  color: #767b80;
}

.course-preview-page .course-price strong {
  color: var(--motion-pink);
  font-size: 44px;
}

.course-preview-page .course-calendar {
  padding: 26px;
  border: 2px solid var(--motion-ink);
  border-radius: 8px;
  background: var(--motion-white);
  box-shadow: 13px 13px 0 var(--motion-mint);
}

.course-preview-page .course-calendar header button {
  border-color: var(--motion-ink);
  border-radius: 6px;
  color: var(--motion-ink);
}

.course-preview-page .course-calendar header button:hover {
  background: var(--motion-ink);
  color: var(--motion-white);
}

.course-preview-page .course-calendar-days .is-event {
  border-radius: 6px;
  background: var(--motion-pink);
  color: var(--motion-white);
  box-shadow: 0 0 0 2px var(--motion-ink);
}

.course-preview-page .course-decision-action {
  border-color: #cfd4d8;
}

.course-preview-page .course-decision-action > a {
  min-height: 58px;
  border: 2px solid var(--motion-ink);
  border-radius: 6px;
  background: var(--motion-pink);
  color: var(--motion-white);
}

.course-preview-page .course-decision-action > a:hover {
  background: var(--motion-mint);
  border-color: var(--motion-ink);
  color: var(--motion-ink);
}

.course-preview-page .course-footer,
.course-application-page .course-footer,
.course-application-page .course-footer--dark {
  border-color: var(--motion-line);
  background: var(--motion-white);
  color: var(--motion-ink);
}

.course-preview-page .course-footer p,
.course-application-page .course-footer p,
.course-application-page .course-footer--dark p {
  color: var(--motion-muted);
}

/* Application */
.course-application-page,
.course-application-page .application-main {
  background: var(--motion-paper);
  color: var(--motion-ink);
}

.course-application-page .application-main {
  min-height: 100svh;
  padding: 128px 48px 100px;
}

.course-application-page .application-intro,
.course-application-page .application-course-lock,
.course-application-page .application-form {
  width: min(100%, 1120px);
  margin-right: auto;
  margin-left: auto;
}

.course-application-page .application-intro {
  max-width: 1120px;
}

.course-application-page .application-intro h1 {
  margin-top: 18px;
  color: var(--motion-ink);
  font-size: 66px;
  line-height: 1.04;
  font-weight: 900;
}

.course-application-page .application-intro h1 mark {
  color: var(--motion-pink);
}

.course-application-page .application-intro > p {
  max-width: 660px;
  margin-top: 24px;
  color: var(--motion-muted);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 650;
}

.course-application-page .application-course-lock {
  grid-template-columns: 130px minmax(0, 1fr);
  margin-top: 48px;
  padding: 22px 24px;
  border: 1px solid #b9d353;
  border-radius: 8px;
  background: var(--motion-lime);
}

.course-application-page .application-course-lock span {
  color: var(--motion-ink);
}

.course-application-page .application-course-lock strong {
  color: var(--motion-ink);
  font-size: 21px;
}

.course-application-page .application-form {
  max-width: 1120px;
  margin-top: 32px;
  padding: 42px;
  border: 1px solid var(--motion-line);
  border-radius: 8px;
  background: var(--motion-white);
  box-shadow: 0 18px 50px rgba(23, 25, 27, .07);
}

.course-application-page .application-fields {
  gap: 32px 38px;
}

.course-application-page .application-fields legend {
  margin-bottom: 8px;
  padding-bottom: 20px;
  border-color: var(--motion-ink);
  color: var(--motion-ink);
  font-size: 38px;
}

.course-application-page .application-fields > label > span,
.course-application-page .application-choice > span {
  color: var(--motion-ink);
  font-size: 13px;
}

.course-application-page .application-fields input:not([type="radio"]),
.course-application-page .application-fields select,
.course-application-page .application-fields textarea {
  min-height: 54px;
  padding: 13px 14px;
  border: 1px solid #cfd4d8;
  border-radius: 6px;
  background: var(--motion-paper);
  color: var(--motion-ink);
  font-size: 16px;
}

.course-application-page .application-fields textarea {
  min-height: 116px;
}

.course-application-page .application-fields select {
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--motion-ink) 50%), linear-gradient(135deg, var(--motion-ink) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 9px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.course-application-page .application-fields select option {
  background: var(--motion-white);
  color: var(--motion-ink);
}

.course-application-page .application-fields input::placeholder,
.course-application-page .application-fields textarea::placeholder {
  color: #858b90;
}

.course-application-page .application-fields input:focus,
.course-application-page .application-fields select:focus,
.course-application-page .application-fields textarea:focus {
  border-color: var(--motion-mint);
  box-shadow: 0 0 0 3px rgba(24, 188, 168, .18);
}

.course-application-page .application-fields [aria-invalid="true"] {
  border-color: var(--motion-pink);
  box-shadow: 0 0 0 3px rgba(245, 49, 120, .14);
}

.course-application-page .application-choice > div {
  gap: 8px;
}

.course-application-page .application-choice i {
  min-height: 52px;
  border-color: #cfd4d8;
  border-radius: 6px;
  background: var(--motion-paper);
  color: var(--motion-ink);
}

.course-application-page .application-choice input:checked + i {
  border-color: var(--motion-ink);
  background: var(--motion-mint);
  color: var(--motion-ink);
}

.course-application-page .application-choice input:focus-visible + i {
  outline-color: var(--motion-pink);
}

.course-application-page .application-consent {
  border-color: var(--motion-line);
}

.course-application-page .application-consent input {
  accent-color: var(--motion-pink);
}

.course-application-page .application-consent b {
  color: var(--motion-ink);
}

.course-application-page .application-consent small,
.course-application-page .application-submit > p:first-child {
  color: var(--motion-muted);
}

.course-application-page .application-consent small a {
  color: #0b7569;
}

.course-application-page .application-submit button {
  min-height: 58px;
  border: 2px solid var(--motion-ink);
  border-radius: 6px;
  background: var(--motion-pink);
  color: var(--motion-white);
}

.course-application-page .application-submit button:hover {
  border-color: var(--motion-ink);
  background: var(--motion-mint);
  color: var(--motion-ink);
}

.course-application-page .application-submit button:focus-visible {
  outline-color: var(--motion-mint);
}

.course-application-page .application-status {
  color: var(--motion-pink);
}

.course-application-page .application-status.is-error {
  color: #c20f52;
}

.course-application-page .application-status.is-preview-valid {
  color: #08766a;
}

.course-application-page .application-status:not(:empty):not(.is-error):not(.is-preview-valid) {
  font-size: 0;
}

.course-application-page .application-status:not(:empty):not(.is-error):not(.is-preview-valid)::after {
  content: "접수 내용을 전송하고 있습니다.";
  font-size: 15px;
}

@media (max-width: 1100px) {
  .course-preview-page .course-header,
  .course-application-page .course-header,
  .course-application-page .course-header--dark {
    padding-right: 28px;
    padding-left: 28px;
  }

  .course-preview-page .course-hero {
    min-height: 880px;
    grid-template-columns: minmax(350px, .82fr) minmax(390px, 1.18fr);
    gap: 24px 24px;
    padding: 106px 36px 36px;
  }

  .course-preview-page .course-hero-field {
    right: -70px;
    width: 53vw;
    height: 670px;
  }

  .course-preview-page .course-hero h1 {
    font-size: 58px;
  }

  .course-preview-page .course-hero-hook {
    font-size: 31px;
  }

  .course-preview-page .course-phone-scene {
    grid-template-columns: 136px 156px 136px;
    gap: 8px;
    width: 444px;
    min-height: 500px;
  }

  .course-preview-page .course-phone {
    width: 136px;
  }

  .course-preview-page .course-phone--shoot {
    width: 156px;
  }

  .course-preview-page .course-phone-screen > div strong {
    font-size: 16px;
  }

  .course-preview-page .course-phone--shoot .course-phone-screen > div strong {
    font-size: 18px;
  }

  .course-preview-page .course-concerns,
  .course-preview-page .course-takeaways {
    gap: 44px;
    padding-right: 36px;
    padding-left: 36px;
  }

  .course-preview-page .course-concerns h2,
  .course-preview-page .course-takeaways h2 {
    font-size: 40px;
  }

  .course-preview-page .course-flow,
  .course-preview-page .course-flow[data-course-lesson="setup"],
  .course-preview-page .course-flow[data-course-lesson="ai"],
  .course-preview-page .course-flow[data-course-lesson="shoot"],
  .course-preview-page .course-flow[data-course-lesson="edit"],
  .course-preview-page .course-flow[data-course-lesson="upload"] {
    padding-right: 36px;
    padding-left: 36px;
  }

  .course-preview-page .course-flow h2,
  .course-preview-page .course-decision h2 {
    font-size: 52px;
  }

  .course-preview-page .course-flow-stage {
    grid-template-columns: minmax(0, 1fr) 276px;
    gap: 40px;
  }

  .course-preview-page .course-flow-list li {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .course-preview-page .course-flow-list h3,
  .course-preview-page .course-flow-list li[aria-current="step"] h3 {
    font-size: 31px;
  }

  .course-preview-page .course-lesson-phone,
  .course-preview-page .course-lesson-progress {
    width: 260px;
  }

  .course-preview-page .course-decision {
    gap: 34px 42px;
    padding-right: 36px;
    padding-left: 36px;
  }
}

@media (max-width: 820px) {
  .course-preview-page .course-hero {
    min-height: 930px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 12px;
    padding: 104px 28px 30px;
  }

  .course-preview-page .course-hero-field {
    right: -20px;
    top: 448px;
    width: 82vw;
    height: 405px;
  }

  .course-preview-page .course-hero-copy {
    width: 100%;
    max-width: 700px;
  }

  .course-preview-page .course-hero h1 {
    font-size: 54px;
  }

  .course-preview-page .course-hero-hook {
    max-width: 590px;
    font-size: 30px;
  }

  .course-preview-page .course-hero-copy > .course-hero-support {
    max-width: 680px;
    margin-top: 18px;
  }

  .course-preview-page .course-hero-actions {
    margin-top: 22px;
  }

  .course-preview-page .course-hero-facts {
    margin-top: 24px;
  }

  .course-preview-page .course-phone-scene {
    justify-self: end;
    grid-template-columns: 126px 144px 126px;
    width: 416px;
    min-height: 390px;
    padding-top: 8px;
  }

  .course-preview-page .course-phone {
    width: 126px;
  }

  .course-preview-page .course-phone--shoot {
    width: 144px;
  }

  .course-preview-page .course-phone--plan,
  .course-preview-page .course-phone--upload {
    transform: translateY(10px);
  }

  .course-preview-page .course-phone--shoot {
    transform: translateY(-4px);
  }

  .course-preview-page .course-hero-note {
    align-self: end;
  }

  .course-preview-page .course-concerns,
  .course-preview-page .course-takeaways {
    grid-template-columns: 1fr;
  }

  .course-preview-page .course-concerns header,
  .course-preview-page .course-takeaways header {
    max-width: 680px;
  }

  .course-preview-page .course-flow-intro {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "title" "copy";
    gap: 16px;
  }

  .course-preview-page .course-flow-stage {
    grid-template-columns: minmax(0, 1fr) 236px;
    gap: 28px;
  }

  .course-preview-page .course-flow-list li {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 192px;
  }

  .course-preview-page .course-flow-list h3,
  .course-preview-page .course-flow-list li[aria-current="step"] h3 {
    font-size: 28px;
  }

  .course-preview-page .course-lesson-phone,
  .course-preview-page .course-lesson-progress {
    width: 220px;
  }

  .course-preview-page .course-takeaways ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-preview-page .course-takeaways li {
    min-height: 204px;
  }

  .course-preview-page .course-decision {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .course-preview-page .course-calendar {
    width: min(100%, 560px);
    justify-self: start;
  }

  .course-application-page .application-main {
    padding-right: 28px;
    padding-left: 28px;
  }

  .course-application-page .application-form {
    padding: 34px 28px;
  }
}

@media (max-width: 700px) {
  .course-preview-page,
  .course-application-page {
    font-size: 16px;
  }

  .course-preview-page .course-header,
  .course-application-page .course-header,
  .course-application-page .course-header--dark {
    height: 64px;
    padding: 0 18px;
  }

  .course-preview-page .course-brand,
  .course-application-page .course-brand {
    font-size: 18px;
  }

  .course-preview-page .course-header nav,
  .course-application-page .course-header nav {
    gap: 12px;
  }

  .course-preview-page .course-header nav a,
  .course-application-page .course-header nav a {
    font-size: 12px;
  }

  .course-preview-page .course-hero {
    min-height: 760px;
    gap: 8px;
    padding: 84px 18px 24px;
  }

  .course-preview-page .course-hero::before {
    height: 9px;
  }

  .course-preview-page .course-hero-field {
    right: -30px;
    top: 433px;
    width: 92vw;
    height: 262px;
  }

  .course-preview-page .course-eyebrow {
    font-size: 11px;
  }

  .course-preview-page .course-hero h1 {
    margin-top: 12px;
    font-size: 43px;
  }

  .course-preview-page .course-hero-hook {
    margin-top: 12px;
    font-size: 26px;
    line-height: 1.18;
  }

  .course-preview-page .course-hero-copy > .course-hero-support {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.52;
  }

  .course-preview-page .course-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 16px;
  }

  .course-preview-page .course-hero-actions a {
    min-width: 0;
    min-height: 50px;
    padding: 11px 12px;
    font-size: 13px;
  }

  .course-preview-page .course-hero-facts {
    margin-top: 15px;
  }

  .course-preview-page .course-hero-facts div {
    padding-top: 10px;
    padding-right: 6px;
  }

  .course-preview-page .course-hero-facts div + div {
    padding-left: 8px;
  }

  .course-preview-page .course-hero-facts dt {
    font-size: 10px;
  }

  .course-preview-page .course-hero-facts dd {
    margin-top: 4px;
    font-size: 11px;
  }

  .course-preview-page .course-phone-scene {
    justify-self: center;
    grid-template-columns: 94px 108px 94px;
    gap: 5px;
    width: 306px;
    min-height: 250px;
    padding: 4px 0 9px;
  }

  .course-preview-page .course-phone {
    gap: 7px;
    width: 94px;
  }

  .course-preview-page .course-phone--shoot {
    width: 108px;
  }

  .course-preview-page .course-phone-frame {
    padding: 4px;
    border-radius: 23px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 12px 24px rgba(23, 25, 27, .2);
  }

  .course-preview-page .course-phone-screen {
    border-radius: 19px;
  }

  .course-preview-page .course-phone-island {
    top: 9px;
    height: 10px;
  }

  .course-preview-page .course-phone-screen > small {
    top: 25px;
    right: 5px;
    padding: 3px 4px;
    font-size: 8px;
  }

  .course-preview-page .course-phone-screen > div {
    left: 7px;
    right: 7px;
    bottom: 9px;
    gap: 2px;
  }

  .course-preview-page .course-phone-screen > div b {
    font-size: 8px;
  }

  .course-preview-page .course-phone-screen > div strong,
  .course-preview-page .course-phone--shoot .course-phone-screen > div strong {
    font-size: 12px;
  }

  .course-preview-page .course-phone-screen > div i {
    height: 2px;
  }

  .course-preview-page .course-phone figcaption {
    font-size: 9px;
  }

  .course-preview-page .course-hero-note {
    padding-top: 10px;
    font-size: 11px;
    line-height: 1.4;
  }

  .course-preview-page .course-concerns,
  .course-preview-page .course-takeaways {
    gap: 32px;
    padding: 68px 18px;
  }

  .course-preview-page .course-concerns h2,
  .course-preview-page .course-takeaways h2 {
    margin-top: 12px;
    font-size: 34px;
  }

  .course-preview-page .course-concern-list article {
    grid-template-columns: 30px 1fr;
    gap: 5px 12px;
    min-height: 0;
    padding: 20px 0;
  }

  .course-preview-page .course-concern-list article > span {
    grid-row: 1 / 3;
    align-self: start;
  }

  .course-preview-page .course-concern-list h3 {
    font-size: 18px;
  }

  .course-preview-page .course-concern-list p {
    font-size: 14px;
  }

  .course-preview-page .course-flow,
  .course-preview-page .course-flow[data-course-lesson="setup"],
  .course-preview-page .course-flow[data-course-lesson="ai"],
  .course-preview-page .course-flow[data-course-lesson="shoot"],
  .course-preview-page .course-flow[data-course-lesson="edit"],
  .course-preview-page .course-flow[data-course-lesson="upload"] {
    padding: 72px 18px 78px;
  }

  .course-preview-page .course-flow-intro {
    margin-bottom: 30px;
  }

  .course-preview-page .course-flow h2 {
    font-size: 38px;
  }

  .course-preview-page .course-flow-intro > p {
    font-size: 14px;
  }

  .course-preview-page .course-flow-stage {
    grid-template-columns: 1fr;
    grid-template-areas: "device" "list";
    gap: 24px;
  }

  .course-preview-page .course-lesson-device {
    top: 66px;
    gap: 9px;
    padding: 7px 0 11px;
    background: rgba(255, 255, 255, .96);
  }

  .course-preview-page .course-lesson-phone,
  .course-preview-page .course-lesson-progress {
    width: 148px;
  }

  .course-preview-page .course-lesson-phone {
    padding: 5px;
    border-radius: 29px;
  }

  .course-preview-page .course-lesson-screen {
    border-radius: 23px;
  }

  .course-preview-page .course-lesson-island {
    top: 11px;
    height: 13px;
  }

  .course-preview-page .course-lesson-screen section > small {
    top: 34px;
    font-size: 8px;
  }

  .course-preview-page .course-lesson-screen section > div:not(.course-lesson-ai > div) {
    left: 9px;
    right: 9px;
    bottom: 11px;
  }

  .course-preview-page .course-lesson-screen section > div > strong {
    font-size: 16px;
  }

  .course-preview-page .course-lesson-screen section > div > p {
    font-size: 10px;
  }

  .course-preview-page .course-lesson-ai > div {
    gap: 7px;
    padding: 42px 8px 10px;
  }

  .course-preview-page .course-lesson-ai strong {
    font-size: 17px;
  }

  .course-preview-page .course-lesson-ai li {
    grid-template-columns: 21px 1fr;
    padding: 6px;
  }

  .course-preview-page .course-lesson-ai li b {
    width: 21px;
    height: 21px;
    font-size: 9px;
  }

  .course-preview-page .course-lesson-ai li i {
    font-size: 10px;
  }

  .course-preview-page .course-flow-list li {
    grid-template-columns: 1fr;
    min-height: 188px;
    padding: 26px 0 30px 14px;
  }

  .course-preview-page .course-flow-list li[aria-current="step"] {
    padding-block: 32px 36px;
  }

  .course-preview-page .course-flow-list li > div {
    grid-template-columns: 30px 1fr;
    gap: 9px;
  }

  .course-preview-page .course-flow-list h3,
  .course-preview-page .course-flow-list li[aria-current="step"] h3 {
    font-size: 28px;
  }

  .course-preview-page .course-flow-list p {
    margin-top: 10px;
    font-size: 14px;
  }

  .course-preview-page .course-takeaways ol {
    grid-template-columns: 1fr;
  }

  .course-preview-page .course-takeaways li {
    min-height: 0;
    padding: 20px 0;
  }

  .course-preview-page .course-takeaways li + li {
    padding-left: 0;
    border-left: 0;
  }

  .course-preview-page .course-takeaways li strong {
    margin-top: 18px;
    font-size: 20px;
  }

  .course-preview-page .course-decision {
    gap: 30px;
    padding: 74px 18px 30px;
  }

  .course-preview-page .course-decision h2 {
    font-size: 38px;
  }

  .course-preview-page .course-price strong {
    font-size: 31px;
  }

  .course-preview-page .course-calendar {
    padding: 18px 13px 16px;
    box-shadow: 7px 7px 0 var(--motion-mint);
  }

  .course-preview-page .course-calendar header button {
    border-radius: 5px;
  }

  .course-preview-page .course-calendar-days .is-event {
    border-radius: 5px;
  }

  .course-preview-page .course-decision-action > a {
    min-height: 54px;
  }

  .course-preview-page .course-footer,
  .course-application-page .course-footer {
    padding: 28px 18px;
  }

  .course-application-page .application-main {
    padding: 92px 18px 72px;
  }

  .course-application-page .application-intro h1 {
    margin-top: 14px;
    font-size: 40px;
  }

  .course-application-page .application-intro > p {
    margin-top: 18px;
    font-size: 14px;
  }

  .course-application-page .application-course-lock {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 36px;
    padding: 18px;
  }

  .course-application-page .application-course-lock strong {
    font-size: 18px;
  }

  .course-application-page .application-form {
    margin-top: 20px;
    padding: 26px 16px;
  }

  .course-application-page .application-fields {
    grid-template-columns: 1fr;
    gap: 27px;
  }

  .course-application-page .application-fields legend {
    font-size: 30px;
  }

  .course-application-page .application-wide {
    grid-column: auto;
  }

  .course-application-page .application-fields input:not([type="radio"]),
  .course-application-page .application-fields select,
  .course-application-page .application-fields textarea {
    font-size: 16px;
  }

  .course-application-page .application-choice i {
    min-height: 50px;
  }

  .course-application-page .application-consent {
    margin-top: 38px;
    padding: 22px 0;
  }

  .course-application-page .application-submit {
    grid-template-columns: 1fr;
    grid-template-areas: "notice" "button" "status";
  }
}

@media (max-width: 390px) and (max-height: 740px) {
  .course-preview-page .course-hero {
    min-height: 680px;
    padding-top: 74px;
  }

  .course-preview-page .course-hero h1 {
    font-size: 37px;
  }

  .course-preview-page .course-hero-hook {
    font-size: 22px;
  }

  .course-preview-page .course-hero-copy > .course-hero-support {
    font-size: 13px;
  }

  .course-preview-page .course-phone-scene {
    grid-template-columns: 78px 90px 78px;
    width: 258px;
    min-height: 210px;
  }

  .course-preview-page .course-phone {
    width: 78px;
  }

  .course-preview-page .course-phone--shoot {
    width: 90px;
  }

  .course-preview-page .course-phone-screen > small,
  .course-preview-page .course-phone figcaption {
    font-size: 7px;
  }

  .course-preview-page .course-phone-screen > div strong,
  .course-preview-page .course-phone--shoot .course-phone-screen > div strong {
    font-size: 10px;
  }

  .course-preview-page .course-hero-note {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-preview-page *,
  .course-preview-page *::before,
  .course-preview-page *::after,
  .course-application-page *,
  .course-application-page *::before,
  .course-application-page *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Motion v2: one viewport scene, five scroll-controlled lessons, natural release. */
.course-preview-page .course-flow[data-scroll-story] {
  min-height: 340svh;
  padding: 0 !important;
  position: relative;
  display: block;
}

.course-preview-page .course-flow-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: center;
  padding: 68px 64px 34px;
  overflow: hidden;
  background: var(--motion-white);
}

.course-preview-page .course-flow-intro {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto 24px;
}

.course-preview-page .course-flow-intro h2 {
  font-size: clamp(42px, 4vw, 58px);
}

.course-preview-page .course-flow-stage {
  --course-track-width: 100%;
  width: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 310px;
  grid-template-areas: "list device";
  gap: clamp(42px, 6vw, 72px);
  align-items: center;
}

.course-preview-page .course-flow-list {
  height: auto;
  display: grid;
  grid-template-rows: none;
  align-content: start;
}

.course-preview-page .course-flow-list li,
.course-preview-page .course-flow-list li[aria-current="step"] {
  min-height: 68px;
  padding: 10px 12px 10px 18px;
  align-items: start;
  cursor: pointer;
  transition: opacity .28s ease, background .28s ease, transform .28s ease;
}

.course-preview-page .course-flow-list li:hover {
  opacity: .78;
}

.course-preview-page .course-flow-list li:focus-visible {
  z-index: 2;
  outline: 3px solid var(--lesson-accent);
  outline-offset: -3px;
}

.course-preview-page .course-flow-list li[aria-current="step"] {
  transform: translateX(7px);
}

.course-preview-page .course-flow-list li::before {
  top: 10px;
  bottom: 10px;
}

.course-preview-page .course-flow-list time {
  padding-top: 0;
  font-size: 12px;
}

.course-preview-page .course-flow-list li > div {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: baseline;
}

.course-preview-page .course-flow-list h3,
.course-preview-page .course-flow-list li[aria-current="step"] h3 {
  font-size: clamp(22px, 2.1vw, 31px);
}

.course-preview-page .course-flow-list p {
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 13px;
  transition: max-height .32s ease, margin .32s ease, opacity .32s ease;
}

.course-preview-page .course-flow-list li[aria-current="step"] p {
  max-height: none;
  margin-top: 7px;
  opacity: 1;
  overflow: visible;
}

.course-preview-page .course-lesson-device {
  position: relative;
  top: auto;
  align-self: center;
  gap: 10px;
}

.course-preview-page .course-lesson-phone {
  width: min(100%, 268px);
}

.course-preview-page .course-lesson-screen > section[aria-hidden="false"] img {
  transform: scale(1.075) translateY(calc((var(--story-local) - .5) * -8px));
  transition: transform .16s linear;
}

.course-preview-page .course-lesson-screen > section[aria-hidden="false"] > div {
  animation: courseSceneIn .42s cubic-bezier(.2,.75,.2,1) both;
}

.course-preview-page .course-flow[data-story-index="1"] .course-lesson-ai li {
  animation: courseRowIn .42s both;
}

.course-preview-page .course-flow[data-story-index="1"] .course-lesson-ai li:nth-child(2) { animation-delay: .08s; }
.course-preview-page .course-flow[data-story-index="1"] .course-lesson-ai li:nth-child(3) { animation-delay: .16s; }

.course-preview-page .course-flow[data-story-index="2"] .course-focus-frame {
  animation: courseFocus 1.8s ease-in-out infinite;
}

.course-preview-page .course-flow[data-story-index="3"] .course-edit-rail em {
  animation: courseEditRail 2.1s ease-in-out infinite;
}

.course-preview-page .course-flow[data-story-index="4"] .course-upload-pulse {
  animation: courseUpload 1.7s ease-in-out infinite;
}

.course-preview-page .course-lesson-progress i {
  transform: scaleX(var(--story-progress));
  transition: transform .08s linear;
}

.course-preview-page .course-screen-note {
  color: var(--motion-muted);
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
}

.course-preview-page .course-story-nav {
  display: none;
  grid-area: nav;
}

@keyframes courseSceneIn {
  from { opacity: .35; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes courseRowIn {
  from { opacity: .15; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes courseFocus {
  0%, 100% { transform: translate(-50%, -50%) scale(.82); opacity: .55; }
  45% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes courseEditRail {
  0%, 100% { transform: scaleX(.16); }
  68% { transform: scaleX(.92); }
}

@keyframes courseUpload {
  0%, 100% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(216,251,104,.3); }
  55% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(216,251,104,0); }
}

@media (max-width: 900px) {
  .course-preview-page .course-flow-sticky {
    padding-inline: 6vw;
  }

  .course-preview-page .course-flow-stage {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 30px;
  }

  .course-preview-page .course-flow-list li,
  .course-preview-page .course-flow-list li[aria-current="step"] {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .course-preview-page .course-lesson-phone {
    width: min(100%, 220px);
  }
}

@media (max-width: 700px) {
  .course-preview-page .course-flow[data-scroll-story] {
    min-height: 390svh;
  }

  .course-preview-page .course-flow-sticky {
    min-height: 0;
    padding: 66px 16px 12px;
    align-content: start;
  }

  .course-preview-page .course-flow-intro {
    margin-bottom: 10px;
  }

  .course-preview-page .course-flow-intro > span,
  .course-preview-page .course-flow-intro > p {
    display: none;
  }

  .course-preview-page .course-flow h2 {
    font-size: 29px;
    line-height: 1.08;
  }

  .course-preview-page .course-flow-stage {
    grid-template-columns: 1fr;
    grid-template-areas: "list" "nav" "device";
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    width: var(--course-track-width);
  }

  .course-preview-page .course-flow-list {
    width: var(--course-track-width);
    height: auto;
    display: block;
    border-top-width: 1px;
  }

  .course-preview-page .course-flow-list li,
  .course-preview-page .course-flow-list li[aria-current="step"] {
    display: none;
    width: 100%;
    min-height: 0;
    grid-template-columns: 78px minmax(0, 1fr);
    padding: 13px 12px 13px 13px;
    transform: none;
  }

  .course-preview-page .course-flow-list li[aria-current="step"],
  .course-preview-page .course-flow-list li[aria-current="step"] + li {
    display: grid;
  }

  .course-preview-page .course-flow-list li[aria-current="step"] {
    min-height: 116px;
  }

  .course-preview-page .course-flow-list li[aria-current="step"] + li {
    min-height: 54px;
    padding-block: 10px;
    opacity: .36;
  }

  .course-preview-page .course-flow-list li[aria-current="step"] + li p {
    display: none;
  }

  .course-preview-page .course-flow-list li > div {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
  }

  .course-preview-page .course-flow-list time {
    align-self: start;
    padding-top: 3px;
    font-size: 11px;
    line-height: 1.3;
  }

  .course-preview-page .course-flow-list h3,
  .course-preview-page .course-flow-list li[aria-current="step"] h3 {
    font-size: 21px;
  }

  .course-preview-page .course-flow-list p,
  .course-preview-page .course-flow-list li[aria-current="step"] p {
    max-height: none;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.38;
    overflow: visible;
  }

  .course-preview-page .course-lesson-device {
    align-self: start;
    justify-self: center;
    gap: 5px;
    padding: 0;
    background: transparent;
  }

  .course-preview-page .course-lesson-phone {
    width: clamp(166px, calc((100svh - 350px) * .58), 210px);
  }

  .course-preview-page .course-lesson-progress {
    width: 100%;
  }

  .course-preview-page .course-screen-note {
    font-size: 8px;
  }

  .course-preview-page .course-story-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    width: var(--course-track-width);
    margin: 0;
  }

  .course-preview-page .course-story-nav button {
    min-height: 34px;
    border: 1px solid var(--motion-line);
    border-radius: 5px;
    background: var(--motion-paper);
    color: var(--motion-muted);
    font-size: 10px;
    font-weight: 850;
  }

  .course-preview-page .course-story-nav button[aria-selected="true"] {
    border-color: var(--motion-ink);
    background: var(--motion-lime);
    color: var(--motion-ink);
  }
}

@media (max-width: 390px) and (max-height: 740px) {
  .course-preview-page .course-flow-sticky {
    padding-top: 62px;
  }

  .course-preview-page .course-flow h2 {
    font-size: 26px;
  }

  .course-preview-page .course-flow-list li[aria-current="step"] {
    min-height: 110px;
  }

  .course-preview-page .course-flow-list h3,
  .course-preview-page .course-flow-list li[aria-current="step"] h3 {
    font-size: 19px;
  }

  .course-preview-page .course-lesson-phone {
    width: clamp(150px, calc((100svh - 340px) * .55), 176px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-preview-page .course-flow[data-scroll-story] {
    min-height: auto;
    padding: 72px 18px 78px !important;
  }

  .course-preview-page .course-flow-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  .course-preview-page .course-flow-stage {
    grid-template-areas: "list device";
  }

  .course-preview-page .course-flow-list {
    height: auto;
    display: block;
  }

  .course-preview-page .course-flow-list li,
  .course-preview-page .course-flow-list li[aria-current="step"] {
    display: grid;
    min-height: 118px;
    opacity: 1;
  }

  .course-preview-page .course-story-nav {
    display: none;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .course-preview-page .course-flow-stage {
    grid-template-columns: 1fr;
    grid-template-areas: "device" "list";
  }
}

/* Motion v4 course hero: three cutout phones first, then merge away before copy. */
.course-preview-page .course-hero[data-scroll-story] {
  position: relative;
  display: block;
  min-height: 350svh;
  padding: 0;
  overflow: visible;
  background: var(--motion-white);
}

.course-preview-page .course-hero-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  min-width: 0;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  background: var(--motion-white);
}

.course-preview-page .course-hero-sticky::before {
  content: "";
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: linear-gradient(90deg, var(--motion-pink) 0 37%, var(--motion-mint) 37% 72%, var(--motion-lime) 72% 100%);
}

.course-preview-page .course-hero::before {
  display: none;
}

.course-preview-page .course-hero-field {
  display: none;
}

.course-preview-page .course-hero-copy,
.course-preview-page .course-phone-scene,
.course-preview-page .course-hero-note {
  position: absolute;
  z-index: 2;
  transition: opacity .44s ease, transform .62s cubic-bezier(.2,.75,.2,1), visibility .44s;
}

.course-preview-page .course-hero-copy {
  left: 50%;
  top: 47%;
  width: min(760px, calc(100% - 48px));
  max-width: none;
  text-align: center;
  transform: translate(-50%, -50%) translateY(22px);
  opacity: 0;
  visibility: hidden;
}

.course-preview-page .course-hero[data-course-hero-stage="copy"] .course-hero-copy,
.course-preview-page .course-hero[data-course-hero-stage="final"] .course-hero-copy {
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
}

.course-preview-page .course-hero h1 {
  font-size: 72px;
}

.course-preview-page .course-hero-hook,
.course-preview-page .course-hero-copy > .course-hero-support,
.course-preview-page .course-hero-facts {
  margin-inline: auto;
}

.course-preview-page .course-hero-actions {
  justify-content: center;
}

.course-preview-page .course-action-free{min-width:174px;background:transparent;color:var(--motion-ink);border-color:#c7cfcc}.course-preview-page .course-preview-actions{display:flex;align-items:center;gap:12px}.course-preview-page .course-preview-actions .course-action-free{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:12px 16px;border:1px solid #c7cfcc;font-size:12px;font-weight:700;text-decoration:none}
@media(max-width:700px){.course-preview-page .course-hero-actions .course-action-free{grid-column:1/-1;min-height:42px}.course-preview-page .course-preview-actions{display:grid}.course-preview-page .course-preview-actions .course-action-free{width:100%;min-width:0}}

.course-preview-page .course-hero[data-course-hero-stage="copy"] .course-hero-facts {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.course-preview-page .course-phone-scene {
  left: 50%;
  top: 50%;
  display: block;
  width: min(920px, 96vw);
  min-height: 610px;
  padding: 0;
  transform: translate(-50%, -47%);
  opacity: 0;
  visibility: hidden;
}

.course-preview-page .course-phone-scene::after {
  display: none;
}

.course-preview-page .course-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 236px;
  gap: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -45%) translateY(24px) scale(.94);
  transition: opacity .42s ease, transform .62s cubic-bezier(.2,.75,.2,1), visibility .42s;
}

.course-preview-page .course-phone--plan,
.course-preview-page .course-phone--shoot,
.course-preview-page .course-phone--upload {
  width: 236px;
}

.course-preview-page .course-hero[data-course-hero-stage="phones"] .course-phone-scene,
.course-preview-page .course-hero[data-course-hero-stage="focus"] .course-phone-scene,
.course-preview-page .course-hero[data-course-hero-stage="merge"] .course-phone-scene {
  opacity: 1;
  visibility: visible;
}

.course-preview-page .course-hero[data-course-hero-stage="phones"] .course-phone--plan{opacity:.78;visibility:visible;transform:translateX(calc(-50% - 245px)) translateY(calc(-50% + 18px)) rotate(-8deg) scale(.92)}
.course-preview-page .course-hero[data-course-hero-stage="phones"] .course-phone--shoot{z-index:3;opacity:1;visibility:visible;transform:translateX(-50%) translateY(calc(-50% - 12px)) scale(1.04)}
.course-preview-page .course-hero[data-course-hero-stage="phones"] .course-phone--upload{opacity:.78;visibility:visible;transform:translateX(calc(-50% + 245px)) translateY(calc(-50% + 18px)) rotate(8deg) scale(.92)}
.course-preview-page .course-hero[data-course-hero-stage="focus"] .course-phone--plan{opacity:.68;visibility:visible;transform:translateX(calc(-50% - 265px)) translateY(calc(-50% + 24px)) rotate(-9deg) scale(.9)}
.course-preview-page .course-hero[data-course-hero-stage="focus"] .course-phone--shoot{z-index:3;opacity:1;visibility:visible;transform:translateX(-50%) translateY(calc(-50% - 18px)) scale(1.08)}
.course-preview-page .course-hero[data-course-hero-stage="focus"] .course-phone--upload{opacity:.68;visibility:visible;transform:translateX(calc(-50% + 265px)) translateY(calc(-50% + 24px)) rotate(9deg) scale(.9)}
.course-preview-page .course-hero[data-course-hero-stage="merge"] .course-phone--plan{opacity:var(--course-side-opacity,.78);visibility:visible;transform:translateX(calc(-50% + var(--course-plan-x,-245px))) translateY(calc(-50% + var(--course-merge-y,0px))) rotate(var(--course-plan-rotate,-8deg)) scale(var(--course-side-scale,.92))}
.course-preview-page .course-hero[data-course-hero-stage="merge"] .course-phone--shoot{z-index:3;opacity:var(--course-front-opacity,1);visibility:visible;transform:translateX(-50%) translateY(calc(-50% + var(--course-merge-y,0px))) scale(var(--course-front-scale,1.04))}
.course-preview-page .course-hero[data-course-hero-stage="merge"] .course-phone--upload{opacity:var(--course-side-opacity,.78);visibility:visible;transform:translateX(calc(-50% + var(--course-upload-x,245px))) translateY(calc(-50% + var(--course-merge-y,0px))) rotate(var(--course-upload-rotate,8deg)) scale(var(--course-side-scale,.92))}

.course-preview-page .course-phone figcaption,
.course-preview-page .course-phone--shoot figcaption {
  color: var(--motion-ink);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
}

.course-preview-page .course-phone[aria-current="step"] .course-phone-screen > div i::after {
  animation: courseHeroLine 2.2s ease-in-out infinite;
}

.course-preview-page .course-hero-note {
  left: 50%;
  bottom: 67px;
  width: min(900px, calc(100% - 48px));
  padding-top: 12px;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  visibility: hidden;
  text-align: center;
}

.course-preview-page .course-hero[data-course-hero-stage="final"] .course-hero-note {
  transform: translateX(-50%);
  opacity: 1;
  visibility: visible;
}

.course-preview-page .course-hero-nav {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 21px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  width: min(360px, calc(100% - 32px));
  transform: translateX(-50%);
}

.course-preview-page .course-hero-nav button {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--motion-line);
  border-radius: 5px;
  background: var(--motion-white);
  color: var(--motion-muted);
  font-size: 10px;
  font-weight: 850;
}

.course-preview-page .course-hero-nav button[aria-selected="true"] {
  border-color: var(--motion-ink);
  background: var(--motion-ink);
  color: var(--motion-white);
}

@keyframes courseHeroLine {
  0%, 100% { width: 18%; }
  65% { width: 88%; }
}

@media (min-width: 701px) and (max-width: 900px) {
  .course-preview-page .course-phone--plan,
  .course-preview-page .course-phone--shoot,
  .course-preview-page .course-phone--upload {
    width: 220px;
  }

  .course-preview-page .course-hero[data-course-hero-stage="phones"] .course-phone--plan {
    transform: translateX(calc(-50% - 232px)) translateY(calc(-50% + 18px)) rotate(-8deg) scale(.92);
  }

  .course-preview-page .course-hero[data-course-hero-stage="phones"] .course-phone--upload {
    transform: translateX(calc(-50% + 232px)) translateY(calc(-50% + 18px)) rotate(8deg) scale(.92);
  }

  .course-preview-page .course-hero[data-course-hero-stage="focus"] .course-phone--plan {
    transform: translateX(calc(-50% - 244px)) translateY(calc(-50% + 24px)) rotate(-9deg) scale(.9);
  }

  .course-preview-page .course-hero[data-course-hero-stage="focus"] .course-phone--upload {
    transform: translateX(calc(-50% + 244px)) translateY(calc(-50% + 24px)) rotate(9deg) scale(.9);
  }
}

@media (max-width: 700px) {
  .course-preview-page .course-hero[data-scroll-story] {
    min-height: 340svh;
  }

  .course-preview-page .course-hero-sticky {
    min-height: 0;
  }

  .course-preview-page .course-hero-copy {
    top: 45%;
    width: calc(100% - 36px);
  }

  .course-preview-page .course-hero h1 {
    margin-top: 12px;
    font-size: 46px;
  }

  .course-preview-page .course-hero-hook {
    margin-top: 14px;
    font-size: 27px;
    line-height: 1.16;
  }

  .course-preview-page .course-hero-copy > .course-hero-support {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.55;
  }

  .course-preview-page .course-hero[data-course-hero-stage="final"] .course-hero-copy > .course-hero-support {
    display: none;
  }

  .course-preview-page .course-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 18px;
  }

  .course-preview-page .course-hero-actions a,
  .course-preview-page .course-action-primary,
  .course-preview-page .course-action-secondary {
    min-width: 0;
    min-height: 44px;
    padding: 10px 11px;
    gap: 8px;
    font-size: 12px;
  }

  .course-preview-page .course-hero-facts {
    margin-top: 18px;
  }

  .course-preview-page .course-hero-facts div {
    padding-top: 10px;
  }

  .course-preview-page .course-hero-facts dt {
    font-size: 9px;
  }

  .course-preview-page .course-hero-facts dd {
    font-size: 11px;
    line-height: 1.35;
  }

  .course-preview-page .course-hero-field {
    width: calc(100% - 34px);
    height: min(520px, 72svh);
  }

  .course-preview-page .course-phone-scene {
    width: 100%;
    min-height: 500px;
  }

  .course-preview-page .course-phone,
  .course-preview-page .course-phone--plan,
  .course-preview-page .course-phone--shoot,
  .course-preview-page .course-phone--upload {
    width: min(214px, calc((100svh - 170px) * .46));
    min-width: 176px;
  }

  .course-preview-page .course-hero[data-course-hero-stage="phones"] .course-phone--plan,
  .course-preview-page .course-hero[data-course-hero-stage="focus"] .course-phone--plan {
    opacity: .58;
    transform: translateX(calc(-50% - 80px)) translateY(calc(-50% + 18px)) rotate(-7deg) scale(.84);
  }

  .course-preview-page .course-hero[data-course-hero-stage="phones"] .course-phone--shoot,
  .course-preview-page .course-hero[data-course-hero-stage="focus"] .course-phone--shoot {
    opacity: 1;
    transform: translateX(-50%) translateY(calc(-50% - 6px)) scale(1.02);
  }

  .course-preview-page .course-hero[data-course-hero-stage="phones"] .course-phone--upload,
  .course-preview-page .course-hero[data-course-hero-stage="focus"] .course-phone--upload {
    opacity: .58;
    transform: translateX(calc(-50% + 80px)) translateY(calc(-50% + 18px)) rotate(7deg) scale(.84);
  }

  .course-preview-page .course-phone figcaption,
  .course-preview-page .course-phone--shoot figcaption {
    font-size: 14px;
  }

  .course-preview-page .course-hero-note {
    bottom: 61px;
    width: calc(100% - 36px);
    font-size: 10px;
    line-height: 1.45;
  }

  .course-preview-page .course-hero-nav {
    bottom: 17px;
    width: calc(100% - 28px);
  }

  .course-preview-page .course-hero-nav button {
    min-height: 31px;
    padding-inline: 3px;
    font-size: 9px;
  }
}

@media (max-width: 390px) and (max-height: 740px) {
  .course-preview-page .course-hero-copy {
    top: 43%;
  }

  .course-preview-page .course-hero h1 {
    font-size: 40px;
  }

  .course-preview-page .course-hero-hook {
    font-size: 23px;
  }

  .course-preview-page .course-hero-copy > .course-hero-support {
    font-size: 12px;
  }

  .course-preview-page .course-phone,
  .course-preview-page .course-phone--plan,
  .course-preview-page .course-phone--shoot,
  .course-preview-page .course-phone--upload {
    width: min(186px, calc((100svh - 155px) * .44));
    min-width: 166px;
  }

  .course-preview-page .course-hero-note {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-preview-page .course-hero[data-scroll-story] {
    min-height: auto;
  }

  .course-preview-page .course-hero-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
    align-items: center;
    padding: 92px 5% 74px;
    overflow: visible;
  }

  .course-preview-page .course-hero-field,
  .course-preview-page .course-hero-nav {
    display: none;
  }

  .course-preview-page .course-hero[data-course-hero-stage] .course-hero-copy,
  .course-preview-page .course-hero[data-course-hero-stage] .course-phone-scene,
  .course-preview-page .course-hero[data-course-hero-stage] .course-hero-note {
    position: relative;
    inset: auto;
    width: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .course-preview-page .course-hero-copy {
    grid-row: 2;
    width: min(760px, 100%);
    justify-self: center;
    text-align: center;
  }

  .course-preview-page .course-hero[data-course-hero-stage] .course-hero-actions,
  .course-preview-page .course-hero[data-course-hero-stage] .course-hero-facts {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .course-preview-page .course-hero-actions {
    justify-content: center;
  }

  .course-preview-page .course-phone-scene {
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: min(900px, 100%);
    min-height: 0;
    justify-self: center;
  }

  .course-preview-page .course-phone,
  .course-preview-page .course-phone--plan,
  .course-preview-page .course-phone--shoot,
  .course-preview-page .course-phone--upload {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .course-preview-page .course-hero-note {
    grid-column: 1 / -1;
    text-align: center;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .course-preview-page .course-hero-sticky {
    grid-template-columns: 1fr;
    padding: 64px 20px 58px;
  }

  .course-preview-page .course-hero-copy {
    width: 100%;
  }

  .course-preview-page .course-hero[data-course-hero-stage] .course-phone-scene {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    justify-self: center;
  }

  .course-preview-page .course-hero[data-course-hero-stage="final"] .course-hero-copy > .course-hero-support {
    display: block;
  }

  .course-preview-page .course-phone figcaption {
    font-size: 10px;
  }
}