/* Sub-pages: the landing page's shell. Docs add a left nav, kamal-style. */
.wrap.docs { max-width: 100ch; }
.hero { padding: 48px 0 8px; display: grid; grid-template-columns: minmax(0, var(--measure)); gap: 14px; }
.crumb { font: 400 13px/18px var(--font-sans); color: var(--muted); }
.lede { font-size: 18px; line-height: 29px; color: var(--prose); }
.col { max-width: var(--measure); display: flex; flex-direction: column; gap: 18px; }
.q { padding-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.q h2 { font: 500 26px/32px var(--font-display); }
.col ul { margin: 0; padding-left: 1.2em; color: var(--prose); display: flex; flex-direction: column; gap: 6px; }
.steps { margin: 0; padding-left: 1.4em; color: var(--prose); display: flex; flex-direction: column; gap: 12px; }
.steps li::marker { font-weight: 500; color: var(--muted); }
.steps b { font-weight: 600; color: var(--fg); display: block; }
.decision .body { padding: 14px 16px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.decision .body h3 { font: 500 20px/26px var(--font-display); }
.decision .answer { padding-left: 12px; border-left: 2px solid var(--fg); color: var(--fg); }
.decision .links { display: flex; flex-wrap: wrap; gap: 8px 14px; font: 400 13px/18px var(--font-sans); color: var(--muted); }
/* Docs layout */
.dbody { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 40px; padding-top: 32px; }
.dnav { position: sticky; top: 16px; align-self: start; display: flex; flex-direction: column; gap: 18px; }
.dgroup { display: flex; flex-direction: column; gap: 1px; }
.dlabel { font: 400 12px/16px var(--font-sans); color: var(--muted); padding: 0 10px 4px; }
.dnav a { display: block; font: 400 14px/20px var(--font-sans); text-decoration: none; padding: 5px 10px; border-radius: var(--radius-sm); position: relative; color: var(--fg); }
.dnav a:hover { background: var(--sidebar); }
.dnav a[aria-current="page"] { background: var(--sidebar-selected); font-weight: 500; }
.dnav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--brand); }
.dmain { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dmain h1 { margin-top: 4px; }
.tools { max-width: 84ch; margin-top: 10px; }
.tools th.grp { padding-top: 18px; font: 600 14px/20px var(--font-sans); color: var(--fg); border-bottom: 1px solid var(--rule); }
.tools td:first-child { white-space: nowrap; width: 1%; padding-right: 20px; }
@media (max-width: 800px) { .dbody { grid-template-columns: 1fr; gap: 20px; } .dnav { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px 22px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); } .dgroup { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px; } .dlabel { padding: 0 6px 0 0; } }
@media (max-width: 700px) { .hero h1, .dmain h1 { font-size: 30px; line-height: 36px; } .q h2 { font-size: 23px; line-height: 29px; } }