.portal-guides {
  background: var(--portal-bg);
  color: var(--portal-ink);
}

.portal-guides .portal-header-main { min-height: 90px; }
.portal-guides .portal-logo { min-width: 184px; font-size: 25px; }
.portal-guides .portal-logo-mark { width: 48px; height: 48px; }
.portal-guides .portal-header-search { max-width: 620px; }
.guides-category-nav { min-width: 220px; justify-content: flex-start; gap: 12px; padding-left: 28px; background: #245f9d; font-size: 15px; }
.guides-category-nav span { font-size: 21px; }

.portal-guides .guides-main {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 34px 0 76px;
}

.portal-guides .guides-container {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
}

.portal-guides .guides-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 38px;
  align-items: center;
  min-height: 400px;
  margin: 0;
  padding: 56px;
  border: 0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 16% 22%, rgba(114, 180, 239, .14) 0 55px, transparent 56px),
    radial-gradient(circle at 86% 70%, rgba(255, 255, 255, .07) 0 90px, transparent 91px),
    linear-gradient(125deg, #11263f, #244b69 60%, #315d77);
  color: #fff;
  box-shadow: var(--portal-shadow);
}

.portal-guides .guides-hero .eyebrow {
  margin-bottom: 14px;
  color: #9dcbff;
  font-size: 11px;
  letter-spacing: .13em;
}

.portal-guides .guides-hero h1 {
  max-width: 720px;
  margin: 0;
  color: #e7f3c2;
  background: linear-gradient(90deg, #d8f3c6, #ffe4a5 58%, #f5c993);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.portal-guides .guides-hero .hero-copy {
  max-width: 760px;
  margin-top: 20px;
  color: rgba(235, 244, 255, .76);
  font-size: 14px;
  line-height: 1.9;
}

.portal-guides .guides-hero .hero-panel {
  align-self: stretch;
  display: grid;
  align-content: center;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  backdrop-filter: blur(12px);
  box-shadow: none;
}

.portal-guides .hero-panel-label { color: #9dcbff; }
.portal-guides .hero-panel-value { color: #fff; font-size: 34px; }
.portal-guides .hero-panel-meta { color: rgba(255, 255, 255, .68); border-color: rgba(255, 255, 255, .14); }

.portal-guides .guide-index {
  margin-top: 28px;
  padding: 28px;
  border: 1px solid var(--portal-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--portal-shadow);
}

.portal-guides .section-heading h2 { font-size: 27px; }
.portal-guides .section-heading p { color: var(--portal-muted); }

.portal-guides .guide-index-card {
  position: relative;
  overflow: hidden;
  border-color: var(--portal-line);
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #f8fbff);
}

.portal-guides .guide-index-card:hover,
.portal-guides .guide-index-card:focus-visible {
  border-color: #a9d0f7;
  box-shadow: 0 16px 34px rgba(36, 95, 157, .14);
  transform: translateY(-5px);
}

.portal-guides .guide-index-number,
.portal-guides .guide-index-count { color: var(--portal-blue-dark); }

.portal-guides .guide-content { margin-top: 28px; }
.portal-guides .guide-article {
  overflow: hidden;
  border-color: var(--portal-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--portal-shadow);
}

.portal-guides .guide-hero { padding: 34px; }
.portal-guides .guide-article.orange .guide-hero { background: linear-gradient(120deg, #fff4eb, #fff 72%); }
.portal-guides .guide-article.blue .guide-hero { background: linear-gradient(120deg, #eaf5ff, #fff 72%); }
.portal-guides .guide-article.violet .guide-hero { background: linear-gradient(120deg, #f1edff, #fff 72%); }
.portal-guides .guide-article.gold .guide-hero { background: linear-gradient(120deg, #fff6dc, #fff 72%); }

.portal-guides .mini-product {
  position: relative;
  overflow: hidden;
  border-color: var(--portal-line);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.portal-guides .mini-product:hover,
.portal-guides .mini-product:focus-visible {
  border-color: #a9d0f7;
  box-shadow: 0 12px 28px rgba(36, 95, 157, .13);
  transform: translateY(-3px);
}

.portal-guides .guide-disclaimer {
  margin-top: 28px;
  border-color: #b9d9f8;
  background: #edf7ff;
  color: #536274;
}

@media (max-width: 960px) {
  .portal-guides .portal-header-search { display: none; }
  .portal-guides .guides-hero { grid-template-columns: 1fr; }
  .portal-guides .guides-hero .hero-panel { min-height: 170px; }
}

@media (max-width: 680px) {
  .portal-guides .portal-header-main,
  .portal-guides .portal-nav-inner,
  .portal-guides .guides-container,
  .portal-guides .portal-footer-inner { width: min(100% - 24px, 1240px); }
  .portal-guides .portal-header-main { min-height: 72px; }
  .portal-guides .portal-logo { min-width: 0; font-size: 19px; }
  .portal-guides .portal-logo-mark { width: 40px; height: 40px; }
  .portal-guides .portal-header-actions .portal-button:not(.dark) { display: none; }
  .guides-category-nav { min-width: 170px; padding-left: 18px; }
  .portal-guides .guides-main { padding-top: 20px; }
  .portal-guides .guides-hero { min-height: 0; padding: 36px 24px; }
  .portal-guides .guide-index { padding: 22px 18px; }
}