/* ============================================================
   Way2Fresher — course experience
   Discovery, the landing page, and the learning player.

   Loaded only on course screens (see w2f_course_ui_assets()). It is a separate
   sheet so the rest of the site does not pay for a learning product's CSS, and
   so the design system below can be read in one place:

     spacing   4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 88
     width     1,200px container, 760px reading measure
     radius    10 (control), 14 (card), 20 (panel)
     motion    one 160ms ease on hover, nothing that moves on scroll
   ============================================================ */

.w2f-cx-main {
  --cx-line: #e3e9f1;
  --cx-soft: #f6f8fb;
  --cx-ink: #101828;
  --cx-muted: #5c6b7f;
  --cx-blue: var(--c-primary, #0f4c81);
  --cx-blue-ink: #0c3d68;
  --cx-green: var(--c-accent, #10b981);
  --cx-green-ink: #0b7a5a;
  --cx-amber: #b45309;
  --cx-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px rgba(16, 24, 40, .06);
  background: #fff;
  color: var(--c-text, #1f2937);
  font-size: 17px;
  line-height: 1.65;
}
.w2f-cx-main h1, .w2f-cx-main h2, .w2f-cx-main h3 {
  color: var(--cx-ink);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.w2f-cx-main p { margin: 0 0 14px; }
.w2f-cx-main a { text-underline-offset: 3px; }
.w2f-cx-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.w2f-cx-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-head, inherit);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cx-green-ink);
}
.w2f-cx-section-head { max-width: 720px; margin-bottom: 30px; }
.w2f-cx-section-head h2 { font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 10px; }
.w2f-cx-section-head p { color: var(--cx-muted); font-size: 17px; margin: 0; }
.w2f-cx-section-head-row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.w2f-cx-section-head-row > div { max-width: 720px; }
.w2f-cx-main .w2f-section { padding: 72px 0; }
.w2f-cx-main .w2f-section-alt { background: var(--cx-soft); }
.w2f-cx-main .w2f-container { max-width: 1200px; }

/* ---------- Buttons on course screens ---------- */
.w2f-cx-main .w2f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: normal;
  text-align: center;
}
.w2f-cx-main .w2f-btn-lg { min-height: 52px; padding: 14px 24px; font-size: 16px; }
.w2f-cx-main .w2f-btn-sm { min-height: 38px; padding: 8px 14px; font-size: 13.5px; }
.w2f-cx-main .w2f-btn-block { width: 100%; }
.w2f-cx-main .w2f-btn-primary { background: var(--cx-blue); color: #fff; border: 1px solid var(--cx-blue); }
.w2f-cx-main .w2f-btn-primary:hover { background: var(--cx-blue-ink); color: #fff; }
.w2f-cx-main .w2f-btn-ghost { background: #fff; color: var(--cx-blue); border: 1px solid #cbd8e7; }
.w2f-cx-main .w2f-btn-ghost:hover { background: #f3f8fd; border-color: var(--cx-blue); }

/* ============================================================
   ARCHIVE
   ============================================================ */
.w2f-cx-hero {
  padding: 64px 0 56px;
  background:
    radial-gradient(900px 380px at 88% -10%, rgba(16, 185, 129, .14), transparent 65%),
    linear-gradient(180deg, #f3f8fd 0%, #ffffff 100%);
  border-bottom: 1px solid var(--cx-line);
}
.w2f-cx-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
  gap: 48px;
  align-items: center;
}
.w2f-cx-hero-title {
  font-size: clamp(32px, 4.6vw, 54px);
  margin: 0 0 16px;
  max-width: 780px;
}
.w2f-cx-hero-sub {
  font-size: clamp(17px, 1.8vw, 20px);
  color: #475467;
  max-width: 620px;
  margin: 0 0 26px;
}
.w2f-cx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.w2f-cx-trust {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 0; padding: 0; list-style: none;
  color: var(--cx-muted); font-size: 14px; font-weight: 600;
}
.w2f-cx-trust li { display: inline-flex; align-items: center; gap: 7px; }
.w2f-cx-trust li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cx-green); flex: 0 0 auto;
}
.w2f-cx-hero-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.w2f-cx-hero-stats > div {
  background: #fff;
  border: 1px solid var(--cx-line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--cx-shadow);
}
.w2f-cx-hero-stats dt {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cx-muted); margin-bottom: 6px;
}
.w2f-cx-hero-stats dd {
  margin: 0; font-family: var(--font-head, inherit); font-size: 30px; font-weight: 800; color: var(--cx-blue);
}

/* Filters */
.w2f-cx-filters-band {
  padding: 34px 0 38px;
  background: #fff;
  border-bottom: 1px solid var(--cx-line);
  position: relative;
  z-index: 2;
}
.w2f-cx-filters-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.w2f-cx-filters-title { font-size: 22px; margin: 0; }
.w2f-cx-filters-count { margin: 0; color: var(--cx-muted); font-size: 14px; font-weight: 600; }
.w2f-cx-filter-groups { display: grid; gap: 16px; }
.w2f-cx-filter-group {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.w2f-cx-filter-label {
  margin: 9px 0 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--cx-ink);
}
.w2f-cx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.w2f-cx-chip {
  appearance: none;
  border: 1px solid #d5deea;
  background: #fff;
  color: #344054;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.w2f-cx-chip:hover { border-color: var(--cx-blue); color: var(--cx-blue); }
.w2f-cx-chip.is-active { background: var(--cx-blue); border-color: var(--cx-blue); color: #fff; }
.w2f-cx-chip:focus-visible { outline: 3px solid rgba(15, 76, 129, .28); outline-offset: 2px; }
.w2f-cx-filter-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--cx-line);
}
.w2f-cx-search { flex: 1 1 320px; max-width: 480px; }
.w2f-cx-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d5deea;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  background: #fff;
  color: var(--cx-ink);
}
.w2f-cx-search input:focus { outline: 3px solid rgba(15, 76, 129, .2); border-color: var(--cx-blue); }

/* Paths — four doors, four columns above the tablet breakpoint. */
.w2f-cx-path-grid {
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1080px) {
  .w2f-cx-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.w2f-cx-path {
  border-radius: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--cx-line);
  box-shadow: var(--cx-shadow);
  display: flex;
  flex-direction: column;
}
.w2f-cx-path .w2f-path-title { font-size: 20px; margin: 0 0 8px; }
.w2f-cx-path .w2f-path-goal { color: var(--cx-muted); font-size: 14.5px; margin: 0 0 16px; }
.w2f-cx-path .w2f-path-steps { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 8px; }
.w2f-cx-path .w2f-path-steps a { color: var(--cx-blue); font-weight: 600; text-decoration: none; font-size: 14.5px; }
.w2f-cx-path .w2f-path-steps a:hover { text-decoration: underline; }
.w2f-cx-path-foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cx-line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.w2f-cx-path-meta { font-size: 12.5px; font-weight: 700; color: var(--cx-muted); }
.w2f-cx-main .w2f-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--cx-green-ink); text-decoration: none; }

/* Library */
.w2f-cx-library .w2f-section-head { max-width: 760px; }
.w2f-cx-empty {
  text-align: center;
  padding: 48px 20px;
  border: 1px dashed #c9d5e4;
  border-radius: 16px;
  background: #fff;
}
.w2f-cx-empty p { color: var(--cx-muted); margin-bottom: 16px; }

/* Finder */
.w2f-cx-finder-section { background: linear-gradient(180deg, #f3f8fd 0%, #ffffff 100%); }
.w2f-cx-finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .95fr);
  gap: 48px;
  align-items: start;
}
.w2f-cx-finder-copy h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 14px; }
.w2f-cx-finder-copy p { color: var(--cx-muted); font-size: 17px; }
.w2f-cx-finder-alt { font-size: 14.5px !important; }
.w2f-cx-finder-alt a { color: var(--cx-blue); font-weight: 700; }
.w2f-cx-quiz {
  background: #fff;
  border: 1px solid var(--cx-line);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--cx-shadow);
  display: grid;
  gap: 16px;
}
.w2f-cx-quiz label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--cx-ink); }
.w2f-cx-quiz select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d5deea;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--cx-ink);
}
.w2f-cx-quiz-result:empty { display: none; }
.w2f-cx-quiz-answer {
  border-top: 1px solid var(--cx-line);
  padding-top: 18px;
  display: grid;
  gap: 8px;
  justify-items: start;
}
.w2f-cx-quiz-kicker { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-green-ink); }
.w2f-cx-quiz-title { font-family: var(--font-head, inherit); font-size: 20px; font-weight: 800; color: var(--cx-blue); text-decoration: none; }
.w2f-cx-quiz-why { margin: 0 0 8px; font-size: 14px; color: var(--cx-muted); }

/* FAQ + final */
.w2f-cx-faq-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.w2f-cx-faq-list { display: grid; gap: 10px; }
.w2f-cx-faq-list details {
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background: #fff;
  padding: 0 18px;
}
.w2f-cx-faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 30px 17px 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--cx-ink);
  position: relative;
}
.w2f-cx-faq-list summary::-webkit-details-marker { display: none; }
.w2f-cx-faq-list summary::after {
  content: "+";
  position: absolute; right: 0; top: 14px;
  font-size: 20px; font-weight: 500; color: var(--cx-muted);
}
.w2f-cx-faq-list details[open] summary::after { content: "–"; }
.w2f-cx-faq-list details p { color: var(--cx-muted); font-size: 15.5px; padding-bottom: 18px; margin: 0; max-width: 680px; }
.w2f-cx-final {
  background: #0c3d68;
  color: #fff;
  padding: 56px 0;
}
.w2f-cx-final-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.w2f-cx-final h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); margin: 0 0 8px; }
.w2f-cx-final p { color: rgba(255, 255, 255, .82); margin: 0; max-width: 620px; }
.w2f-cx-final-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.w2f-cx-final .w2f-btn-primary { background: #fff; border-color: #fff; color: var(--cx-blue); }
.w2f-cx-final .w2f-btn-primary:hover { background: #eafaf3; }
.w2f-cx-final .w2f-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.w2f-cx-final .w2f-btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* ============================================================
   COURSE CARD
   ============================================================ */
.w2f-cx-main .course-card, .course-card {
  border-radius: 16px;
  border: 1px solid #e3e9f1;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.course-card:hover { box-shadow: 0 14px 34px rgba(16, 24, 40, .10); border-color: #c7d7e8; transform: translateY(-2px); }
.course-thumb { aspect-ratio: 16/10; }
.course-thumb-art.is-plain {
  background-image:
    radial-gradient(160px 120px at 88% 12%, rgba(16, 185, 129, .5), transparent 70%),
    linear-gradient(135deg, #0c3d68 0%, #0f4c81 55%, #0a5f58 100%);
  position: relative;
  overflow: hidden;
}
.course-thumb-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(160deg, rgba(0, 0, 0, .9), transparent 75%);
  -webkit-mask-image: linear-gradient(160deg, rgba(0, 0, 0, .9), transparent 75%);
}
.course-thumb-mono { position: relative; z-index: 1; font-size: 64px; color: rgba(255, 255, 255, .32); }
.course-thumb-tag { background: #fff; color: #0c3d68; font-size: 11px; letter-spacing: .05em; }
.course-thumb-cert { background: rgba(12, 61, 104, .84); color: #d9f7e9; border: 1px solid rgba(255, 255, 255, .22); }
.course-body { padding: 18px 20px 20px; }
.course-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.course-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #475467; background: #f2f5f9;
  border: 1px solid #e6ebf2;
  border-radius: 999px; padding: 3px 9px;
}
.course-tag-project { color: #0b7a5a; background: #eefaf4; border-color: #cdeedd; }
.course-title { font-size: 18px; line-height: 1.32; margin: 0 0 8px; }
.course-title a { text-decoration: none; }
.course-excerpt { font-size: 14px; line-height: 1.55; margin-bottom: 14px; color: #5c6b7f; -webkit-line-clamp: 3; }
.course-facts { gap: 6px; margin-bottom: 8px; }
.course-facts span { font-size: 12px; padding: 4px 9px; background: #f2f6fb; color: #0f4c81; }
.course-meta { font-size: 13px; color: #5c6b7f; margin-bottom: 12px; gap: 4px 12px; }
.course-progress { margin: 2px 0 14px; }
.course-progress-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 700; color: #0b7a5a; margin-bottom: 6px; }
.course-progress-track { height: 6px; border-radius: 999px; background: #e8eef6; overflow: hidden; }
.course-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--cx-green, #10b981); }
.course-foot { padding-top: 12px; border-top: 1px solid #edf1f6; }
.course-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: #344054; }
.course-rating-n { font-weight: 800; }
.course-rating-star { color: #d97706; font-size: 13px; }
.course-rating-new { font-weight: 700; color: #5c6b7f; font-size: 12.5px; }
.course-rating em { font-style: normal; color: #5c6b7f; font-size: 12.5px; }
.course-price { font-size: 14px; font-weight: 800; color: #0b7a5a; }
.course-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px;
}
.course-cta { margin: 0; font-size: 14px; font-weight: 700; color: #0f4c81; text-decoration: none; }
.course-start {
  font-size: 13px; font-weight: 700; color: #0b7a5a; text-decoration: none;
  border: 1px solid #cdeedd; background: #f0fbf6; border-radius: 8px; padding: 7px 11px;
  white-space: nowrap;
}
.course-start:hover { background: #e3f8ee; }
.course-card[hidden] { display: none !important; }

/* ============================================================
   LANDING PAGE
   ============================================================ */
.w2f-cx-coursebar {
  position: sticky;
  top: var(--header-h, 92px);
  z-index: 40;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e3e9f1;
}
.w2f-cx-coursebar-inner {
  display: flex; align-items: center; gap: 18px;
  min-height: 58px;
}
.w2f-cx-coursebar-back { font-size: 13.5px; font-weight: 700; color: #0f4c81; text-decoration: none; white-space: nowrap; }
.w2f-cx-coursebar-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 700; color: #101828;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w2f-cx-coursebar .w2f-btn { flex: 0 0 auto; }
/* The site header is only sticky when the option says so. When it is not, the
   bar has nothing to sit under and must pin to the top of the viewport, or it
   floats 92px down over the copy it is meant to sit above. */
body:not(.w2f-sticky-header) .w2f-cx-coursebar { top: 0; }
/* An anchor jump lands under the sticky bar without this. */
.w2f-cx-course .w2f-section,
.w2f-cx-course [id] { scroll-margin-top: calc(var(--header-h, 92px) + 20px); }

.w2f-cx-landing-hero {
  padding: 52px 0 56px;
  background: linear-gradient(180deg, #f4f8fd 0%, #ffffff 100%);
  border-bottom: 1px solid #e3e9f1;
}
.w2f-cx-landing-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
  gap: 52px;
  align-items: start;
}
.w2f-cx-crumbs {
  display: flex; flex-wrap: wrap; gap: 7px;
  font-size: 12.5px; color: #667085; margin-bottom: 18px;
}
.w2f-cx-crumbs a { color: #475467; text-decoration: none; }
.w2f-cx-crumbs a:hover { color: #0f4c81; text-decoration: underline; }
.w2f-cx-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.w2f-cx-pill-topic { background: #e8f6ef; color: #0b7a5a; margin: 0 0 14px; }
.w2f-cx-landing-title {
  font-size: clamp(30px, 4.3vw, 50px);
  margin: 0 0 18px;
  max-width: 780px;
}
.w2f-cx-landing-promise {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
  color: #475467;
  max-width: 680px;
  margin: 0 0 28px;
}
.w2f-cx-landing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.w2f-cx-hero-facts {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: 0 0 10px; padding: 18px 0 0;
  border-top: 1px solid #e3e9f1;
  list-style: none;
}
.w2f-cx-hero-facts li { display: grid; gap: 1px; min-width: 70px; }
.w2f-cx-hero-facts b { font-size: 16px; color: #101828; }
.w2f-cx-hero-facts span { font-size: 12px; color: #667085; }
.w2f-cx-no-card { font-size: 13px; color: #667085; margin: 6px 0 0; }

.w2f-cx-buybox {
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, .08);
  position: sticky;
  top: calc(var(--header-h, 92px) + 74px);
}
.w2f-cx-buybox-art { border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.w2f-cx-buybox-art img { display: block; width: 100%; height: auto; }
.w2f-cx-buybox-price { font-family: var(--font-head, inherit); font-size: 34px; font-weight: 800; color: #0f4c81; margin: 0 0 4px; line-height: 1; }
.w2f-cx-buybox-note { font-size: 13px; color: #5c6b7f; margin: 0 0 16px; }
.w2f-cx-buybox-cert { font-size: 13px; font-weight: 700; color: #0b7a5a; margin: 14px 0 0; }
.w2f-cx-buybox-progress { margin: 16px 0 4px; }
.w2f-cx-buybox-progress-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: #0b7a5a; margin-bottom: 6px; }
.w2f-cx-buybox-facts { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #e9eef5; display: grid; gap: 9px; }
.w2f-cx-buybox-facts > div { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.w2f-cx-buybox-facts dt { color: #667085; }
.w2f-cx-buybox-facts dd { margin: 0; font-weight: 700; color: #101828; text-align: right; }
.w2f-cx-buybox-best { margin: 16px 0 0; font-size: 12.5px; color: #5c6b7f; }

/* Who */
.w2f-cx-who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.w2f-cx-who-card {
  border: 1px solid #e3e9f1; border-radius: 16px; padding: 24px;
  background: #fff;
}
.w2f-cx-who-n { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #0b7a5a; margin-bottom: 12px; }
.w2f-cx-who-card h3 { font-size: 19px; margin: 0 0 12px; }
.w2f-cx-pain { font-size: 14.5px; color: #b42318; margin: 0 0 8px; }
.w2f-cx-gain { font-size: 14.5px; color: #344054; margin: 0; font-weight: 600; }

/* Projects */
.w2f-cx-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

/* The final project brief: the copy on the left, the standard on the right. */
.w2f-cx-fp-inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px;
  align-items: start;
}
.w2f-cx-fp-name {
  font-family: var(--font-head, inherit); font-size: 22px; font-weight: 800;
  color: #101828; margin: 0 0 6px;
}
.w2f-cx-fp-what { color: #475467; font-size: 16px; margin: 0 0 20px; }
.w2f-cx-fp-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.w2f-cx-fp-steps li { color: #344054; font-size: 15px; line-height: 1.6; }
.w2f-cx-fp-card {
  background: #fff; border: 1px solid #e3e9f1; border-radius: 16px; padding: 26px 24px;
  box-shadow: var(--cx-shadow, 0 8px 24px rgba(16, 24, 40, .06));
}
.w2f-cx-fp-card h3 { font-size: 16px; margin: 0 0 14px; color: #101828; }
.w2f-cx-fp-check { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.w2f-cx-fp-check li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: #344054; line-height: 1.55; }
.w2f-cx-fp-submit {
  margin: 0 0 18px; padding-top: 16px; border-top: 1px solid #e3e9f1;
  font-size: 14px; color: #475467;
}
.w2f-cx-fp-submit span {
  display: block; text-transform: uppercase; letter-spacing: .1em;
  font-size: 10.5px; font-weight: 800; color: #667085; margin-bottom: 4px;
}
.w2f-cx-project {
  border: 1px solid #e3e9f1; border-radius: 16px; padding: 24px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  display: flex; flex-direction: column; gap: 8px;
}
.w2f-cx-project-n {
  font-family: var(--font-head, inherit); font-size: 13px; font-weight: 800;
  color: #0f4c81; background: #edf3fa; border-radius: 8px;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
}
.w2f-cx-project-title { font-size: 18px; margin: 6px 0 0; line-height: 1.3; }
.w2f-cx-project-what { font-size: 14.5px; color: #475467; margin: 0; }
.w2f-cx-project-skills { font-size: 12.5px; color: #667085; margin: auto 0 0; padding-top: 10px; }
.w2f-cx-project-skills span { font-weight: 800; color: #101828; }
.w2f-cx-pill { font-size: 11.5px; font-weight: 700; color: #0b7a5a; background: #eefaf4; border-radius: 999px; padding: 3px 9px; }

/* Outcomes */
.w2f-cx-outcomes { background: #f6f9fc; }
.w2f-cx-outcomes-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.w2f-cx-outcomes-copy h2 { font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 12px; }
.w2f-cx-outcomes-copy p { color: #475467; }
.w2f-cx-roles { font-size: 13.5px; color: #5c6b7f; margin-top: 18px; }
.w2f-cx-roles span { display: block; font-weight: 800; color: #101828; margin-bottom: 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.w2f-cx-outcome-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.w2f-cx-outcome-list li {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid #e3e9f1; border-radius: 12px;
  padding: 14px 16px; font-size: 15.5px; color: #1f2937;
}
.w2f-cx-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #e8f6ef; color: #0b7a5a;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.w2f-cx-check svg { width: 13px; height: 13px; }

/* Curriculum accordion */
.w2f-cx-curriculum { display: grid; gap: 12px; }
.w2f-cx-module {
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.w2f-cx-module[open] { border-color: #bcd2e8; box-shadow: 0 8px 24px rgba(16, 24, 40, .05); }
.w2f-cx-module-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px;
  cursor: pointer; list-style: none;
}
.w2f-cx-module-head::-webkit-details-marker { display: none; }
.w2f-cx-module-n {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  color: #0f4c81; background: #edf3fa; border-radius: 8px; padding: 5px 9px;
  white-space: nowrap;
}
.w2f-cx-module-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.w2f-cx-module-title { font-family: var(--font-head, inherit); font-size: 17px; font-weight: 800; color: #101828; line-height: 1.3; }
.w2f-cx-module-outcome { font-size: 13.5px; color: #5c6b7f; line-height: 1.5; }
.w2f-cx-module-meta {
  flex: 0 0 auto; display: flex; gap: 12px; align-items: center;
  font-size: 12px; font-weight: 700; color: #667085;
  padding-top: 2px;
}
.w2f-cx-state { color: #0b7a5a; }
.w2f-cx-chev { flex: 0 0 auto; color: #667085; transition: transform .16s ease; }
.w2f-cx-module[open] .w2f-cx-chev { transform: rotate(180deg); }
.w2f-cx-module-body { padding: 0 20px 20px 20px; }
.w2f-cx-module-goal {
  margin: 0 0 14px; padding: 12px 14px;
  background: #f7fafc; border-left: 3px solid #10b981; border-radius: 0 8px 8px 0;
  font-size: 14px; color: #344054;
}
.w2f-cx-module-goal strong { color: #101828; }
.w2f-cx-lessons { margin: 0; padding: 0; list-style: none; display: grid; }
.w2f-cx-lesson {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #f0f4f9;
  font-size: 14.5px;
}
.w2f-cx-lesson:last-child { border-bottom: 0; }
.w2f-cx-lesson-n { flex: 0 0 26px; font-size: 12px; font-weight: 700; color: #98a2b3; }
.w2f-cx-lesson-title { color: #1f2937; text-decoration: none; flex: 1 1 auto; }
.w2f-cx-lesson-title:hover { color: #0f4c81; text-decoration: underline; }
.w2f-cx-lesson-done { font-size: 11px; font-weight: 800; color: #0b7a5a; text-transform: uppercase; letter-spacing: .05em; }
.w2f-cx-preview {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #0b7a5a; background: #e8f6ef; border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.w2f-cx-module-project {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed #e3e9f1;
  font-size: 13px; color: #475467;
}
.w2f-cx-module-project-k { font-weight: 800; color: #101828; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; margin-right: 6px; }
.w2f-cx-curriculum-note { margin-top: 18px; font-size: 13px; color: #667085; }

/* How */
.w2f-cx-how-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.w2f-cx-how-grid li { background: #fff; border: 1px solid #e3e9f1; border-radius: 14px; padding: 22px; }
.w2f-cx-how-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #0f4c81; color: #fff; font-weight: 800; font-size: 13px;
  margin-bottom: 14px;
}
.w2f-cx-how-grid h3 { font-size: 16px; margin: 0 0 8px; }
.w2f-cx-how-grid p { font-size: 13.5px; color: #5c6b7f; margin: 0; }

/* Credibility + proof */
.w2f-cx-cred-inner {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 40px; align-items: start;
  background: #f6f9fc; border: 1px solid #e3e9f1; border-radius: 20px; padding: 36px;
}
.w2f-cx-cred-brand { display: flex; gap: 16px; align-items: flex-start; }
.w2f-cx-cred-mark {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px;
  background: #0c3d68; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head, inherit); font-weight: 800; font-size: 15px;
}
.w2f-cx-cred-brand h2 { font-size: 22px; margin: 0 0 6px; }
.w2f-cx-cred-brand p { font-size: 14.5px; color: #5c6b7f; margin: 0; }
.w2f-cx-cred-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.w2f-cx-cred-list li { font-size: 14px; color: #475467; }
.w2f-cx-cred-list strong { color: #101828; }
.w2f-cx-proof-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; align-items: center; }
.w2f-cx-proof-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.w2f-cx-proof-stats > div {
  border: 1px solid #e3e9f1; border-radius: 14px; padding: 20px; background: #fff;
}
.w2f-cx-proof-stats b { display: block; font-family: var(--font-head, inherit); font-size: 30px; color: #0f4c81; line-height: 1.1; }
.w2f-cx-proof-stats b span { font-size: 16px; color: #d97706; margin-left: 3px; }
.w2f-cx-proof-stats > div > span { font-size: 12.5px; color: #667085; }
.w2f-cx-proof-copy h2 { font-size: clamp(25px, 3vw, 34px); margin: 0 0 12px; }
.w2f-cx-proof-copy p { color: #475467; }
.w2f-cx-proof-copy ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.w2f-cx-proof-copy li { font-size: 14.5px; color: #344054; padding-left: 24px; position: relative; }
.w2f-cx-proof-copy li::before { content: "✓"; position: absolute; left: 0; color: #0b7a5a; font-weight: 800; }

/* Related */
.w2f-cx-related-links { margin: 26px 0 0; font-size: 14px; color: #667085; }
.w2f-cx-related-links a { color: #0f4c81; font-weight: 700; text-decoration: none; margin: 0 6px; }
.w2f-cx-related-links a:first-child { margin-left: 0; }

/* Mobile sticky CTA */
.w2f-cx-sticky-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: #fff;
  border-top: 1px solid #dbe5f0;
  box-shadow: 0 -8px 24px rgba(16, 24, 40, .12);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Shown only on a phone, and only after the hero has scrolled by. On desktop
   the course bar already carries the CTA; a second fixed button there is noise. */
.w2f-cx-sticky-cta > div { min-width: 0; display: grid; }
.w2f-cx-sticky-title { font-size: 13px; font-weight: 800; color: #101828; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w2f-cx-sticky-meta { font-size: 11.5px; color: #667085; }

/* ============================================================
   LEARNING PLAYER
   ============================================================
   A lesson is a page of the site now, so this section starts from the theme's
   own palette instead of a second one. Every colour below comes through a local
   alias that reads --c-* (and falls back to the value this page shipped with, so
   a site whose Customizer has never been opened looks exactly as it did):
   Change Appearance → Customize → Colors and the course bar, the progress, the
   buttons, the links and the accents on this screen move with the rest of the
   site. .w2f-learn-page is added to <body> by single-course-learn.php. */
.w2f-learn-page {
  --learn-bg: var(--c-bg, #f4f7fa);
  --learn-card: var(--c-surface, #fff);
  --learn-line: var(--c-border, #dee7ef);
  --learn-ink: var(--c-heading, #111827);
  --learn-text: var(--c-text, #1f2937);
  --learn-muted: var(--c-muted, #6b7280);
  --learn-primary: var(--c-primary, #0f4c81);
  --learn-primary-ink: var(--c-primary-dark, #0c3d68);
  --learn-accent: var(--c-accent, #10b981);
  --learn-accent-ink: var(--c-accent-ink, #0b7a5a);
  /* The course bar pins under the site header when the header is sticky, and to
     the top of the viewport when it is not — the same rule the course page's own
     bar follows, so two sticky bars never overlap. */
  --learn-stick-top: var(--header-h, 92px);
  --learn-bar-h: 56px;
  background: var(--learn-bg);
  color: var(--learn-text);
}
body:not(.w2f-sticky-header).w2f-learn-page { --learn-stick-top: 0px; }
/* A green chosen to be read on white; on the dark surface it is not, so the pale
   green the rest of the dark theme uses takes over. */
body.w2f-mode-dark.w2f-learn-page {
  --learn-accent-ink: #6ee7b7;
  --learn-primary-ink: #cfe0f7;
}

/* ---------- The course bar, under the site header ---------- */
.w2f-learn-bar {
  position: sticky;
  top: var(--learn-stick-top);
  z-index: 45;
  background: color-mix(in srgb, var(--learn-card) 96%, transparent);
  border-bottom: 1px solid var(--learn-line);
  backdrop-filter: blur(10px);
}
.w2f-learn-bar-inner {
  display: flex; align-items: center; gap: 14px;
  max-width: 1500px; margin: 0 auto; padding: 0 18px;
  min-height: var(--learn-bar-h);
}
.w2f-learn-bar-crumb {
  flex: 1 1 auto; min-width: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 13px; color: var(--learn-muted);
}
.w2f-learn-bar-crumb a { color: var(--learn-ink); font-weight: 700; text-decoration: none; }
.w2f-learn-bar-crumb a:hover { color: var(--learn-primary); text-decoration: underline; }
.w2f-learn-bar-sep { color: var(--learn-line); }
.w2f-learn-bar-progress { flex: 0 0 130px; height: 6px; background: var(--learn-line); border-radius: 999px; overflow: hidden; }
.w2f-learn-bar-progress span { display: block; height: 100%; background: var(--learn-accent); border-radius: inherit; }
.w2f-learn-bar-pct { font-size: 12px; font-weight: 800; color: var(--learn-accent-ink); }
.w2f-learn-exit { font-size: 13px; font-weight: 700; color: var(--learn-primary); text-decoration: none; white-space: nowrap; }
.w2f-learn-exit:hover { text-decoration: underline; }
.w2f-learn-navtoggle {
  display: none; appearance: none; border: 1px solid var(--learn-line); background: var(--learn-card);
  border-radius: 9px; padding: 7px 10px; font-size: 13px; font-weight: 700; color: var(--learn-primary);
}

/* ---------- The three columns ---------- */
.w2f-learn-shell {
  display: grid;
  grid-template-columns: 288px minmax(0, 760px) 280px;
  gap: 34px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 26px 18px 72px;
  justify-content: center;
  align-items: start;
}
.w2f-learn-nav {
  position: sticky;
  top: calc(var(--learn-stick-top) + var(--learn-bar-h) + 18px);
  max-height: calc(100vh - var(--learn-bar-h) - 120px);
  overflow-y: auto;
  background: var(--learn-card);
  border: 1px solid var(--learn-line);
  border-radius: 14px;
  padding: 18px;
  scrollbar-width: thin;
}
.w2f-learn-nav-kicker { margin: 0 0 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--learn-accent-ink); }
.w2f-learn-nav-title { margin: 0 0 14px; font-family: var(--font-head, inherit); font-weight: 800; font-size: 16px; line-height: 1.3; color: var(--learn-ink); }
.w2f-learn-progress-head { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 700; color: var(--learn-accent-ink); margin-bottom: 6px; }
.w2f-learn-modules { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 18px; }
.w2f-learn-module-head { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 7px; font-size: 12.5px; font-weight: 800; color: var(--learn-ink); line-height: 1.35; }
.w2f-learn-module-n { color: var(--learn-muted); flex: 0 0 auto; font-size: 11px; padding-top: 1px; }
.w2f-learn-module-state { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--learn-accent-ink); }
.w2f-learn-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.w2f-learn-lesson {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 8px; border-radius: 8px;
  font-size: 12.5px; color: var(--learn-muted); text-decoration: none; line-height: 1.4;
}
.w2f-learn-lesson:hover { background: color-mix(in srgb, var(--learn-primary) 7%, transparent); color: var(--learn-primary); }
.w2f-learn-lesson.is-current { background: color-mix(in srgb, var(--learn-primary) 12%, transparent); color: var(--learn-primary-ink); font-weight: 700; }
.w2f-learn-lesson.is-done .w2f-learn-lesson-mark { color: var(--learn-accent-ink); }
.w2f-learn-lesson-mark { flex: 0 0 17px; font-size: 10.5px; font-weight: 800; color: var(--learn-muted); padding-top: 1px; }
.w2f-learn-lesson-mark svg { width: 12px; height: 12px; }
.w2f-learn-nav-exit { display: block; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--learn-line); font-size: 12.5px; font-weight: 700; color: var(--learn-primary); text-decoration: none; }
.w2f-learn-scrim { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 69; }

/* ---------- The lesson ---------- */
.w2f-learn-main { min-width: 0; }
.w2f-learn-article {
  background: var(--learn-card);
  border: 1px solid var(--learn-line);
  border-radius: 16px;
  padding: 38px 44px 44px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(17, 24, 39, .06));
}
.w2f-learn-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--learn-muted); margin-bottom: 18px; }
.w2f-learn-crumbs a { color: var(--learn-primary); text-decoration: none; }
.w2f-learn-kicker { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--learn-accent-ink); margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.w2f-learn-kicker-lesson::before { content: "·"; margin-right: 8px; color: var(--learn-muted); }
.w2f-learn-title { font-family: var(--font-head, inherit); font-size: clamp(27px, 3.4vw, 38px); line-height: 1.18; letter-spacing: -.02em; color: var(--learn-ink); margin: 0 0 18px; }
.w2f-learn-objective {
  background: color-mix(in srgb, var(--learn-primary) 5%, var(--learn-card));
  border: 1px solid var(--learn-line); border-left: 4px solid var(--learn-primary);
  border-radius: 0 10px 10px 0; padding: 16px 18px; margin: 0 0 30px;
}
.w2f-learn-objective-k { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--learn-primary); margin-bottom: 4px; }
.w2f-learn-objective p { margin: 0; font-size: 15.5px; color: var(--learn-text); }
.w2f-learn-section { margin: 0 0 30px; }
.w2f-learn-section h2 { font-family: var(--font-head, inherit); font-size: 20px; letter-spacing: -.01em; margin: 0 0 10px; color: var(--learn-ink); }
.w2f-learn-section p { margin: 0 0 14px; font-size: 17px; line-height: 1.72; color: var(--learn-text); }
/* An INLINE code chip — `w2f_opt()`, a flag, a file name in a sentence. Hence
   `:not(pre) > code`: a code WINDOW is a <pre> holding a <code>, and painting that
   one as a chip gives every line of a Java listing its own pale bar behind pale
   text. That is exactly what shipped — a code block a reader could not read, at
   1.07:1 — because this rule and the component's own reset had the same
   specificity and this file loads second. The chip is for inline code only. */
.w2f-learn-section :not(pre) > code { background: color-mix(in srgb, var(--learn-ink) 7%, transparent); border: 1px solid var(--learn-line); border-radius: 5px; padding: 1px 5px; font-size: .9em; }
.w2f-learn-mistakes { background: color-mix(in srgb, #f59e0b 8%, var(--learn-card)); border: 1px solid color-mix(in srgb, #f59e0b 24%, var(--learn-line)); border-radius: 12px; padding: 18px 20px; }
.w2f-learn-mistakes h2 { color: color-mix(in srgb, #b45309 88%, var(--learn-ink)); font-size: 17px; }
.w2f-learn-mistakes p { margin: 0; font-size: 15.5px; }
.w2f-learn-example { background: color-mix(in srgb, var(--learn-primary) 6%, var(--learn-card)); border: 1px solid color-mix(in srgb, var(--learn-primary) 18%, var(--learn-line)); border-radius: 12px; padding: 18px 20px; }
.w2f-learn-example h2 { color: var(--learn-primary-ink); font-size: 17px; }
.w2f-learn-example p { margin: 0; font-size: 15.5px; }
.w2f-learn-practice { background: color-mix(in srgb, var(--learn-accent) 7%, var(--learn-card)); border: 1px solid color-mix(in srgb, var(--learn-accent) 26%, var(--learn-line)); border-radius: 12px; padding: 20px; }
.w2f-learn-practice h2 { color: var(--learn-accent-ink); }
.w2f-learn-practice p { margin: 0 0 10px; }
.w2f-learn-practice-note { font-size: 13.5px !important; color: var(--learn-accent-ink) !important; font-weight: 600; margin: 0 !important; }
.w2f-learn-takeaway { border-top: 1px solid var(--learn-line); padding-top: 22px; }
.w2f-learn-takeaway h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .06em; color: var(--learn-muted); }
.w2f-learn-takeaway p { font-weight: 600; color: var(--learn-ink); }
.w2f-learn-complete-box {
  margin: 34px 0 26px;
  border: 1px solid color-mix(in srgb, var(--learn-accent) 30%, var(--learn-line));
  background: color-mix(in srgb, var(--learn-accent) 6%, var(--learn-card));
  border-radius: 14px; padding: 20px;
}
.w2f-learn-complete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; cursor: pointer; }
.w2f-learn-complete input { width: 22px; height: 22px; accent-color: var(--learn-accent); }
.w2f-learn-complete-k { font-weight: 800; font-size: 16px; color: var(--learn-accent-ink); }
.w2f-learn-complete-s { flex: 1 1 220px; font-size: 12.5px; color: var(--learn-muted); }
.w2f-learn-signin-title { margin: 0 0 4px; font-weight: 800; color: var(--learn-ink); }
.w2f-learn-signin-note { margin: 0 0 14px; font-size: 13.5px; color: var(--learn-muted); }
.w2f-learn-page .w2f-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 10px;
  font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.w2f-learn-page .w2f-btn-primary { background: var(--learn-primary); color: #fff; border: 1px solid var(--learn-primary); }
.w2f-learn-page .w2f-btn-primary:hover { background: var(--learn-primary-ink); border-color: var(--learn-primary-ink); color: #fff; }
.w2f-learn-page .w2f-btn-ghost { background: var(--learn-card); color: var(--learn-primary); border: 1px solid var(--learn-line); }
.w2f-learn-page .w2f-btn-ghost:hover { border-color: var(--learn-primary); }
.w2f-learn-pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.w2f-learn-finish {
  margin-top: 36px; padding: 24px;
  border: 1px solid var(--learn-line); border-radius: 14px;
  background: color-mix(in srgb, var(--learn-primary) 4%, var(--learn-card));
}
.w2f-learn-finish-kicker { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--learn-accent-ink); margin: 0 0 6px; }
.w2f-learn-finish h2 { font-family: var(--font-head, inherit); font-size: 22px; margin: 0 0 8px; color: var(--learn-ink); }
.w2f-learn-finish p { font-size: 14.5px; color: var(--learn-text); }
.w2f-learn-finish-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.w2f-learn-next { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--learn-line); display: grid; gap: 2px; }
.w2f-learn-next span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--learn-muted); }
.w2f-learn-next a { font-weight: 800; color: var(--learn-primary); text-decoration: none; }

/* Code windows inside the player (the theme's own component, re-sized). The pane
   stays dark in both colour modes on purpose: a code pane that changes colour with
   the page is harder to read, not easier. */
.w2f-learn-article .w2f-code { margin: 18px 0; border-radius: 12px; overflow: hidden; }
.w2f-learn-article .w2f-code-bar { background: #0c1626; color: #cbd5e1; padding: 9px 14px; }
.w2f-learn-article .w2f-code-body {
  background: #111c2f; color: #e6edf7;
  padding: 16px; margin: 0;
  font-size: 13.5px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word; overflow-x: visible;
}
/* The pane's own <code>. Stated here as well as in the component because two
   files style code elements on this page, and the one that must win is the one
   that knows it is inside a code window. */
.w2f-learn-article .w2f-code-body code,
.w2f-learn-section .w2f-code-body code {
  background: none; border: 0; border-radius: 0; padding: 0;
  font-size: inherit; color: inherit; text-shadow: none;
}
.w2f-learn-article .w2f-code-copy, .w2f-learn-article .w2f-code-run {
  background: rgba(255, 255, 255, .12); color: #e6edf7; border: 0;
  border-radius: 6px; padding: 4px 9px; font-size: 11.5px; cursor: pointer;
}

/* ---------- Right rail ---------- */
.w2f-learn-rail {
  display: grid; gap: 14px;
  position: sticky;
  top: calc(var(--learn-stick-top) + var(--learn-bar-h) + 18px);
}
.w2f-learn-card { background: var(--learn-card); border: 1px solid var(--learn-line); border-radius: 14px; padding: 18px; }
.w2f-learn-card h2 { font-family: var(--font-head, inherit); font-size: 13.5px; letter-spacing: .02em; margin: 0 0 10px; color: var(--learn-ink); }
.w2f-learn-card-note { font-size: 11.5px; color: var(--learn-muted); margin: 8px 0 0; }
.w2f-learn-resources { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.w2f-learn-resources button, .w2f-learn-resources a {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px; color: var(--learn-primary); text-align: left; cursor: pointer; text-decoration: none;
}
.w2f-learn-resources button:hover, .w2f-learn-resources a:hover { text-decoration: underline; }
.w2f-learn-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.w2f-learn-checklist label { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--learn-text); line-height: 1.4; }
.w2f-learn-checklist input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--learn-accent); flex: 0 0 auto; }
.w2f-learn-card textarea {
  width: 100%; border: 1px solid var(--learn-line); border-radius: 9px;
  padding: 10px; font: inherit; font-size: 13px; line-height: 1.55;
  color: var(--learn-text); background: var(--learn-card); resize: vertical;
}
.w2f-learn-card textarea:focus { outline: 3px solid color-mix(in srgb, var(--learn-primary) 22%, transparent); border-color: var(--learn-primary); }
.w2f-learn-nextcard a { display: block; font-size: 13.5px; font-weight: 800; color: var(--learn-primary); text-decoration: none; line-height: 1.4; }
.w2f-learn-nextcard p { font-size: 11.5px; color: var(--learn-muted); margin: 6px 0 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .w2f-learn-shell { grid-template-columns: 260px minmax(0, 1fr); }
  /* The rail moves under the lesson instead of disappearing. Notes, the project
     checklist and the print button are part of working through a course, and a
     tablet reader losing all three is a worse trade than one more scroll. */
  .w2f-learn-rail {
    grid-column: 1 / -1;
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .w2f-cx-landing-hero-inner { gap: 32px; }
}
@media (max-width: 980px) {
  .w2f-cx-hero-inner, .w2f-cx-finder, .w2f-cx-faq-inner,
  .w2f-cx-outcomes-inner, .w2f-cx-cred-inner, .w2f-cx-proof-inner,
  .w2f-cx-landing-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .w2f-cx-buybox { position: static; order: 2; }
  .w2f-cx-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .w2f-cx-hero-stats > div { padding: 14px; }
  .w2f-cx-hero-stats dd { font-size: 22px; }
  .w2f-cx-who-grid, .w2f-cx-projects, .w2f-cx-how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w2f-cx-fp-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .w2f-cx-coursebar { top: 0; }
  .w2f-cx-coursebar-title { display: none; }
  .w2f-learn-shell { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
  .w2f-learn-nav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
    width: min(86vw, 330px); max-height: none; border-radius: 0 16px 16px 0;
    transform: translateX(-105%); transition: transform .2s ease;
    overflow-y: auto;
  }
  .w2f-learn-page.learn-nav-open .w2f-learn-nav { transform: translateX(0); }
  .w2f-learn-navtoggle { display: inline-flex; }
  /* One row. The module and lesson number are already printed above the lesson
     title, and a bar that wraps onto three lines on a phone eats the top of the
     screen every time the reader scrolls. */
  .w2f-learn-bar-crumb { flex-wrap: nowrap; overflow: hidden; }
  .w2f-learn-bar-crumb > span { display: none; }
  .w2f-learn-bar-crumb a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w2f-learn-bar-progress { flex: 1 1 auto; }
  .w2f-learn-article { padding: 30px 30px 36px; }
}
@media (max-width: 760px) {
  .w2f-cx-main { font-size: 16px; }
  .w2f-cx-hero { padding: 40px 0 38px; }
  .w2f-cx-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w2f-cx-filter-group { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .w2f-cx-filter-label { margin-top: 0; }
  .w2f-cx-chips { gap: 6px; }
  .w2f-cx-chip { padding: 7px 11px; font-size: 12.5px; }
  .w2f-cx-main .w2f-section { padding: 52px 0; }
  .w2f-cx-who-grid, .w2f-cx-projects, .w2f-cx-how-grid, .w2f-cx-proof-stats,
  .w2f-cx-path-grid { grid-template-columns: minmax(0, 1fr); }
  .w2f-cx-landing-hero { padding: 32px 0 40px; }
  .w2f-cx-landing-actions .w2f-btn, .w2f-cx-hero-actions .w2f-btn { width: 100%; }
  .w2f-cx-hero-facts { gap: 10px 18px; }
  .w2f-cx-hero-facts li { min-width: calc(33.33% - 12px); }
  .w2f-cx-module-head { flex-wrap: wrap; gap: 10px; padding: 16px; }
  .w2f-cx-module-main { flex-basis: calc(100% - 70px); }
  .w2f-cx-module-meta { padding-left: 0; }
  .w2f-cx-module-body { padding: 0 16px 16px; }
  .w2f-cx-lesson { flex-wrap: wrap; }
  .w2f-cx-preview { margin-left: 38px; }
  .w2f-cx-cred-inner { padding: 24px; }
  .w2f-cx-final { padding: 44px 0 56px; }
  .w2f-cx-final-actions { width: 100%; }
  .w2f-cx-final-actions .w2f-btn { width: 100%; }
  .course-actions { flex-wrap: wrap; }
  .course-start { width: 100%; text-align: center; }
  .w2f-cx-sticky-cta { display: none; }
  .w2f-cx-sticky-cta.is-visible { display: flex; }
  .w2f-cx-course .w2f-cx-final-course { padding-bottom: 96px; }
  .w2f-learn-article { padding: 24px 20px 30px; border-radius: 12px; }
  .w2f-learn-bar-inner { min-height: 52px; gap: 10px; padding: 0 12px; }
  .w2f-learn-navtoggle { white-space: nowrap; padding: 6px 9px; }
  /* On a phone the track becomes the bar's bottom edge: 3px of progress under the
     course name instead of a 130px pill that has no room in the row. */
  .w2f-learn-bar-progress {
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 3px; flex: none; border-radius: 0; background: transparent;
  }
  .w2f-learn-bar-pct { display: none; }
  .w2f-learn-exit { font-size: 12px; }
  /* Module over lesson number, no separator: at this width the two do not share
     a line, and a dot leading the second one reads as a typo. */
  .w2f-learn-kicker { display: block; }
  .w2f-learn-kicker-lesson { display: block; }
  .w2f-learn-kicker-lesson::before { content: none; }
  .w2f-learn-title { font-size: 26px; }
  .w2f-learn-section p { font-size: 16px; }
  .w2f-learn-pager .w2f-btn { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .w2f-cx-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w2f-cx-hero-facts li { min-width: calc(50% - 10px); }
  .w2f-cx-filters-head { flex-direction: column; align-items: flex-start; }
  .w2f-cx-quiz { padding: 20px; }
  .w2f-cx-buybox { padding: 18px; }
  .w2f-cx-sticky-title { max-width: 44vw; }
}

@media (prefers-reduced-motion: reduce) {
  .w2f-cx-main *, .w2f-learn-page * { transition: none !important; animation: none !important; }
}

/* ============================================================
   PRINT — the lesson, without the player
   ============================================================ */
@media print {
  .w2f-learn-bar, .w2f-learn-nav, .w2f-learn-rail, .w2f-learn-pager,
  .w2f-learn-complete-box, .w2f-learn-navtoggle, .w2f-learn-scrim,
  .w2f-learn-finish-actions, .w2f-cx-sticky-cta { display: none !important; }
  .w2f-learn-page { background: #fff; }
  .w2f-learn-shell { display: block; padding: 0; }
  .w2f-learn-article { border: 0; box-shadow: none; padding: 0; max-width: 760px; margin: 0 auto; }
  .w2f-learn-article .w2f-code-body { background: #f5f5f5; color: #111; }
  .w2f-learn-article .w2f-code-bar { background: #eee; color: #111; }
}