:root {
  --guide-ink: #111311;
  --guide-muted: #5e655f;
  --guide-line: #dfe3df;
  --guide-paper: #f7f7f3;
  --guide-accent: #dfff00;
}

.guide-hero {
  background: #0a0b0a;
  color: #fff;
  padding: clamp(112px, 14vw, 168px) 20px clamp(64px, 9vw, 108px);
}

.guide-shell {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.guide-hero__inner { max-width: 860px; }
.guide-kicker {
  margin: 0 0 18px;
  color: var(--guide-accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.guide-hero h1 {
  max-width: 900px;
  margin: 0;
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: clamp(2.35rem, 6vw, 5.7rem);
  line-height: .96;
  letter-spacing: -.055em;
}
.guide-deck {
  max-width: 740px;
  margin: 28px 0 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.6;
}
.guide-meta { margin-top: 24px; color: rgba(255,255,255,.58); font-size: .9rem; }

.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(48px, 8vw, 104px);
  align-items: start;
  padding-block: clamp(64px, 8vw, 112px);
}
.guide-article { max-width: 760px; }
.guide-article h2 {
  margin: 2.2em 0 .65em;
  color: var(--guide-ink);
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.guide-article h3 { margin: 1.7em 0 .55em; font-size: 1.2rem; }
.guide-article p, .guide-article li { color: #353a36; font-size: 1.04rem; line-height: 1.78; }
.guide-article a { color: #1e4f32; text-decoration: underline; text-underline-offset: 3px; }
.guide-article ul, .guide-article ol { padding-left: 1.35rem; }
.guide-answer {
  margin-bottom: 42px;
  padding: 28px;
  border: 1px solid var(--guide-line);
  border-left: 5px solid var(--guide-ink);
  border-radius: 18px;
  background: var(--guide-paper);
}
.guide-answer strong { display: block; margin-bottom: 8px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.guide-answer p { margin: 0; color: var(--guide-ink); font-size: 1.14rem; line-height: 1.62; }
.guide-note {
  margin: 32px 0;
  padding: 22px 24px;
  border-radius: 16px;
  background: #eef4ee;
}
.guide-note p { margin: 0; }
.guide-table { width: 100%; margin: 26px 0 38px; border-collapse: collapse; }
.guide-table th, .guide-table td { padding: 16px; border: 1px solid var(--guide-line); text-align: left; vertical-align: top; }
.guide-table th { background: var(--guide-paper); color: var(--guide-ink); }
.guide-aside { position: sticky; top: 112px; display: grid; gap: 16px; }
.guide-aside__card { padding: 22px; border: 1px solid var(--guide-line); border-radius: 18px; background: #fff; }
.guide-aside__card h2 { margin: 0 0 12px; font-size: 1rem; }
.guide-aside__card p { margin: 0 0 16px; color: var(--guide-muted); font-size: .9rem; line-height: 1.55; }
.guide-aside__card a { font-weight: 700; color: var(--guide-ink); }
.guide-sources { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--guide-line); }
.guide-sources h2 { margin-top: 0; font-size: 1.35rem; }
.guide-sources li { margin-bottom: 10px; font-size: .94rem; }
.guide-disclaimer { color: var(--guide-muted) !important; font-size: .88rem !important; }

.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding-block: clamp(56px, 8vw, 96px);
}
.guide-card { display: flex; flex-direction: column; min-height: 300px; padding: 32px; border: 1px solid var(--guide-line); border-radius: 24px; background: #fff; color: var(--guide-ink); }
.guide-card:hover { border-color: #aab1aa; transform: translateY(-2px); }
.guide-card__kicker { color: var(--guide-muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.guide-card h2 { margin: auto 0 14px; font-family: "Montserrat", sans-serif; font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -.04em; line-height: 1.05; }
.guide-card p { margin: 0 0 22px; color: var(--guide-muted); line-height: 1.6; }
.guide-card__link { font-weight: 800; }

@media (max-width: 820px) {
  .guide-shell { width: min(100% - 32px, 1120px); }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .guide-aside { grid-template-columns: 1fr; }
  .guide-answer { padding: 22px; }
  .guide-table { display: block; overflow-x: auto; }
}