/* doDev site – shared by every page: home (index.html), guides and privacy (_layouts/default.html), help (help/index.html) */
:root {
  --ink: #0f0d2e; --text: #1f2333; --muted: #5b6078; --line: #e6e8f0; --soft: #f5f6fb;
  --brand: #4f46e5; --brand-2: #6366f1; --sky: #38bdf8; --green: #10b981; --amber: #f59e0b;
  --hero1: #0f0c29; --hero2: #1e1b4b; --hero3: #312e81;
  --dark: linear-gradient(160deg, var(--hero1), var(--hero2) 60%, var(--hero3));
  --r: 14px; --shadow: 0 10px 30px rgba(15, 13, 46, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: #fff; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1600px; margin: 0 auto; padding: 0 clamp(16px, 2vw, 28px); }
code, kbd, pre { font-family: "JetBrains Mono", ui-monospace, monospace; }
[id] { scroll-margin-top: 76px; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 10; background: rgba(15, 12, 41, .9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }
.top .wrap { display: flex; align-items: center; gap: 22px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 19px; white-space: nowrap; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand small { font-weight: 600; font-size: 15px; color: #c7c9f5; }
.brand:hover { text-decoration: none; }
.nav { display: flex; align-items: center; gap: 20px; margin-left: auto; font-size: 14.5px; }
.nav a { color: #c7c9f5; }
.nav a:hover, .nav a[aria-current] { color: #fff; text-decoration: none; }
.nav a[aria-current] { font-weight: 700; }
.nav .cta { display: inline-flex; align-items: center; gap: 7px; color: #052e1c; background: var(--green); padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 15px; box-shadow: 0 6px 20px rgba(16,185,129,.35); white-space: nowrap; }
.nav .cta:hover { color: #052e1c; transform: translateY(-1px); }
.nav .cta svg { width: 17px; height: 17px; }
@media (max-width: 900px) { .nav a:not(.cta) { display: none; } }
@media (max-width: 640px) { .brand small { display: none; } }

/* Banner: the page title alone, centred */
.hero { color: #fff; background: radial-gradient(1200px 300px at 80% -10%, rgba(56,189,248,.22), transparent 60%), radial-gradient(900px 300px at 0% 0%, rgba(99,102,241,.35), transparent 60%), linear-gradient(160deg, var(--hero1), var(--hero2) 55%, var(--hero3)); padding: 16px 0 18px; }
.hero h1 { font-size: clamp(26px, 2.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; margin: 0; font-weight: 800; text-align: center; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--sky), #a5b4fc); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Page: content 80% | how-to guides 20% */
.pageGrid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(220px, 1fr); gap: 20px; padding-top: 18px; padding-bottom: 56px; align-items: start; }
@media (max-width: 980px) { .pageGrid { grid-template-columns: 1fr; } }
.mainCol { min-width: 0; }

/* How-to guides column */
.howto { position: sticky; top: 72px; max-height: calc(100vh - 84px); overflow: auto; background: var(--dark); color: #fff; border-radius: var(--r); padding: 16px 10px 12px; }
@media (max-width: 980px) { .howto { position: static; max-height: none; } }
.howto h2 { color: #fff; font-size: 16px; line-height: 1.3; margin: 0 8px 10px; letter-spacing: 0; }
.howto ul { list-style: none; margin: 0; padding: 0; }
.howto li { margin: 0; }
.howto li a { display: block; padding: 4px 8px; border-radius: 7px; color: #dfe2ff; font-size: 14px; line-height: 1.45; }
.howto li a::before { content: "→ "; color: var(--sky); }
.howto li a:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.howto li a.on { background: rgba(255,255,255,.14); color: #fff; font-weight: 700; }
.howto .all { display: block; margin: 10px 8px 0; font-weight: 700; font-size: 14px; color: var(--sky); }

/* Footer */
footer { background: var(--hero1); color: #9ea2c7; padding: 40px 0; font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; }
footer a { color: #c7c9f5; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }