/* Specialty silo pages (page-specialty.php, interview silos): hero, overlapping product
   cards, 1:1 mentoring strip and article grid. All scoped under .sp-page. */
.sp-page{padding:0 12px;font-family:"Instrument Sans",sans-serif;font-weight:450;color:#0f172a;-webkit-font-smoothing:antialiased}
.sp-page *{box-sizing:border-box}
.sp-page h1,.sp-page h2,.sp-page h3,.sp-page p{margin:0}

/* ==== Hero =============================================================== */
.sp-page .sp-hero{display:flex;min-height:480px;margin:0;/* not the site-wide section margin, or the cards sit lower */border-radius:32px;background-color:#eff6ff;background-repeat:no-repeat;background-size:cover;background-position:center 25%}
.sp-page .sp-hero__inner{width:100%;max-width:1384px;margin:0 auto;padding:72px 24px 244px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.sp-page .sp-hero__pill{display:inline-flex;align-items:center;padding:4px 8px;margin-bottom:20px;border:1px solid #fff;border-radius:13px;color:#fff;font-size:14px;line-height:16px;font-weight:600}
.sp-page .sp-hero__title{max-width:760px;margin:0 0 12px;color:#fff;font-size:clamp(40px,5vw,64px);line-height:1.07;letter-spacing:-1.28px;font-weight:700}
.sp-page .sp-hero__sub{max-width:560px;color:#fff;font-size:16px;line-height:24px;font-weight:600}

/* ==== Product cards (pulled up over the hero) ============================= */
.sp-page .sp-products{position:relative;z-index:1;max-width:1384px;margin:-180px auto 0;padding:0 24px}
.sp-page .sp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;align-items:stretch}
.sp-page .sp-card{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:16px;box-shadow:0 6px 14px rgba(15,23,42,.10),0 20px 44px rgba(15,23,42,.12);color:#202b30}
.sp-page .sp-card--qb{background:linear-gradient(253deg,#fff 10.42%,#f0f6ff 100%)}
.sp-page .sp-card--bundle{background:linear-gradient(150deg,#3a63e8 0%,#1740c8 55%,#0b2a9e 100%);color:#fff}
.sp-page .sp-card--live{background:linear-gradient(220deg,#fff 10.34%,#fbf3e9 52.06%)}
.sp-page .sp-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sp-page .sp-card__name{font-size:16px;line-height:22.4px;font-weight:600;color:#0f172a}
.sp-page .sp-card--bundle .sp-card__name{color:#fff}
.sp-page .sp-card--live .sp-card__name{color:#202b30}
.sp-page .sp-card__chip{padding:2px 8px;border-radius:999px;border:1px solid #1d4ed8;color:#1d4ed8;font-size:12px;line-height:16px;font-weight:600;white-space:nowrap}
.sp-page .sp-card__chip--active{border-color:#16a34a;background:#16a34a;color:#fff}
.sp-page .sp-card--bundle .sp-card__chip{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.2);color:#fff}
.sp-page .sp-card--live .sp-card__chip{border-color:#f7e4c9;background:#fff;color:#b0670f}
.sp-page .sp-card__prices{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
.sp-page .sp-card__price{font-size:32px;line-height:40px;font-weight:700;color:#202b30}
.sp-page .sp-card--bundle .sp-card__price{color:#fff}
.sp-page .sp-card__was{font-size:14px;line-height:20px;color:rgba(255,255,255,.85);text-decoration:line-through}
.sp-page .sp-card__body{flex-grow:1;font-size:16px;line-height:24px}
.sp-page .sp-card__actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:8px}
.sp-page .sp-card__more{font-size:14px;line-height:20px;font-weight:600;color:#1d4ed8;text-decoration:underline;text-underline-offset:3px}
.sp-page .sp-card--bundle .sp-card__more{color:#fff}
.sp-page .sp-card__more:hover{opacity:.8}

/* Buttons */
.sp-page .sp-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border:1px solid #1e40af;border-radius:20px;background:#1d4ed8;color:#fff;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s}
.sp-page .sp-btn:hover{background:#1e40af;color:#fff}
.sp-page .sp-btn--white{border-color:#fff;background:#fff;color:#1d4ed8}
.sp-page .sp-btn--white:hover{background:#eff6ff;color:#1d4ed8}
.sp-page .sp-btn--amber{height:auto;padding:10px 16px;border:0;border-radius:40px;background:#b0670f;font-size:14px;line-height:19.6px;font-weight:700;box-shadow:0 1px 2px rgba(55,93,251,.08)}
.sp-page .sp-btn--amber span{padding:0 4px}
.sp-page .sp-btn--amber:hover{background:#8a5009}
.sp-page .sp-card--live .sp-btn--amber{align-self:flex-start;margin-top:8px}

/* ==== 1:1 mentoring strip ================================================= */
.sp-page .sp-mentoring{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-top:24px;padding:24px 28px;border-radius:16px;background:linear-gradient(220deg,#fff 10.34%,#fbf3e9 52.06%);color:#202b30}
.sp-page .sp-mentoring__text{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:4px}
.sp-page .sp-mentoring__eyebrow{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.96px;text-transform:uppercase;color:#b0670f}
.sp-page .sp-mentoring__h{font-size:20px;line-height:24px;font-weight:700;letter-spacing:-.2px;color:#202b30}
.sp-page .sp-mentoring__body{font-size:16px;line-height:24px;color:#202b30}
.sp-page .sp-mentoring .sp-btn{flex-shrink:0}

/* ==== Articles =========================================================== */
.sp-page .sp-articles{max-width:1384px;margin:80px auto 120px;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:32px}
.sp-page .sp-post{display:flex;flex-direction:column;gap:20px;width:100%;color:#0f172a;text-decoration:none}
.sp-page .sp-post__image{display:block;width:100%;height:188px;object-fit:cover;border-radius:16px}
.sp-page .sp-post__details{display:flex;flex-direction:column;gap:12px}
.sp-page .sp-post__title{font-size:24px;line-height:28px;font-weight:700;letter-spacing:-.24px;color:#0f172a;transition:color .3s}
.sp-page .sp-post:hover .sp-post__title{color:#1d4ed8}
.sp-page .sp-post__blurb{font-size:16px;line-height:24px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-page .sp-post__meta{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:#64748b}

@media (max-width:720px){
  .sp-page .sp-hero{min-height:420px}
  .sp-page .sp-hero__inner{padding:56px 20px 210px}
  .sp-page .sp-products{margin-top:-170px}
  .sp-page .sp-products,.sp-page .sp-articles{padding:0 12px}
  .sp-page .sp-cards{grid-template-columns:minmax(0,1fr)}
  .sp-page .sp-articles{grid-template-columns:minmax(0,1fr);margin:56px auto 80px}
  .sp-page .sp-mentoring{padding:20px}
}