/* Developer portal: a document you respond to, not an app. */
.portal { background: var(--ground); }
.p-bar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-3) var(--gutter); background: var(--bg); border-bottom: var(--rule); }
.p-bar .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-variation-settings: "wdth" 125; font-weight: 600; }
.p-bar .brand::before { content: ''; width: 12px; height: 16px; background: var(--primary); clip-path: polygon(50% 100%, 0 35%, 15% 0, 85% 0, 100% 35%); }
.p-wrap { width: min(100% - 2 * var(--gutter), 1080px); margin-inline: auto; padding: var(--s-7) 0 calc(var(--pocbar-h) + var(--s-8)); display: grid; gap: var(--s-6); }
.p-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-6); align-items: end; }
.p-hero h1 { font-size: var(--fs-h1); line-height: 1.02; }
.p-hero img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); }
.p-snag { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); background: var(--bg); border: var(--rule); border-radius: var(--r-lg); }
.p-snag .ph { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); }
.p-snag .ph img { width: 100%; height: 100%; object-fit: cover; }
.p-snag .ph svg.mk { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-snag h3 { font-size: var(--t-18); line-height: 1.25; }
.p-snag .acts { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: auto; }
.p-snag .body { display: grid; gap: var(--s-3); align-content: start; }
.p-snag.acked { background: var(--surface); }
.p-snag.enter { animation: snag-in var(--dur-3) var(--ease-out) both; }
@media (max-width: 760px) { .p-hero, .p-snag { grid-template-columns: 1fr; } .p-bar { gap: var(--s-2); } .p-bar .grow { order: 5; flex-basis: 100%; } .p-bar .brand { flex: 1; } }