/* Shared styles for NAI OS collecting (hub) pages and blog articles. */
:root{
  --ink:#1c1f1e; --sub:#4a5350; --line:#dfe3e0; --bg:#fbfaf7; --card:#ffffff;
  --accent:#0f6f63; --accent-bg:#dcefe9; --warn:#8a5a00; --warn-bg:#fdf3e0;
  --code-bg:#f4f1ea;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e8eae8; --sub:#a8b0ac; --line:#33403c; --bg:#141716; --card:#1b1f1e;
    --accent:#5fd3bf; --accent-bg:#173430; --warn:#e0b968; --warn-bg:#332a12;
    --code-bg:#20241f;
  }
}
*{box-sizing:border-box}

/* --- Collecting (hub) pages --- */
body.hub{
  margin:0; padding:3rem 1.25rem 4rem; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
body.hub.hub--home{padding:3.5rem 1.25rem}
body.hub.hub--guide{padding:2.5rem 1.25rem 5rem}
body.hub main{max-width:820px; margin:0 auto}
body.hub.hub--features main{max-width:720px}
body.hub.hub--guide main{max-width:900px}

body.hub h1{font-size:1.9rem; margin:0 0 .25rem}
body.hub.hub--features h1{font-size:1.8rem; margin:0 0 .3rem}
body.hub .tagline{color:var(--sub); font-size:1.05rem; margin:0 0 2.5rem}
body.hub.hub--features .tagline{font-size:1.02rem; margin:0 0 2.2rem}
body.hub.hub--guide .tagline{margin:0 0 2rem}

.eyebrow{
  font-family:ui-monospace,Consolas,monospace; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 .6rem;
}
body.hub.hub--guide .eyebrow{margin:0 0 .5rem}
.eyebrow a{color:inherit; text-decoration:none}
.eyebrow a:hover{text-decoration:underline}

.tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.1rem}
a.tile{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:1.5rem 1.6rem; text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, transform .15s ease;
}
a.tile:hover{border-color:var(--accent); transform:translateY(-2px)}
.tile .icon{
  display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem;
  border-radius:8px; background:var(--accent-bg); font-size:1.2rem; margin-bottom:.9rem;
}
.tile h2{font-size:1.15rem; margin:0 0 .4rem}
.tile p{margin:0; color:var(--sub); font-size:.92rem; line-height:1.55}
.tile .go{display:inline-block; margin-top:.9rem; color:var(--accent); font-size:.88rem; font-weight:600}
.tile code{font-family:ui-monospace,Consolas,monospace; font-size:.9em}
.status{
  display:inline-block; margin-top:.75rem; font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; font-family:ui-monospace,Consolas,monospace;
  color:var(--sub); border:1px solid var(--line); border-radius:999px; padding:.15em .7em;
}

body.hub .brand{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:2rem}
body.hub .brand img{height:32px; width:auto}
body.hub .brand span{font-size:.85rem; color:var(--sub)}

body.hub footer{color:var(--sub); font-size:.85rem; margin-top:2.8rem; border-top:1px solid var(--line); padding-top:1.2rem}
body.hub footer a{color:var(--accent)}
body.hub.hub--home footer{margin-top:2.5rem; border-top:none; padding-top:0}
body.hub.hub--features footer{font-size:.88rem}
body.hub.hub--guide footer{margin-top:3rem; padding-top:1rem}

.brand span a{color:inherit; text-decoration:none}
.brand span a:hover{text-decoration:underline}
.imprint{margin:.8rem 0 0; font-size:.85rem; color:var(--sub)}
.imprint a{color:inherit}
.imprint a:hover{text-decoration:underline}

/* --- Blog articles --- */
body.article{
  margin:0; padding:3.5rem 1.25rem; background:var(--bg); color:var(--ink);
  font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
body.article main{max-width:42em; margin:0 auto}
body.article .brand{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:2.5rem}
body.article .brand img{height:32px; width:auto}
body.article .brand span{font-size:.85rem; color:var(--sub)}
body.article h1{font-size:2rem; line-height:1.25; margin:0 0 1.75rem; letter-spacing:-.01em}
body.article h2{font-size:1.3rem; margin:2.75rem 0 .9rem; letter-spacing:-.005em}
body.article p{margin:0 0 1.25rem}
body.article code{
  font:0.88em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--accent-bg); color:var(--ink);
  padding:.1em .35em; border-radius:4px;
}
body.article a code{color:inherit}
body.article strong{font-weight:650}
body.article a{color:var(--accent)}
body.article .backlink{display:inline-block; margin-bottom:2rem; color:var(--accent); font-size:.9rem; text-decoration:none}
body.article .backlink:hover{text-decoration:underline}
body.article footer{
  color:var(--sub); font-size:.85rem; margin-top:3.5rem;
  border-top:1px solid var(--line); padding-top:1.5rem;
}