/* gn-rhythm.css: loaded last on every page.
   1. One breadcrumb component (.gn-crumbs), generated by tools/gn_crumbs.py
      from the same trail as the page's BreadcrumbList schema.
   2. Vertical rhythm. Audit 2026-10-23: .section carried up to 88px of padding
      top and bottom, so two adjacent sections opened 176px+ of empty space
      before any per-template margin was added. Measured gaps of 180 to 260px
      between sections on 30 of 39 templates. One token now sets it. */

html.gn { --sec: clamp(36px, 4.6vw, 60px); }

/* ------------------------------------------------------------ breadcrumbs */
html.gn .gn-crumbs { display: block; margin: 0 0 14px; font-size: 13px; line-height: 1.4; color: var(--ink3); font-family: var(--f); }
/* Whatever block holds the trail starts it at one fixed distance from the
   nav, so every template opens the same way. */
html.gn :is(header, section, div):has(> .gn-crumbs:first-child) { padding-top: clamp(24px, 3.2vw, 40px) !important; }
html.gn .gn-crumbs + h1 { margin-top: 0 !important; }
html.gn .gn-crumbs ol { display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: 2px; list-style: none; margin: 0; padding: 0; }
html.gn .gn-crumbs li { display: inline-flex; align-items: center; min-width: 0; margin: 0; padding: 0; }
html.gn .gn-crumbs li::before { content: none; }
html.gn .gn-crumbs li + li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin: 0 9px 0 6px;
  border-top: 1.25px solid currentColor; border-right: 1.25px solid currentColor;
  transform: rotate(45deg); opacity: .5;
}
html.gn .gn-crumbs a { color: var(--ink3); text-decoration: none; border-radius: 3px; background: none; padding: 0; }
html.gn .gn-crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
html.gn .gn-crumbs a:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
html.gn .gn-crumbs [aria-current="page"] { color: var(--ink2); font-weight: 500; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }

/* Phone: one back link to the parent. A five-level trail wrapped to three
   lines above the H1 on 390px screens. */
@media (max-width: 640px) {
  html.gn .gn-crumbs li { display: none; }
  html.gn .gn-crumbs li:nth-last-child(2) { display: inline-flex; }
  html.gn .gn-crumbs li:nth-last-child(2)::before {
    content: ""; width: 5px; height: 5px; margin: 0 8px 0 2px;
    border-top: 1.25px solid currentColor; border-right: 0; border-left: 1.25px solid currentColor;
    transform: rotate(-45deg); opacity: .7;
  }
  html.gn .gn-crumbs li:nth-last-child(2) a { padding: 12px 8px 12px 0; margin: -12px 0; color: var(--ink2); }
}

/* -------------------------------------------------------- vertical rhythm */
html.gn .section { padding-block: var(--sec); }
html.gn .hero + .section,
html.gn .hero + section { padding-top: clamp(20px, 2.8vw, 32px); }
html.gn .hero { padding-bottom: clamp(20px, 3vw, 36px); }
html.gn .cta-section { padding-block: clamp(44px, 5vw, 64px); }
html.gn .stats { margin-block: clamp(20px, 2.8vw, 32px); }
html.gn .related-links { margin-top: clamp(20px, 2.4vw, 28px); }
html.gn section.content-section { padding-block: var(--sec); }
html.gn section.content-section + section.content-section { margin-top: 0; }
html.gn .faq-section,
html.gn .process-section { margin-top: clamp(28px, 3.4vw, 40px); }
html.gn section.gn-related-reading { padding-top: clamp(24px, 3vw, 36px) !important; padding-bottom: clamp(28px, 3.4vw, 40px) !important; }
@media (max-width: 719px) {
  html.gn { --sec: clamp(28px, 8vw, 40px); }
}

/* Template sections that carried their own 80 to 104px padding. */
html.gn section:is(.case-studies, .industries, .faq) { padding-block: var(--sec); }
html.gn .cta { padding-block: clamp(44px, 5vw, 64px); }

/* Guide pages (pricing, comparisons, checklists): each short heading and
   paragraph carried 48px below and 60px above, so a two-line answer sat in
   ~170px of air. Matches the service-page rail gap instead. */
html.gn div.content-section { margin-bottom: 0; }
html.gn div.content-section + div.content-section { margin-top: clamp(32px, 4vw, 52px); }
html.gn .related-links { padding-top: clamp(16px, 2vw, 24px); }

/* Homepage "From search to revenue": steps still need distance between them
   so each one activates as it crosses mid-screen. 22vh left ~200px of blank
   between two-line steps; 13vh keeps the scroll-linked sequence readable. */
@media (min-width: 900px) {
  html.gn .gn-story .gn-story-steps { padding: 10vh 0 12vh; }
  html.gn .gn-story .gn-story-step { padding-bottom: 13vh; }
  html.gn .gn-story .gn-story-step:last-child { padding-bottom: 0; }
}

/* Guide pages put whole .content-section blocks inside the service-page rail
   grid, so auto-placement squeezed every other answer into the 200px label
   column and left the space beside it empty. Each block is now one full-width
   rail row: heading in the rail, answer beside it. */
html.gn main .content > :is(.content-section, .related-links) { grid-column: 1 / -1; }
html.gn main .content > div.content-section {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); column-gap: 40px; margin-top: 0;
}
html.gn main .content > div.content-section > h2 { grid-column: 1; margin: 0; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.2; padding-top: 3px; }
html.gn main .content > div.content-section > :not(h2) { grid-column: 2; }
html.gn main .content > div.content-section > p { font-size: 17px; line-height: 1.65; color: var(--ink2); margin: 0; max-width: none; }
html.gn main .content > div.content-section > p + * { margin-top: 14px; }
@media (max-width: 719px) {
  html.gn main .content > div.content-section { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  html.gn main .content > div.content-section > h2,
  html.gn main .content > div.content-section > :not(h2) { grid-column: 1; }
}

/* Contextual links block injected by tools/gn_links.py. */
html.gn .gn-ai-links { max-width: var(--max); margin: 0 auto; padding: clamp(24px, 3vw, 36px) var(--gut); border-top: 1px solid var(--line); }
html.gn .gn-ai-links h2 { font-family: var(--fd); font-size: clamp(19px, 2.1vw, 23px); font-weight: 500; margin: 0 0 12px; }
html.gn .gn-ai-links ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 26px; }
html.gn .gn-ai-links li { border-top: 1px solid var(--line); padding: 10px 0 12px; margin: 0; }
html.gn .gn-ai-links li::before { content: none; }
html.gn .gn-ai-links a { display: block; font-weight: 600; color: var(--ink); text-decoration: none; font-size: 15px; }
html.gn .gn-ai-links a:hover { color: var(--ac); }
html.gn .gn-ai-links span { display: block; font-size: 14px; line-height: 1.5; color: var(--ink2); margin-top: 2px; }