/* RecoveryUSB — guides / articles stylesheet
   Matches site theme: yellow #f8d171, blue #024d94, dark nav, Open Sans */

.guide-body { color:#444; font-size:17px; line-height:1.7; }

/* Article hero */
.guide-hero{
  background:#2F2D2D;
  color:#fff;
  padding:150px 0 60px;
  text-align:center;
}
.guide-hero h1{
  color:#fff;
  font-size:38px;
  font-weight:700;
  margin:0 0 15px;
  line-height:1.2;
}
.guide-hero p.lead{
  color:#f8d171;
  font-size:19px;
  max-width:760px;
  margin:0 auto;
}

/* Breadcrumb */
.crumb{ font-size:14px; color:#888; padding:18px 0 0; }
.crumb a{ color:#024d94; text-decoration:none; }
.crumb a:hover{ text-decoration:underline; }

/* Article container */
.article{ max-width:820px; margin:0 auto; padding:30px 15px 60px; }
.article h2{ font-size:27px; color:#222; font-weight:700; margin:42px 0 16px; }
.article h3{ font-size:21px; color:#024d94; font-weight:600; margin:30px 0 12px; }
.article p{ margin:0 0 18px; }
.article ul, .article ol{ margin:0 0 22px; padding-left:22px; }
.article li{ margin:0 0 10px; }
.article a{ color:#024d94; }
.article strong{ color:#222; }
.article img{ max-width:100%; height:auto; border-radius:6px; margin:10px 0 24px; }

/* Symptom / callout box */
.callout{
  border-left:4px solid #f8d171;
  background:#fdf8ec;
  padding:18px 22px;
  border-radius:4px;
  margin:24px 0;
}
.callout.warn{ border-left-color:#e0533d; background:#fdf1ef; }
.callout h4{ margin:0 0 8px; font-size:17px; color:#222; font-weight:700; }
.callout p:last-child{ margin-bottom:0; }

/* "How our USB fixes this" highlight */
.fix-box{
  background:#024d94;
  color:#fff;
  border-radius:8px;
  padding:28px 30px;
  margin:34px 0;
}
.fix-box h3{ color:#f8d171; margin:0 0 12px; }
.fix-box p{ color:#eaf1f8; }
.fix-box .btn{ margin-top:10px; }

/* Step numbers */
ol.steps{ counter-reset:step; list-style:none; padding-left:0; }
ol.steps > li{
  position:relative; padding-left:46px; margin-bottom:20px;
}
ol.steps > li:before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:-2px;
  width:32px; height:32px; border-radius:50%;
  background:#f8d171; color:#024d94; font-weight:700;
  text-align:center; line-height:32px;
}

/* CTA block */
.cta{
  text-align:center; background:#fafafa; border:1px solid #eee;
  border-radius:8px; padding:34px 20px; margin:40px 0;
}
.cta h3{ color:#222; margin:0 0 10px; }
.cta p{ color:#666; margin:0 0 18px; }

/* Related grid */
.related{ background:#f7f7f7; padding:50px 0; }
.related h3{ text-align:center; margin:0 0 30px; color:#222; }
.related .card-link{
  display:block; background:#fff; border:1px solid #eee; border-radius:8px;
  padding:20px 22px; margin-bottom:24px; text-decoration:none; color:#222;
  height:100%; transition:box-shadow .2s;
}
.related .card-link:hover{ box-shadow:0 6px 22px rgba(0,0,0,.08); }
.related .card-link span{ display:block; color:#024d94; font-weight:600; font-size:16px; }
.related .card-link small{ color:#888; }

/* FAQ mini */
.faq-mini h3{ margin-top:38px; }
.faq-mini .q{ font-weight:600; color:#222; margin:20px 0 6px; }

.hub-h2{ font-size:23px; color:#222; font-weight:700; margin:38px 0 18px; padding-bottom:8px; border-bottom:2px solid #f8d171; }

.toc{ background:#fafafa; border:1px solid #eee; border-radius:6px; padding:18px 24px; margin:26px 0; }
.toc strong{ display:block; margin-bottom:8px; }
.toc a{ color:#024d94; }

@media (max-width:768px){
  .guide-hero{ padding:110px 0 40px; }
  .guide-hero h1{ font-size:28px; }
  .article{ font-size:16px; }
}