/* ══════════════════════════════════════════════════════
   SECTION 05 — "Course Outcomes / By the end of the class"

   Page canvas: 1440px wide
   Section frame 181:4264 — x=0, y=4283, w=1440, h=1048
   Content frame 181:4426 — x=156, y=4435 (→ padding-top 152px), w=1128, h=728
   Bottom padding: 1048 - 152 - 728 = 168px

   Background layers:
     .s5__texture  — grain overlay (mix-blend: hard-light, opacity 0.1)
                     positioned at top:-188.59%, left:-0.56%, w:106.53%, h:318.09%
     .s5__diamond  — Radial Repeat diamond shape (top-right)
                     frame at x=682, y=-22 in section, w=712, h=668
                     image extends -26.96% inset → display: 1072×1028px at (502,-202)

   Transition: section 4 and 5 share #150d00 bg — seamless dark flow.
   ══════════════════════════════════════════════════════ */


/* ── Section shell ── */
.s5 {
  position: relative;
  width: 100%;
  background: #150d00;
  padding: 152px 0 168px;
  overflow: hidden;
  isolation: isolate;
}


/* ── Grain texture — hard-light at 10% (much subtler than other sections) ── */
.s5__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: hard-light;
  opacity: 0.1;
  overflow: hidden;
}
.s5__texture img {
  position: absolute;
  top: -188.59%;
  left: -0.56%;
  width: 106.53%;
  height: 318.09%;
  display: block;
}


/* ── Diamond / Radial Repeat background (top-right) ──
   User-exported PNG: 938×1028px, RGBA, amber/gold color already correct.
   Right-aligned to section edge: left = 1440 - 938 = 502px. ── */
.s5__diamond {
  position: absolute;
  top: -140px;
  left: 502px;
  width: 938px;
  height: 1028px;
  z-index: 0;
  pointer-events: none;
}
.s5__diamond img {
  display: block;
  width: 100%;
  height: 100%;
}


/* ════════════════════════════════════════
   CONTENT WRAPPER — 1128px centred
   flex-col, gap 72px between header/checklist/footer
   ════════════════════════════════════════ */
.s5__inner {
  position: relative;
  z-index: 1;
  width: 1128px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 72px;
}


/* ════════════════════════════════════════
   HEADER — eyebrow + headline (609px wide)
   ════════════════════════════════════════ */
.s5__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Eyebrow: Inter SemiBold 12px, gold, uppercase, tracking 3.264px */
.s5__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3.264px;
  line-height: 16.32px;
  color: var(--color-gold);
  margin: 0;
}

/* Headline: Excon 64px, white gradient, 609px wide */
.s5__headline {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 86px;
  letter-spacing: -4px;
  background: linear-gradient(to bottom, #ffffff 19.478%, #c0c0c0 93.976%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  width: 609px;
  margin: 0;
}

/* "you'll have" line — gold override */
.s5__hl-gold {
  display: block;
  -webkit-text-fill-color: var(--color-gold);
  color: var(--color-gold);
}


/* ════════════════════════════════════════
   CHECKLIST — two 396px columns, space-between
   Items spaced 61px apart (36px icon + 25px gap)
   ════════════════════════════════════════ */
.s5__checklist {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.s5__col {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 396px;
}

/* Single checklist row */
.s5__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
}

/* Circle icon container — 36×36, gold bg at 10% */
.s5__check {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(213, 153, 62, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s5__check img {
  width: 20.571px;
  height: 20.571px;
  display: block;
}

/* Item text — regular cream, gold for keyword */
.s5__item-text {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.5px;
  color: #f5ede0;
  margin: 0;
  white-space: nowrap;
}
.s5__item-text span {
  font-weight: 500;
  color: var(--color-gold);
}


/* ════════════════════════════════════════
   FOOTER — "You'll walk away with" + bold line
   ════════════════════════════════════════ */
.s5__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #f5ede0;
  letter-spacing: -1px;
}

/* "You'll walk away with:" — Excon Light 20px */
.s5__footer-sub {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  margin: 0;
}

/* Bold tagline — Inter SemiBold 24px */
.s5__footer-bold {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  line-height: 35px;
  margin: 0;
}