/* THE TOP LEVEL KIND, lifted from the approved example on the board, rebrand/pages/src/top-about.html (a4fdc4d),
   where it sat inside the page. The same on every top level page: opening, showcase, short version, long reading. */
/* ===== TOP LEVEL kind: this block is the same on every top level page (/about, /features, /help, /security, /partners, /changelog, /alternatives) ===== */
.pg-top .crumbs [aria-current]{color:var(--ink)}
.pg-top .page-hero h1{max-width:17ch}
.pg-top .page-hero .hero-ai{margin-top:22px;max-width:44em}
.pg-top .hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(22px,2.4vw,30px)}
.pg-top .hero-acts .btn{min-height:52px}
.pg-top .btn.ghost{background:rgba(255,255,255,.5);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pg-top .btn.ghost:hover{background:#fff}
.pg-top .page-hero .note{margin-top:18px}
/* the showcase: the one bold place on the page, right under the opening */
.show{padding-block:clamp(40px,5vw,80px) 0}
.show-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-bottom:clamp(24px,3vw,44px)}
.show-head .caps{max-width:15ch}
.show-head p{margin:0;max-width:34ch;font-size:clamp(17px,1.4vw,20px);color:var(--ink-2)}
/* the short version: three cards between the showcase and the reading */
.gist-wrap{padding-top:clamp(48px,6vw,96px)}
.gist-wrap .md{margin-bottom:clamp(18px,2vw,26px)}
.gist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gist > div{background:var(--panel);border-radius:22px;padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:10px}
.gist .gh{display:flex;align-items:center;gap:12px}
.gist i{width:40px;height:40px;border-radius:12px;background:var(--ink);color:var(--sun);display:grid;place-items:center;flex:none}
.gist b{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-0.01em}
.gist p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}
/* the long reading: the kit's .art, with second level links in the contents */
.pg-top .art h2[id],.pg-top .art h3[id]{scroll-margin-top:90px}
.pg-top .toc a.sub{padding:3px 0 3px 12px;font-size:13.5px;color:rgba(14,14,16,.6)}
.pg-top .toc a.sub:hover{color:var(--ink)}
.pg-top .tbl.wide{min-width:640px}
.pg-top .art{min-width:0}
@media (max-width:980px){
  .pg-top .art-side{grid-template-columns:minmax(0,1fr)}
  .gist{grid-template-columns:minmax(0,1fr)}
  .pg-top .toc a.sub{display:none}
}
@media (max-width:640px){.pg-top .hero-acts .btn{flex:1 1 auto}}