/* Public how-to guides (public/fk/pub-guide.php). Tokens only. */

.fkg { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); padding-top: clamp(24px, 4vw, 56px); padding-bottom: var(--s-24); max-width: 880px; }
.fkg > * { min-width: 0; }
.fkg .g { font-family: var(--f-display); font-weight: 400; }
.fkg .n { font-family: var(--f-num); font-stretch: 85%; font-variant-numeric: tabular-nums; font-weight: 600; }

.fkg-crumbs { display: flex; gap: 8px; font-size: 0.875rem; color: var(--c-text-3); margin-bottom: calc(-1 * clamp(24px, 3vw, 48px)); }
.fkg-crumbs a { color: var(--c-text-2); }
.fkg-crumbs a:hover { color: var(--c-accent); }

.fkg-hero { display: flex; flex-direction: column; gap: 18px; }
.fkg-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--c-accent); }
.fkg-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.02; margin: 0; max-width: 18ch; }
.fkg-lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--c-text-2); max-width: 58ch; margin: 0; }
.fkg-hero .fk-paste { max-width: 640px; }
.fkg-note { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--c-text-3); max-width: 64ch; }

.fkg-h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.08; margin: 0 0 var(--s-8); }
.fkg-sec { display: flex; flex-direction: column; }

.fkg-steps { list-style: none; margin: 0 0 var(--s-8); padding: 0; }
.fkg-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 64px; padding: 12px 0; border-top: 1px solid var(--c-border); }
.fkg-steps li:last-child { border-bottom: 1px solid var(--c-border); }
.fkg-steps .n { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: var(--c-surface-hi); color: var(--c-accent); }
.fkg-steps b { display: block; font-weight: 600; margin-bottom: 2px; }
.fkg-steps li > span:last-child { color: var(--c-text-2); line-height: 1.5; }
.fkg-steps li > span:last-child b { color: var(--c-text); }

.fkg-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-16); }
.fkg-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fkg-ticks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.fkg-ticks svg { flex: none; margin-top: 4px; color: var(--c-sage); }

.fkg-fails { margin: 0 0 var(--s-8); }
.fkg-fails > div { padding: 14px 0; border-top: 1px solid var(--c-border); }
.fkg-fails > div:last-child { border-bottom: 1px solid var(--c-border); }
.fkg-fails dt { font-weight: 600; margin-bottom: 4px; }
.fkg-fails dd { margin: 0; color: var(--c-text-2); line-height: 1.55; max-width: 64ch; }

.fkg-index { display: flex; flex-direction: column; }
.fkg-index__row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 64px; padding: 12px 0; border-top: 1px solid var(--c-border); color: var(--c-text); text-decoration: none; }
.fkg-index__row:last-child { border-bottom: 1px solid var(--c-border); }
.fkg-index__row svg { color: var(--c-text-3); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s; }
.fkg-index__row:hover svg, .fkg-index__row:focus-visible svg { color: var(--c-accent); transform: translateX(3px); }
.fkg-index__p { font-size: 1.375rem; line-height: 1.1; }
.fkg-index__t { color: var(--c-text-2); }

@media (max-width: 560px) {
  .fkg-index__row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .fkg-index__p { grid-column: 1; }
  .fkg-index__t { grid-column: 1; grid-row: 2; font-size: 0.9375rem; }
  .fkg-index__row svg { grid-column: 2; grid-row: 1 / span 2; }
  .fkg-hero .fk-paste .btn { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .fkg-index__row svg { transition: none; } }