/* Lëtz Incorporate — static guide pages (generated by scripts/build-guide.mjs) */
:root {
  --bg: #f6f7fa; --panel: #ffffff; --fg: #17202e; --muted: #5d6878; --line: #dde2ea;
  --accent: #0f5fa8; --accent-fg: #ffffff; --soft: #e6f0fb; --warn-soft: #fdf1df; --warn: #8a4b05;
  --display: "Fraunces", Georgia, serif; --body: "IBM Plex Sans", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1520; --panel: #171f2d; --fg: #e7ecf3; --muted: #9aa6b8; --line: #2a3445;
    --accent: #6fb0ee; --accent-fg: #0b1a2c; --soft: #1b2a3f; --warn-soft: #2d2414; --warn: #f0c27a;
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 var(--body) }
a { color: var(--accent) }
.g-top { display: flex; align-items: center; gap: 16px; padding: 14px clamp(16px, 4vw, 40px); background: var(--panel); border-bottom: 1px solid var(--line) }
.g-brand { font: 700 1.15rem/1 var(--display); color: var(--fg); text-decoration: none; margin-right: auto }
.g-langs { display: flex; gap: 4px }
.g-langs a { font-size: .8rem; font-weight: 600; text-decoration: none; padding: 4px 7px; border-radius: 6px; color: var(--muted) }
.g-langs a[aria-current] { background: var(--soft); color: var(--accent) }
.g-signin { font-size: .9rem; font-weight: 600 }
.g-main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px }
.g-crumbs ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; color: var(--muted) }
.g-crumbs li + li::before { content: "›"; margin-right: 6px }
.g-crumbs a { color: var(--muted) }
.g-article h1 { font: 700 clamp(1.8rem, 5vw, 2.6rem)/1.15 var(--display); letter-spacing: -.01em; margin: 0 0 12px }
.g-article h2 { font: 600 1.25rem/1.3 var(--display); margin: 32px 0 10px }
.g-eyebrow { margin: 0 0 6px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent) }
.g-lead { font-size: 1.1rem; margin: 0 0 24px }
.g-facts { display: grid; gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.g-facts div { background: var(--panel); padding: 12px 16px; display: grid; grid-template-columns: 9rem 1fr; gap: 12px }
.g-facts dt { font-weight: 600; color: var(--muted); font-size: .9rem }
.g-facts dd { margin: 0 }
@media (max-width: 560px) { .g-facts div { grid-template-columns: 1fr; gap: 2px } }
.g-review { margin: 16px 0 0; color: var(--muted); font-size: .9rem }
.g-tip { margin: 20px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--warn-soft) }
.g-tip b { color: var(--warn) }
.g-sources ul { margin: 0; padding-left: 1.2rem }
.g-note { color: var(--muted); font-size: .9rem }
.g-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px }
.g-pager a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-decoration: none; color: var(--fg); font-weight: 600 }
.g-pager a[rel="next"] { text-align: right }
.g-pager small { display: block; color: var(--muted); font-weight: 500; font-size: .78rem }
.g-phase ol { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.g-phase li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--panel); border-top: 1px solid var(--line) }
.g-phase li:first-child { border-top: 0 }
.g-phase li span { color: var(--muted); font-size: .85rem; text-align: right }
.g-cta { margin-top: 40px; padding: 20px; border-radius: 16px; background: var(--soft) }
.g-cta h2 { font: 600 1.3rem/1.3 var(--display); margin: 0 0 6px }
.g-cta p { margin: 0 0 14px }
.g-btn { display: inline-block; padding: 11px 18px; border-radius: 10px; background: var(--accent); color: var(--accent-fg); font-weight: 600; text-decoration: none }
.g-foot { padding: 24px 16px 40px; text-align: center; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line) }