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

.s4-guide__hero{
  margin:12px 0 22px;
  padding:clamp(24px,4vw,44px);
  border-radius:38px;
  color:#fff;
  background:linear-gradient(145deg,#1e1b4b 0%,#29245f 60%,#0d9488 170%);
  box-shadow:var(--clay-surface-navy);
}

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

.s4-guide__hero .s4-guide__eyebrow,
.s4-guide__homework .s4-guide__eyebrow{ color:#9ff1e4; }

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

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

.s4-guide__hero > p:not(.s4-guide__eyebrow){
  margin:0;
  color:#f5f3ff;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.8;
}

.s4-guide__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

.s4-guide__hero .clay-btn--ghost{
  color:#fff;
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.1);
}

.s4-guide__section{
  margin:22px 0;
  padding:clamp(20px,3vw,30px);
  border:3px solid #fff;
  border-radius:30px;
  background:linear-gradient(150deg,#fff 0%,#f7f3ff 135%);
  box-shadow:var(--clay-card-neutral);
}

.s4-guide__section-heading h2,
.s4-guide__section > h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(1.4rem,2.4vw,2.15rem);
  line-height:1.45;
}

.s4-guide__section-heading p:last-child,
.s4-guide__section > p{ margin:8px 0 0; color:#3d3a58; line-height:1.8; }

.s4-guide__tool-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:20px;
}

.s4-guide__tool-card{
  display:flex;
  min-width:0;
  min-height:190px;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:17px 15px 15px;
  border-radius:22px;
  background:#fffbf4;
  box-shadow:var(--clay-card-sm-neutral);
}

.s4-guide__tool-number{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--teal);
  font-weight:800;
}

.s4-guide__tool-card h3{
  margin:0;
  color:var(--navy);
  font-size:1.05rem;
  line-height:1.45;
}

.s4-guide__tool-card p{
  margin:0;
  color:#55516e;
  font-size:.9rem;
  line-height:1.65;
}

.s4-guide__tool-cta{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:auto;
  color:var(--teal-text);
  font-size:.9rem;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}

.s4-guide__fallback{
  margin-top:18px !important;
  padding:12px 14px;
  border-inline-start:4px solid var(--gold);
  border-radius:12px;
  color:#55516e !important;
  background:#fffaf2;
  font-size:.88rem;
  font-weight:700;
}

.s4-guide__workflow-note{ color:#55516e !important; }

.s4-guide__publish{ background:linear-gradient(150deg,#e6f8f4,#fff 135%); }

.s4-guide__check-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 24px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}

.s4-guide__check-list li{
  position:relative;
  padding:10px 30px 10px 0;
  color:#3d3a58;
  line-height:1.7;
}

.s4-guide__check-list li::before{
  content:"✓";
  position:absolute;
  top:9px;
  right:0;
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--teal);
  font-weight:800;
}

.s4-guide__detector-note{
  margin-top:18px !important;
  color:#8a5b00 !important;
  font-weight:800;
}

.s4-guide__homework{
  color:#fff;
  background:linear-gradient(145deg,#2a2666,#1e1b4b);
}

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

.s4-guide__homework pre{
  margin:18px 0;
  padding:15px 17px;
  overflow:auto;
  border-radius:18px;
  color:var(--navy);
  background:var(--cream);
  direction:rtl;
  text-align:right;
  white-space:pre-wrap;
  font:600 1rem/1.9 Cairo,sans-serif;
}

.s4-guide__homework code{ font-family:inherit; }
.s4-guide__bridge{ color:#9ff1e4 !important; font-weight:700; }
.s4-guide__homework .clay-btn{ margin-top:16px; }

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

@media (max-width:900px){
  .s4-guide__tool-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:560px){
  body[data-page="session4-quick-guide"] .breadcrumb{ margin-bottom:2px; }
  body[data-page="session4-quick-guide"] .breadcrumb__list{ padding:5px 14px; }
  body[data-page="session4-quick-guide"] .breadcrumb__link{ padding-block:6px; }
  .s4-guide{
    width:min(100% - 20px,1120px);
    margin-top:4px;
    padding-top:0;
    padding-inline:0;
  }
  .s4-guide__hero{ margin-top:2px; padding:12px 14px; border-radius:30px; }
  .s4-guide__hero h1{
    font-size:clamp(1.9rem,10vw,2.7rem);
    line-height:1.08;
  }
  .s4-guide__actions{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:6px;
    margin-top:12px;
  }
  .s4-guide__actions .clay-btn{
    width:100%;
    min-height:44px;
    padding:5px 8px;
    font-size:1rem;
    text-align:center;
  }
  .s4-guide__section{
    margin:10px 0;
    padding:12px 14px;
    border-radius:24px;
  }
  .s4-guide__section-heading h2{ line-height:1.3; }
  .s4-guide__section-heading p:last-child{ line-height:1.5; }
  .s4-guide__tool-grid,
  .s4-guide__check-list{ grid-template-columns:1fr; }
  .s4-guide__tool-grid{ gap:10px; margin-top:14px; }
  .s4-guide__tool-card{ min-height:0; }
  .s4-guide__homework .clay-btn{ width:100%; text-align:center; }
}