.guideGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  margin-top:18px;
}

.guideCard,
.seriesCard{
  display:block;
  padding:18px;
  border:1px solid rgba(15, 23, 42, 0.10);
  border-radius:16px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.guideCard:hover,
.seriesCard:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(15, 23, 42, 0.08);
  border-color:rgba(15, 23, 42, 0.16);
}

.guideCard h2{
  margin:0 0 8px;
  font-size:20px;
  line-height:1.2;
}

.guideCard h3,
.seriesCard h3{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.2;
}

.guideCard p,
.seriesCard p{
  margin:0;
}

.guideSection{
  margin-top:18px;
}

.seriesGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin-top:14px;
}

.reading{
  max-width:980px;
}

.reading .auth-hero{
  margin-bottom:20px;
}

.reading .auth-hero .muted{
  max-width:760px;
}

.reading .auth-hero h1{
  margin-bottom:10px;
}

.reading p{
  font-size:16px;
  line-height:1.7;
}

.reading ul,
.reading ol{
  padding-left:22px;
}

.reading li{
  font-size:16px;
  line-height:1.7;
}

.reading li + li{
  margin-top:10px;
}

.reading .card,
.reading .guideSection{
  margin-bottom:20px;
  border-radius:18px;
}

.reading .card p + p{
  margin-top:10px;
}

.reading .card h2{
  margin-top:0;
  margin-bottom:12px;
}

.reading .card h2 + p{
  margin-top:0;
}

.highlightCard{
  border:1px solid rgba(15, 23, 42, 0.10);
  background:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.guideJumpLinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.guideJumpLinks a,
.guideJumpLinks .current{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  border:1px solid #d9d9d9;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
}

.guideJumpLinks a{
  background:#fff;
  color:#111;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}

.guideJumpLinks a:hover{
  background:#f7f7f7;
  border-color:#cfcfcf;
  transform:translateY(-1px);
}

.guideJumpLinks .current{
  background:#f1f1f1;
  color:#666;
  cursor:default;
}

@media (max-width:700px){
  .guideGrid,
  .seriesGrid{
    grid-template-columns:1fr;
  }

  .guideCard,
  .seriesCard{
    padding:16px;
  }

  .reading p,
  .reading li{
    font-size:15px;
    line-height:1.65;
  }

  .reading .card,
  .reading .guideSection{
    margin-bottom:16px;
  }

  .guideJumpLinks{
    gap:8px;
  }

  .guideJumpLinks a,
  .guideJumpLinks .current{
    width:100%;
  }
}
/* Breadcrumbs */
.breadcrumbs {
  font-size: 14px;
  margin-bottom: 10px;
  color: #777;
}

.breadcrumbs a {
  color: #aaa;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* Section nav */
.section-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.section-nav a {
  padding: 6px 12px;
  border-radius: 6px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.section-nav a.active {
  background: #444;
  pointer-events: none;
}

/* Content breadcrumbs */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 10px;
  font-size: 14px;
  color: #8a8a8a;
}

.breadcrumbs a {
  color: #8a8a8a;
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: #111;
  text-decoration: underline;
}

.breadcrumbs span {
  color: #555;
  font-weight: 600;
}

/* Section label */
.section-label {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Section nav */
.section-nav {
  display: flex;
  gap: 8px;
  margin: 0 0 22px;
  flex-wrap: wrap;
}

.section-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  background: #f7f7f7;
  color: #222;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.section-nav a:hover {
  background: #fff;
  border-color: #bdbdbd;
  transform: translateY(-1px);
}

.section-nav a.active {
  background: #111;
  border-color: #111;
  color: #fff;
  pointer-events: none;
}

/* Mobile tidy */
@media (max-width: 700px) {
  .breadcrumbs {
    font-size: 13px;
    gap: 6px;
  }

  .section-nav {
    gap: 7px;
  }

  .section-nav a {
    min-height: 38px;
    padding: 0 13px;
    font-size: 13px;
  }
}