.s4-page{
  max-width:1120px;
  padding-top:8px;
  padding-bottom:42px;
}

.s4-page__hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  align-items:center;
  gap:clamp(20px,4vw,48px);
  margin:12px 0 22px;
  padding:clamp(20px,4vw,46px);
  overflow:hidden;
  border-radius:40px;
  background:linear-gradient(145deg,#1e1b4b 0%,#27235e 58%,#0d9488 170%);
  box-shadow:var(--clay-surface-navy);
}

.s4-page__hero-copy{ min-width:0; }

.s4-page__eyebrow{
  margin:0 0 8px;
  color:var(--teal-text);
  font-size:.9rem;
  font-weight:800;
}

.s4-page__hero .s4-page__eyebrow,
.s4-page__homework .s4-page__eyebrow{ color:#9ff1e4; }

.s4-page h1,
.s4-page h2,
.s4-page p{ text-wrap:balance; }

.s4-page h1{
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(2rem,4.6vw,3.65rem);
  line-height:1.2;
  letter-spacing:-.03em;
}

.s4-page__promise{
  max-width:38rem;
  margin:0;
  color:#f5f3ff;
  font-size:1.08rem;
  font-weight:700;
  line-height:1.85;
}

.s4-page__laptop-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:18px 0 22px;
  color:#f5be4f;
  font-weight:800;
  line-height:1.7;
}

.s4-page__laptop-note span{ flex:0 0 auto; }

.s4-page__hero .clay-btn--gold{ color:var(--navy); }

.s4-page__hero-media{
  min-width:0;
  margin:0;
  padding:10px;
  border-radius:28px;
  background:rgba(255,255,255,.16);
  box-shadow:inset 3px 3px 8px rgba(0,0,0,.2),inset -3px -3px 8px rgba(255,255,255,.16);
}

.s4-page__hero-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:20px;
  background:var(--cream);
}

.s4-page__hero-media figcaption{
  margin:9px 4px 0;
  color:#f5f3ff;
  font-size:.8rem;
  font-weight:600;
  line-height:1.55;
}

.s4-page__section,
.s4-page__homework{
  margin:22px 0;
  padding:clamp(20px,3vw,30px);
  border:3px solid #fff;
  border-radius:30px;
  box-shadow:var(--clay-card-neutral);
}

.s4-page__section{ background:linear-gradient(150deg,#fff 0%,#f7f3ff 135%); }

.s4-page__section h2,
.s4-page__homework h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(1.4rem,2.5vw,2.2rem);
  line-height:1.45;
}

.s4-page__journey{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}

.s4-page__journey li{
  position:relative;
  display:grid;
  min-height:62px;
  place-items:center;
  padding:10px 8px;
  border-radius:18px;
  color:var(--navy);
  background:#fffbf4;
  box-shadow:var(--clay-card-sm-neutral);
  font-weight:800;
  text-align:center;
}

.s4-page__journey li:not(:last-child)::after{
  content:"←";
  position:absolute;
  left:-12px;
  top:50%;
  z-index:1;
  color:var(--teal-text);
  font-size:1.2rem;
  font-weight:900;
  transform:translateY(-50%);
}

.s4-page__homework{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:linear-gradient(145deg,#2a2666,#1e1b4b);
}

.s4-page__homework h2{ color:#fff; }

.s4-page__homework p:last-child{
  max-width:42rem;
  margin:8px 0 0;
  color:#f5f3ff;
  line-height:1.8;
}

.s4-page__homework .clay-btn{ flex:0 0 auto; }

.s4-page a:focus-visible{ outline-color:var(--gold); }

@media (max-width:820px){
  .s4-page__hero{ grid-template-columns:1fr; }
  .s4-page__hero-media{ order:2; }
  .s4-page__journey{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .s4-page__journey li:nth-child(3)::after{ display:none; }
}

@media (max-width:560px){
  body[data-page="session4"] .breadcrumb{ margin-bottom:2px; }
  body[data-page="session4"] .breadcrumb__list{ padding:5px 14px; }
  body[data-page="session4"] .breadcrumb__link{ padding-block:6px; }
  .s4-page{
    width:min(100% - 20px,1120px);
    margin-top:4px;
    padding-top:0;
    padding-inline:0;
  }
  .s4-page__hero{ margin-top:2px; padding:18px; border-radius:30px; }
  .s4-page h1{ font-size:clamp(1.9rem,10vw,2.7rem); }
  .s4-page__promise{ font-size:1rem; }
  .s4-page__hero .clay-btn{ width:100%; text-align:center; }
  .s4-page__section,
  .s4-page__homework{ padding:20px 16px; border-radius:24px; }
  .s4-page__journey{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .s4-page__journey li:nth-child(2n)::after{ display:none; }
  .s4-page__homework{ align-items:stretch; flex-direction:column; gap:18px; }
  .s4-page__homework .clay-btn{ width:100%; text-align:center; }
}