/* The guide (/guide): the landing page's frame (lp.css) around plain sections. */
.gd { padding: 24px var(--gutter) 104px; display: flex; flex-direction: column; gap: 56px; }
.gd-head { display: flex; flex-direction: column; gap: 14px; }
.gd-head .eyebrow, .gd .eyebrow { color: var(--deep); font-weight: 700; font-size: 15px; }
.gd-head h1 { font-size: 44px; line-height: 1.35; }
.gd-head p, .gd-sec > p { font-size: 16px; line-height: 1.9; }
.gd-sec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; }
.gd-sec h2 { font-size: 30px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.gd-list { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.8; }
.gd-step-title { font-weight: 700; font-size: 17px; }
.gd-card-text { font-size: 14px; line-height: 1.7; color: var(--sub); }
.gd .mono { overflow-wrap: anywhere; }  /* long URLs wrap on a phone */
.gd-spec { display: flex; flex-direction: column; }
.gd-spec > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.7; border-top: 1px solid var(--line); }
.gd-spec > div:first-child { border-top: none; }
.gd-spec-label { font-weight: 700; }
.gd-toc { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; padding: 14px 18px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; }
.gd-h3 { font-size: 19px; font-weight: 700; margin: 12px 0 0; }
.gd-flow { margin: 0; padding: 0; list-style: none; counter-reset: gd-flow; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gd-flow li { counter-increment: gd-flow; background: var(--tint); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.gd-flow li::before { content: counter(gd-flow); font-weight: 700; font-size: 18px; color: var(--deep); }
.gd-note { font-size: 14px; line-height: 1.8; color: var(--sub); }
.card { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; }
.code-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.code-card pre { margin: 0; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.cert-setup { display: flex; flex-direction: column; gap: 10px; }
.cert-setup-lead, .cert-setup-note { font-size: 14px; line-height: 1.8; color: var(--sub); margin: 0; }
.cert-setup-title { font-weight: 700; font-size: 15px; }

@media (max-width: 960px) {
  .gd-head h1 { font-size: 32px; }
  .gd-sec h2 { font-size: 24px; }
  .gd-flow, .gd-spec > div { grid-template-columns: minmax(0, 1fr); }
  .gd-spec > div { gap: 2px; }
}