.content-main { background: var(--paper); }

.content-nav .nav-links a[aria-current="page"] { color: var(--blue); }

.content-hero {
  padding: 82px max(var(--gutter), calc((100vw - var(--content)) / 2)) 92px;
  background: var(--ink);
  color: var(--white);
}
.breadcrumbs { display: flex; align-items: center; gap: 9px; margin-bottom: 46px; color: #858b97; font: 600 .68rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.breadcrumbs a { color: #b9bfca; text-decoration: none; }
.breadcrumbs a:hover { color: var(--white); }
.content-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 8%; align-items: end; }
.content-hero h1 { max-width: 860px; margin: 0; font-size: clamp(3.3rem, 6vw, 6.5rem); font-weight: 600; letter-spacing: -.065em; line-height: .94; }
.content-hero-copy { max-width: 530px; }
.content-hero-copy > p { color: #b9bfca; font-size: 1.05rem; }
.content-hero-copy > p strong { color: var(--white); }
.content-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 28px 0 0; padding: 0; color: #7f8590; font: .68rem var(--mono); list-style: none; text-transform: uppercase; }

.guide-index-hero { padding-bottom: 76px; }
.guide-index-hero .content-hero-grid { align-items: start; }

.article-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 760px);
  gap: clamp(46px, 8vw, 110px);
  max-width: 1120px;
  margin: 0 auto;
  padding: 88px var(--gutter) 120px;
}
.article-aside { position: sticky; top: 104px; align-self: start; }
.article-aside strong { display: block; margin-bottom: 16px; font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.article-aside nav { display: grid; border-top: 1px solid var(--line); }
.article-aside a { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .78rem; text-decoration: none; }
.article-aside a:hover { color: var(--blue); }

.article-body { min-width: 0; }
.answer-card { margin-bottom: 64px; padding: 28px; border-left: 4px solid var(--blue); background: var(--white); }
.answer-card strong { display: block; margin-bottom: 9px; font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.answer-card p { margin: 0; font-size: 1.08rem; }
.article-body h2 { margin: 70px 0 18px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.article-body h3 { margin: 38px 0 10px; font-size: 1.28rem; letter-spacing: -.025em; }
.article-body p, .article-body li { color: #434852; }
.article-body p { margin-bottom: 20px; }
.article-body ul, .article-body ol { display: grid; gap: 11px; margin: 18px 0 28px; padding-left: 22px; }
.article-body li::marker { color: var(--blue); font-weight: 700; }
.article-body a:not(.button):not(.related-card) { color: var(--blue-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body hr { margin: 64px 0; border: 0; border-top: 1px solid var(--line); }

.step-list { display: grid; gap: 1px; margin: 28px 0 34px; padding: 0; background: var(--line); list-style: none; counter-reset: guide-step; }
.step-list li { position: relative; min-height: 112px; padding: 26px 26px 26px 82px; background: var(--white); counter-increment: guide-step; }
.step-list li::before { content: counter(guide-step); position: absolute; top: 28px; left: 28px; color: var(--blue); font: 700 .72rem var(--mono); }
.step-list strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 1.02rem; }

.note { margin: 30px 0; padding: 22px 24px; border: 1px solid #c7d8f8; background: #edf4ff; color: #263954; }
.note.warning { border-color: #e0c98b; background: #fff8e6; color: #4b3b12; }
.note strong { color: var(--ink); }

.article-table { width: 100%; margin: 28px 0 36px; overflow-x: auto; }
.article-table table { min-width: 650px; }
.article-table tbody th { width: 27%; }
.article-table tbody td:nth-child(2) { color: inherit; font-weight: 500; }

.source-list { padding: 22px 0 0; border-top: 1px solid var(--line); }
.source-list h2 { margin-top: 0; font-size: 1.4rem; }
.source-list li { font-size: .8rem; }

.article-cta { margin-top: 64px; padding: 34px; background: var(--ink); color: var(--white); }
.article-cta h2 { margin: 0 0 12px; font-size: 2rem; }
.article-cta p { color: #b9bfca; }

.related-section { margin-top: 78px; }
.related-section > h2 { margin-top: 0; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.related-card { display: flex; flex-direction: column; min-height: 180px; padding: 24px; border: 1px solid var(--line); background: var(--white); text-decoration: none; }
.related-card span { margin-bottom: auto; color: var(--blue); font: 600 .66rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.related-card strong { margin-top: 44px; font-size: 1.05rem; letter-spacing: -.02em; }
.related-card:hover { border-color: var(--blue); }

.guide-hub { max-width: var(--content); margin: 0 auto; padding: 90px var(--gutter) 120px; }
.guide-hub-intro { display: grid; grid-template-columns: .55fr 1.45fr; gap: 50px; margin-bottom: 50px; }
.guide-hub-intro p { max-width: 690px; color: var(--muted); }
.guide-list { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-right: 0; border-bottom: 0; }
.guide-card { display: flex; flex-direction: column; min-height: 310px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); text-decoration: none; }
.guide-card:first-child { grid-column: 1 / -1; min-height: 360px; background: var(--ink); color: var(--white); }
.guide-card .topic { color: var(--blue); font: 600 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.guide-card h2 { max-width: 720px; margin: auto 0 14px; font-size: clamp(1.7rem, 3vw, 2.8rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
.guide-card p { max-width: 620px; margin: 0; color: var(--muted); }
.guide-card:first-child p { color: #aeb4c0; }
.guide-card:first-child .topic { color: #8bb7ff; }
.guide-card:hover { outline: 1px solid var(--blue); outline-offset: -1px; }

.compare-intro { max-width: var(--content); margin: 0 auto; padding: 80px var(--gutter) 32px; }
.compare-intro h2 { max-width: 720px; margin-bottom: 18px; font-size: clamp(2.2rem, 4vw, 3.8rem); letter-spacing: -.05em; line-height: 1; }
.compare-intro p { max-width: 760px; color: var(--muted); }
.competitor-table { max-width: var(--content); margin: 0 auto; padding: 24px var(--gutter) 100px; }
.competitor-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.competitor-table table { min-width: 960px; }
.competitor-table tbody th { width: 20%; }
.competitor-table td { vertical-align: top; }
.competitor-table .recommended { background: #eef4ff; }
.competitor-table thead .recommended { background: var(--blue); color: var(--white); }
.competitor-table small { display: block; margin-top: 5px; color: var(--muted); font-weight: 400; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter) 110px; }
.choice-card { padding: 30px; border: 1px solid var(--line); background: var(--white); }
.choice-card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.choice-card p { margin: 0; color: var(--muted); }

@media (max-width: 820px) {
  .content-hero-grid, .article-shell, .guide-hub-intro { grid-template-columns: 1fr; }
  .content-hero-grid { gap: 34px; }
  .article-aside { position: static; }
  .article-aside nav { grid-template-columns: repeat(2, 1fr); }
  .article-aside a:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 12px; }
  .article-aside a:nth-child(even) { padding-left: 12px; }
}

@media (max-width: 620px) {
  .content-hero { padding: 54px 18px 64px; }
  .breadcrumbs { margin-bottom: 34px; }
  .content-hero h1 { font-size: clamp(2.85rem, 13vw, 4.1rem); }
  .article-shell { gap: 44px; padding: 58px 18px 90px; }
  .article-aside nav { grid-template-columns: 1fr; }
  .article-aside a:nth-child(odd) { border-right: 0; padding-right: 0; }
  .article-aside a:nth-child(even) { padding-left: 0; }
  .answer-card { padding: 22px; }
  .step-list li { padding: 22px 20px 22px 64px; }
  .step-list li::before { top: 24px; left: 21px; }
  .related-grid, .guide-list, .choice-grid { grid-template-columns: 1fr; }
  .guide-card:first-child { grid-column: auto; }
  .guide-hub { padding: 68px 18px 90px; }
  .guide-card, .guide-card:first-child { min-height: 280px; padding: 25px; }
  .compare-intro { padding: 68px 18px 24px; }
  .competitor-table { padding: 18px 18px 76px; }
  .choice-grid { padding: 0 18px 88px; }
}