/* ---------------------------------------------------------------------------
   Shared stylesheet for the /capstones/ portal tree: the hub plus the three
   per-product family pages. Extracted so the four pages cannot drift apart the
   way the old single-page portal drifted from the site root (it had no
   light-mode support). Palette is copied from /index.html on purpose.
   --------------------------------------------------------------------------- */
:root{
  --bg:#0d1117; --panel:#161b22; --border:#30363d; --text:#e6edf3;
  --faint:#8b949e; --accent:#58a6ff;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f5f1; --panel:#ffffff; --border:#d8d5cc; --text:#1a1813;
    --faint:#56534a; --accent:#1b5fb8;
  }
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column; align-items:center; padding:40px 20px 40px;
}

/* Breadcrumb — the old flat portal had no way back to the site root. */
nav.crumbs{width:100%; max-width:840px; margin:0 0 28px; font-size:.82rem; color:var(--faint)}
nav.crumbs a{color:var(--faint); text-decoration:none; border-bottom:1px solid transparent}
nav.crumbs a:hover{color:var(--accent); border-bottom-color:var(--accent)}
nav.crumbs span{margin:0 6px; opacity:.6}

header{max-width:640px; text-align:center; margin-bottom:36px}
h1{font-size:clamp(1.5rem,4vw,1.9rem); margin:0 0 10px; letter-spacing:-.02em}
header p{color:var(--faint); font-size:.95rem; line-height:1.55; margin:0}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:16px; width:100%; max-width:840px}
.stack{display:grid; gap:16px; width:100%; max-width:720px}

a.card{display:block; background:var(--panel); border:1px solid var(--border);
       border-radius:10px; padding:20px 22px; text-decoration:none; color:var(--text);
       transition:border-color .15s ease, transform .15s ease}
a.card:hover{border-color:var(--accent); transform:translateY(-2px)}
a.card h2{font-size:1.05rem; margin:0 0 6px; color:var(--accent)}
a.card h2 span.arrow{float:right; font-weight:400}
a.card p{margin:0; color:var(--faint); font-size:.88rem; line-height:1.55}

.tag{display:inline-block; font-size:.68rem; letter-spacing:.03em; text-transform:uppercase;
     color:var(--faint); border:1px solid var(--border); border-radius:999px;
     padding:2px 8px; margin-top:12px}
.tag + .tag{margin-left:6px}

/* Key-requirement note. Sits above the version cards so the answer to "do I
   need anything to try this?" arrives before the click, not after. */
.keynote{width:100%; max-width:720px; background:var(--panel);
         border:1px solid var(--border); border-left:3px solid var(--accent);
         border-radius:10px; padding:16px 20px; margin:0 0 4px}
.keynote h3{margin:0 0 8px; font-size:.82rem; letter-spacing:.04em;
            text-transform:uppercase; color:var(--faint); font-weight:600}
.keynote p{margin:0 0 8px; color:var(--faint); font-size:.86rem; line-height:1.6}
.keynote p:last-child{margin-bottom:0}
.keynote a{color:var(--accent)}

/* "How the versions differ" panel on family pages with more than one version. */
.compare{width:100%; max-width:720px; background:var(--panel); border:1px solid var(--border);
         border-radius:10px; padding:18px 22px; margin:0 0 20px}
.compare h3{margin:0 0 10px; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
            color:var(--faint); font-weight:600}
.compare dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px;
            font-size:.88rem; line-height:1.5}
.compare dt{color:var(--accent); font-weight:600; white-space:nowrap}
.compare dd{margin:0; color:var(--faint)}
@media (max-width:520px){
  .compare dl{grid-template-columns:1fr; gap:2px}
  .compare dd{margin:0 0 8px}
}

footer{max-width:640px; margin-top:48px; text-align:center; color:var(--faint);
       font-size:.78rem; line-height:1.6}
footer p{margin:0 0 10px}
footer strong{color:var(--text)}