/* Guide hub and article styles share the main site system. */
.guide-hub-hero .container,
.article-hero .container,
.guide-category-hero .container {
  width: min(var(--container), calc(100% - 40px));
}

.guide-hub-hero-shell {
  max-width: 860px;
  padding: 8px 0;
}

.guide-hero-note {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.02rem;
}

.guide-hero-search {
  max-width: 820px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.guide-search-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-weight: 800;
}

.guide-search-row,
.guide-board-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
  gap: 12px;
  align-items: start;
}

.guide-search-row input,
.guide-search-row select,
.guide-hero-search input,
.guide-board-toolbar select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.guide-search-row input:focus,
.guide-search-row select:focus,
.guide-hero-search input:focus,
.guide-board-toolbar select:focus {
  border-color: var(--primary);
  outline: 2px solid rgba(40, 86, 63, 0.2);
}

.popular-search-chips,
.guide-filter-group,
.popular-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.guide-chip,
.popular-search-chips button,
.popular-topic-list button,
.share-link-button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 750;
  cursor: pointer;
}

.guide-chip:hover,
.guide-chip:focus,
.guide-chip.is-active,
.popular-search-chips button:hover,
.popular-search-chips button:focus,
.popular-topic-list button:hover,
.popular-topic-list button:focus,
.share-link-button:hover,
.share-link-button:focus {
  border-color: var(--primary);
  color: var(--primary-hover);
}

.guide-category-grid,
.guide-featured-grid,
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.guide-category-card,
.guide-card,
.guide-feature-card,
.guide-topic-card,
.popular-topics-card,
.guide-side-cta,
.technician-note,
.answer-box,
.article-summary-card,
.article-content,
.article-toc-desktop,
.article-toc-mobile,
.article-review-block,
.related-service-cta {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.guide-category-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.guide-category-card:hover,
.guide-category-card:focus,
.guide-card:hover,
.guide-feature-card:hover,
.guide-topic-card:hover {
  border-color: var(--line-strong);
}

.guide-category-icon,
.guide-topic-icon {
  width: 32px;
  height: 32px;
  color: var(--primary);
}

.guide-icon {
  width: 100%;
  height: 100%;
}

.guide-category-name,
.guide-feature-title,
.guide-topic-title,
.guide-card-title,
.article-card-title,
.related-service-title {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.25;
}

.guide-feature-title,
.guide-topic-title,
.guide-card-title,
.related-service-title {
  font-size: 1.16rem;
}

.guide-category-copy,
.guide-category-count,
.guide-card p,
.guide-feature-card p,
.guide-topic-card p,
.technician-note p,
.guide-side-cta p {
  color: var(--muted);
}

.guide-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.guide-card-media,
.guide-feature-media,
.article-hero-image {
  width: 100%;
  min-height: 180px;
  background: var(--surface-alt);
}

.guide-card-media img,
.guide-feature-media img,
.article-hero-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.guide-card-body,
.guide-feature-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.guide-card-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.guide-badge,
.article-category {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: none;
}

.guide-meta-list,
.article-meta,
.guide-topic-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.guide-meta-list div,
.article-meta div,
.guide-topic-meta div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
}

.guide-meta-list dt,
.article-meta dt,
.guide-topic-meta dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.guide-meta-list dd,
.article-meta dd,
.guide-topic-meta dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 750;
}

.guide-card-link,
.guide-topic-cta {
  margin-top: auto;
  color: var(--primary);
  font-weight: 900;
}

.guide-feature-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1fr);
  overflow: hidden;
}

.guide-board-section {
  background: var(--surface-alt);
}

.guide-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 24px;
  align-items: start;
}

.guide-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.guide-results-head p[data-guide-count] {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.guide-board-toolbar {
  margin-bottom: 14px;
}

.guide-flair-row {
  margin-top: 0;
}

.guide-topic-list {
  display: grid;
  gap: 12px;
}

.guide-topic-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(150px, 0.28fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
}

.guide-topic-meta {
  grid-template-columns: 1fr;
}

.guide-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.guide-topic-cta {
  grid-column: 2 / -1;
}

.guide-empty {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.guide-rail {
  display: grid;
  gap: 14px;
}

.popular-topics-card,
.guide-side-cta,
.technician-note {
  padding: 18px;
}

.guide-side-cta .btn {
  width: 100%;
  margin-top: 10px;
}

.trust-note-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 24px;
  align-items: start;
}

.article-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.article-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: 42px;
  align-items: center;
  padding: 44px 0;
}

.article-hero h1 {
  margin-top: 12px;
  font-size: clamp(2rem, 3.5vw, 3.35rem);
}

.article-hero-media {
  margin: 0;
}

.article-hero-media figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.article-answer-section,
.article-body-section {
  background: var(--bg);
}

.article-answer-wrap {
  display: grid;
  gap: 16px;
}

.answer-box {
  padding: 20px;
}

.article-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.article-summary-card,
.article-review-block,
.related-service-cta {
  padding: 18px;
}

.article-check-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 20px;
}

.warning-box {
  border-color: #cdb48a;
  background: #fffaf0;
}

.article-shell {
  display: grid;
  grid-template-columns: minmax(0, 800px) minmax(220px, 0.32fr);
  gap: 28px;
  align-items: start;
}

.article-shell > *,
.article-content,
.article-toc-mobile {
  min-width: 0;
}

.article-content {
  max-width: 100%;
  padding: 24px;
}

.article-content h2 {
  margin-top: 34px;
}

.article-content h2:first-child {
  margin-top: 0;
}

.article-content h3 {
  margin-top: 26px;
}

.article-content p,
.article-content li {
  color: #3d403b;
}

.article-sidebar {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 12px;
}

.article-toc-desktop,
.article-toc-mobile {
  padding: 16px;
}

.article-toc-mobile {
  display: none;
  margin-bottom: 18px;
}

.article-toc-title {
  margin: 0 0 10px;
  color: var(--ink);
  font-weight: 900;
}

.article-toc-desktop nav,
.article-toc-mobile nav {
  display: grid;
  gap: 7px;
}

.article-toc-desktop a,
.article-toc-mobile a {
  color: var(--muted);
  font-size: 0.93rem;
}

.article-toc-desktop a.is-active,
.article-toc-mobile a.is-active,
.article-toc-desktop a[aria-current="true"],
.article-toc-mobile a[aria-current="true"] {
  color: var(--primary);
  font-weight: 800;
}

.article-step-list,
.article-subsection-group {
  display: grid;
  gap: 14px;
}

.article-step-card,
.article-subsection {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
}

.article-step-title {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
}

.guide-table-wrap {
  width: 100%;
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.guide-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: var(--surface);
}

.guide-table th,
.guide-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.guide-table th {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 900;
}

.related-service-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.service-link-list,
.related-guides {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.service-link-list a,
.related-guides a {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 700;
}

.source-links ul {
  padding-left: 20px;
}

.guide-grid-compact .guide-card-media {
  min-height: 130px;
}

@media (max-width: 980px) {
  .guide-feature-card,
  .guide-board-layout,
  .trust-note-grid,
  .article-hero-grid,
  .article-shell,
  .related-service-cta {
    grid-template-columns: 1fr;
  }

  .article-sidebar {
    position: static;
  }

  .article-toc-desktop {
    display: none;
  }

  .article-toc-mobile {
    display: block;
  }

  .article-summary-grid,
  .guide-category-grid,
  .guide-featured-grid,
  .guide-grid {
    grid-template-columns: 1fr;
  }

  .guide-topic-card {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .guide-topic-meta,
  .guide-topic-cta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .guide-hub-hero .container,
  .article-hero .container,
  .guide-category-hero .container {
    width: min(100% - 24px, var(--container));
  }

  .guide-search-row,
  .guide-board-toolbar,
  .guide-meta-list {
    grid-template-columns: 1fr;
  }

  .guide-hero-search,
  .article-content {
    padding: 16px;
  }

  .article-hero h1 {
    font-size: 1.9rem;
  }
}

/* Experimental guide layer: same authority palette, stronger publishing feel. */
.guide-hub-hero,
.guide-category-hero,
.article-hero {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: #f7fbf2;
  border-bottom: 0;
}

.guide-hub-hero::before,
.guide-category-hero::before,
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(8px, 1.2vw, 16px);
  background: var(--accent);
}

.guide-hub-hero::after,
.guide-category-hero::after,
.article-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(40vw, 460px);
  height: 14px;
  background: var(--green-hot);
}

.guide-hub-hero .container,
.guide-category-hero .container,
.article-hero .container {
  position: relative;
  z-index: 1;
}

.guide-hub-hero h1,
.guide-category-hero h1,
.article-hero h1 {
  color: #fff;
}

.guide-hero-note,
.article-hero-media figcaption {
  color: #dce8dd;
}

.guide-hero-search {
  border-color: rgba(132, 214, 66, 0.34);
  background: #fff7df;
  box-shadow: 10px 10px 0 rgba(132, 214, 66, 0.16);
}

.guide-search-label {
  color: #07151d;
}

.guide-search-row input,
.guide-search-row select,
.guide-hero-search input,
.guide-board-toolbar select {
  border-color: #98a986;
  background: #fffdf7;
}

.popular-search-chips button,
.popular-topic-list button,
.guide-chip,
.share-link-button {
  border-color: #9ca985;
  background: rgba(255, 250, 240, 0.88);
}

.popular-search-chips button:hover,
.popular-search-chips button:focus,
.popular-topic-list button:hover,
.popular-topic-list button:focus,
.guide-chip:hover,
.guide-chip:focus,
.guide-chip.is-active,
.share-link-button:hover,
.share-link-button:focus {
  border-color: var(--primary);
  background: #e6f6d5;
  color: #07151d;
}

.guide-category-card,
.guide-card,
.guide-feature-card,
.guide-topic-card,
.popular-topics-card,
.guide-side-cta,
.technician-note,
.answer-box,
.article-summary-card,
.article-content,
.article-toc-desktop,
.article-toc-mobile,
.article-review-block,
.related-service-cta {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(7, 21, 29, 0.04);
}

.guide-category-card,
.guide-card,
.guide-feature-card,
.guide-topic-card,
.article-summary-card,
.answer-box,
.article-content {
  position: relative;
}

.guide-category-card::before,
.guide-card::before,
.guide-feature-card::before,
.guide-topic-card::before,
.article-summary-card::before,
.answer-box::before,
.article-content::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--primary);
}

.warning-box {
  border-color: #d8a338;
  background: #fff2cc;
}

.warning-box::before {
  background: var(--accent);
}

.guide-category-icon,
.guide-topic-icon {
  color: #00895f;
}

.guide-badge,
.article-category {
  border-color: rgba(132, 214, 66, 0.36);
  background: #e6f6d5;
  color: #07151d;
}

.article-meta div,
.guide-meta-list div,
.guide-topic-meta div,
.article-step-card,
.article-subsection {
  border-color: #c7d0bd;
  background: #eef3e6;
}

.guide-board-section,
.article-answer-section,
.article-body-section {
  background: var(--bg);
}

.article-hero-image {
  border: 1px solid rgba(132, 214, 66, 0.34);
  background: #10252a;
  box-shadow: 12px 12px 0 rgba(132, 214, 66, 0.15);
}

.article-hero-image img {
  filter: saturate(1.16) contrast(1.05);
}

.guide-table-wrap {
  border-color: #aebc9c;
}

.guide-table th {
  background: #dce5d3;
}

.service-link-list a,
.related-guides a {
  border-color: #aebc9c;
  background: #e6f6d5;
}

@media (max-width: 980px) {
  .article-hero-grid {
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .guide-hub-hero,
  .guide-category-hero,
  .article-hero {
    padding-bottom: 8px;
  }

  .guide-hub-hero h1,
  .guide-category-hero h1 {
    font-size: clamp(2.1rem, 10vw, 3.25rem);
  }

  .article-hero-grid {
    padding: 30px 0 34px;
  }

  .article-hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.25rem);
    line-height: 1.02;
  }

  .article-hero-media {
    display: none;
  }

  .article-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-meta div {
    padding: 8px;
  }

  .article-hero-image {
    box-shadow: 7px 7px 0 rgba(132, 214, 66, 0.16);
  }
}

/* Professional guide correction aligned with the main site pass. */
.guide-hub-hero,
.guide-category-hero,
.article-hero {
  background: #fffdf7;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.guide-hub-hero::before,
.guide-hub-hero::after,
.guide-category-hero::before,
.guide-category-hero::after,
.article-hero::before,
.article-hero::after {
  display: none;
}

.guide-hub-hero h1,
.guide-category-hero h1,
.article-hero h1 {
  color: var(--ink);
}

.guide-hero-note,
.article-hero-media figcaption {
  color: #46534e;
}

.guide-hero-search,
.guide-category-card,
.guide-card,
.guide-feature-card,
.guide-topic-card,
.popular-topics-card,
.guide-side-cta,
.technician-note,
.answer-box,
.article-summary-card,
.article-content,
.article-toc-desktop,
.article-toc-mobile,
.article-review-block,
.related-service-cta {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

.guide-category-card::before,
.guide-card::before,
.guide-feature-card::before,
.guide-topic-card::before,
.article-summary-card::before,
.answer-box::before,
.article-content::before {
  display: none;
}

.guide-hero-search {
  box-shadow: none;
}

.popular-search-chips button,
.popular-topic-list button,
.guide-chip,
.share-link-button {
  border-color: #c8d0c4;
  background: #f8f8f0;
  color: #26302c;
}

.popular-search-chips button:hover,
.popular-search-chips button:focus,
.popular-topic-list button:hover,
.popular-topic-list button:focus,
.guide-chip:hover,
.guide-chip:focus,
.guide-chip.is-active,
.share-link-button:hover,
.share-link-button:focus {
  border-color: var(--primary);
  background: #eef5ed;
  color: var(--primary-hover);
}

.guide-badge,
.article-category {
  border-color: #c8d0c4;
  background: #f8f8f0;
  color: var(--primary-hover);
}

.article-meta div,
.guide-meta-list div,
.guide-topic-meta div,
.article-step-card,
.article-subsection {
  border-color: #d2dacd;
  background: #f2f5ee;
}

.warning-box {
  border-color: #d7c49f;
  background: #fff8e8;
}

.article-hero-image {
  border-color: #c5cec2;
  background: #e9eee6;
  box-shadow: none;
}

.guide-table-wrap {
  border-color: var(--line);
}

.guide-table th {
  background: var(--surface-alt);
}

.service-link-list a,
.related-guides a {
  border-color: #c8d0c4;
  background: #f8f8f0;
  color: var(--ink);
}

@media (max-width: 640px) {
  .article-hero-grid {
    padding: 30px 0 34px;
  }

  .article-hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.25rem);
    line-height: 1.04;
  }

  .article-hero-media {
    display: none;
  }
}

/* Minimum-requirements grid with icons (reusable across guides) */
.req-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 8px;
}

.req-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid #d2dacd;
  border-radius: 8px;
  background: #f2f5ee;
}

.req-icon {
  width: 30px;
  height: 30px;
  color: var(--primary);
}

.req-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.req-body {
  min-width: 0;
}

.req-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.req-val {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 750;
}

.req-flag {
  margin: 6px 0 0;
  color: #9a3412;
  font-size: 0.8rem;
  font-weight: 750;
}

.req-card.is-blocker {
  border-color: #d7c49f;
  background: #fff8e8;
}

@media (max-width: 640px) {
  .req-grid {
    grid-template-columns: 1fr;
  }
}

/* Larger, more readable article body text */
.article-content p,
.article-content li {
  font-size: 1.1rem;
  line-height: 1.75;
}

.answer-box p {
  font-size: 1.1rem;
  line-height: 1.7;
}

.article-check-list li {
  font-size: 1.02rem;
  line-height: 1.55;
}

/* Robust related-service CTA: stack content and actions so buttons never squish */
.related-service-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.related-service-cta .hero-actions,
.related-service-cta .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.related-service-cta .btn {
  white-space: nowrap;
}

/* Featured guides: adapt column count to number of cards so the horizontal
   feature cards never get squished into a too-narrow, over-tall column. */
.guide-featured-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
}

/* Featured card: stack the image as a full-width banner on top, with the text
   at full width below. A 3:2 banner matches the screenshot ratio almost
   exactly (minimal crop) and suits the photo too, so the image fits its box
   instead of the box stretching to a portrait shape that crops the image. */
.guide-feature-card {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.guide-feature-media {
  align-self: stretch;
  min-height: 0;
  background: var(--surface-alt);
}

.guide-feature-media picture {
  display: block;
  width: 100%;
}

.guide-feature-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Article body sections are plain <section> elements, so they inherit the
   global `section { background: var(--bg); padding: 56px 0 }` rule and render
   as grey boxes inside the white article card. Reset them to transparent and
   give them tidy vertical spacing instead. */
.article-content .article-block {
  background: transparent;
  padding: 0;
  margin: 0 0 30px;
}

.article-content .article-block:last-child {
  margin-bottom: 0;
}

/* Align the article body with the 3-up summary grid above it: use the same
   3-column track and 16px gap, with the content spanning the first two columns
   and the sidebar sitting under the third card. This lines the sidebar's edges
   up with the "summary" cards above and lets the content fill the left 2/3. */
@media (min-width: 981px) {
  .article-shell {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .article-content {
    grid-column: span 2;
  }

  .article-sidebar {
    grid-column: span 1;
  }
}