/* Shared editorial surface: uses the landing's font, palette and controls. */
.guides-page { background: var(--bg); }
.breadcrumbs { padding: 28px 0 0; color: #475569; font-size: .78rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: '/'; margin-right: 8px; color: #64748b; }
.breadcrumbs a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.guide-hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; padding-block: 48px 72px; }
.guide-topic { margin: 22px 0 10px; color: #475569; font-size: .8rem; font-weight: 700; }
.guide-hero h1, .guide-hub-hero h1 { margin: 0 0 24px; font-size: clamp(2.3rem, 4vw, 3.5rem); line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; }
.guide-lead, .guide-hub-hero > p { color: #475569; font-size: 1rem; line-height: 1.8; }
.guide-byline { margin-top: 24px; font-size: .73rem; color: #475569; }
.guide-visual { min-width: 0; margin: 0; padding: 16px; background: #0f172a; border-radius: 18px; box-shadow: var(--shadow); }
.guide-visual-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; color: #a5f3fc; font-size: .64rem; letter-spacing: .08em; font-weight: 800; }
.guide-visual img { width: 100%; height: auto; border-radius: 8px; }
.guide-visual figcaption { margin-top: 14px; color: #cbd5e1; font-size: .72rem; line-height: 1.6; }
.guide-visual-mobile img { width: auto; max-height: 410px; margin-inline: auto; }
.guide-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 56px; padding-bottom: 64px; }
.guide-toc { position: sticky; top: 100px; border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: #fff; }
.guide-toc > strong { display: block; margin-bottom: 16px; }
.guide-toc ol { padding-left: 18px; margin: 0; color: #475569; }
.guide-toc li { margin-bottom: 14px; font-size: .82rem; line-height: 1.55; }
.guide-toc a { text-decoration: none; }
.guide-toc a:hover, .guide-link-card a:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 4px; }
.guide-toc-demo { display: block; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 20px; font-size: .78rem; font-weight: 800; color: #0e7490; }
.guide-body { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 8px 40px 32px; }
.guide-section, .guide-faq { padding-block: 32px; scroll-margin-top: 100px; }
#guia { scroll-margin-top: 100px; }
.guide-section + .guide-section, .guide-faq { border-top: 1px solid var(--line); }
.guide-number { color: #0e7490; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.guide-section h2, .guide-faq h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.3; letter-spacing: -.025em; margin: 10px 0 16px; }
.guide-section p, .guide-section li { color: #475569; line-height: 1.85; }
.guide-section p { margin: 0; }
.guide-section ul { padding: 18px 22px 18px 38px; margin: 22px 0 0; border-radius: 12px; background: var(--tint); }
.guide-section li + li { margin-top: 10px; }
.guide-section li::marker { color: #0e7490; }
.guide-related, .guide-library { padding-block: 24px 72px; }
.guide-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.guide-link-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 28px; }
.guide-link-card h3 { font-size: 1.2rem; line-height: 1.3; margin: 18px 0 10px; }
.guide-link-card h3 a { text-decoration: none; }
.guide-link-card p { color: #475569; font-size: .88rem; margin: 0 0 24px; }
.guide-card-hint { margin-top: auto; color: #0e7490; font-size: .78rem; font-weight: 800; }
.guide-demo { display: grid; grid-template-columns: 1fr auto; gap: 24px 64px; align-items: center; margin-bottom: 72px; padding: 48px; border-radius: 22px; background: var(--text); color: #fff; }
.guide-demo h2 { max-width: 700px; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.2; letter-spacing: -.035em; margin: 14px 0; }
.guide-demo p { max-width: 660px; color: #cbd5e1; margin-bottom: 0; }
.guide-demo small { grid-column: 1 / -1; color: #cbd5e1; font-size: .74rem; border-top: 1px solid #334155; padding-top: 20px; }
.guide-hub-hero { padding-block: 56px 40px; max-width: 1180px; }
.guide-hub-hero h1 { margin-top: 24px; max-width: 860px; }
.guide-hub-hero h1 em { font-style: normal; color: #0e7490; }
.guide-hub-hero > p { max-width: 720px; }
@media (max-width: 1000px) {
  .guide-hero { gap: 28px; }
  .guide-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
  .guide-body { padding-inline: 24px; }
  .guide-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .guide-hero, .guide-layout, .guide-demo { grid-template-columns: 1fr; }
  .guide-hero { padding-block: 32px 40px; }
  .guide-hero .actions { justify-content: flex-start; flex-wrap: wrap; }
  .guide-hero h1 { font-size: 2.25rem; }
  .guide-toc { position: static; }
  .guide-body { padding-inline: 22px; }
  .guide-card-grid { grid-template-columns: 1fr; }
  .guide-demo { padding: 28px 22px; gap: 24px; }
  .guide-demo > .button { justify-self: start; }
  .guide-related, .guide-library { padding-bottom: 40px; }
}