/* The portal at the site root (Isamu, 11 Oct 2026). The pages are drawn in the demo's own grammar on demo/theme.css
   (header bar, banner, .pg grid, .blk cards); this file adds only the row of buttons inside a prose card. */
.blk .cta{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
/* the home page's supporting lines under the tagline <h1> (David 15 Oct: product.json taglines 2 and 3; the last is the
   proof line), in the body face, muted, before the title rule */
.ptitle .tagline-sub{flex-basis:100%;margin:2px 0 0;font:500 var(--fs-body)/1.4 var(--f-body);color:var(--muted)}
.ptitle .tagline-sub+.tagline-sub{margin-top:-2px}
/* the front door's right-hand stack (the main message above Get in early) takes its natural height on phones, as the
   demo does for its key facts stack (site.css #facts-profile) */
@media (max-width:699px){.pg>.stack#main>.blk:last-child,.pg>.stack#main>.blk:last-child>.bb{flex:0 0 auto;min-height:0}}
/* S85 (Nervi, docs/23): screenshot tiles, each card one link to the page it shows (the link's ::after covers the card) */
.blk[data-as="portal_shot"] .bb{gap:6px}
.shot-a{display:block;color:inherit}
.shot-a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.shot-a img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--paper)}
.blk[data-as="portal_shot"]:hover{border-color:var(--slate)}
.blk[data-as="portal_shot"]:hover .shot-a img{border-color:var(--slate)}
.blk[data-as="portal_shot"]:focus-within{outline:2px solid var(--brain-pink);outline-offset:2px}
.shot-a:focus-visible{outline:0}
.shot-cap{margin:4px 0 0;font-size:var(--fs-text);line-height:1.5}
.shot-do{margin:0;font-size:var(--fs-small);color:var(--muted)}
/* a worked example's chat, drawn as the Ask B panel draws it (site.css .ab-thread) */
.pchat{display:grid;gap:8px}
.pc-where{margin:0;font-size:var(--fs-small);color:var(--muted)}
.pc-steps{margin:0 0 8px;padding:0 0 6px;border-bottom:1px solid var(--border);font-size:var(--fs-small);color:var(--muted)}
.pc-steps span{font-weight:600}
.pc-src{margin-top:8px;font-size:var(--fs-2)}
.pc-src ul{margin:4px 0 0;padding-left:20px}
.pchat .ab-b h3,.pchat .ab-b h4,.pchat .ab-b h5{font-size:var(--fs-text);margin:10px 0 4px}
.pchat .ab-b .tbl{overflow-x:auto}
/* the slide and page renders of one example: thumbnails that open the full render */
.pgal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.pgal li{display:grid;gap:4px;min-width:0}
.pgal a{display:block}
.pgal img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:6px;background:#fff}
.pgal a:hover img{border-color:var(--slate)}
.pgal span{font-size:var(--fs-small);color:var(--muted)}
/* Ogilvy, 16 Oct (docs/28): the use-case cards (what it does, its picture, two links) and the demo label on every
   screenshot, render and example (Demo: BG-Demo, a fictional company) */
.blk[data-as="portal_case"] .bb{gap:8px}
.case-t{margin:0;font-size:var(--fs-text);line-height:1.5}
.case-a{display:block;color:inherit;margin-top:auto}
.case-a img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--paper)}
.case-a:hover img{border-color:var(--slate)}
.demo-lbl{margin:0;font-size:var(--fs-small);color:var(--muted);letter-spacing:.01em}
.demo-lbl::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;
  background:var(--brain-pink);vertical-align:middle}
/* Turner, 17 Oct: the examples follow the theme. Every example image has a dark copy beside it (tools/dark_renders.py);
   the page draws both and shows one: the dark one when the toggle says dark, or when the toggle is on auto and the
   system is dark (the same two routes as demo/theme.css). Hidden images are not fetched (loading=lazy). */
.ex-d{display:none!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ex-l{display:none!important}
  :root:not([data-theme="light"]) .ex-d{display:block!important}
  :root:not([data-theme="light"]) .pgal img,:root:not([data-theme="light"]) .ab-chart img.ex-d{background:var(--paper)}
}
:root[data-theme="dark"] .ex-l{display:none!important}
:root[data-theme="dark"] .ex-d{display:block!important}
:root[data-theme="dark"] .pgal img,:root[data-theme="dark"] .ab-chart img.ex-d{background:var(--paper)}