/* Hallmark · page styles for this route; stamp and tokens live in site.css · hero: Banner */
.banner { padding-block: var(--space-2xl) var(--space-xl); border-bottom: 1px solid var(--color-rule); }

.banner h1 { font-size: var(--text-display-s); max-width: none; }

.banner .lead { max-width: 56ch; }

.banner__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: start; }

.banner__text { grid-column: 1 / span 6; display: grid; gap: var(--space-md); justify-items: start; }

.filters { display: none; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }

.js .filters { display: flex; }

.filters button { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }

.filters button:hover { background: var(--color-paper-2); }

.filters button[aria-pressed="true"] { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-brand-ink); }

.cat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; padding-block: var(--space-xl); border-top: 1px solid var(--color-rule-strong); }

.cat > h2 { grid-column: 1 / span 3; font-size: var(--text-2xl); max-width: 14ch; position: sticky; top: calc(var(--nav-height) + var(--space-lg)); }

.idx { grid-column: 5 / -1; list-style: none; }

.idx li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xs) var(--gap-columns); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }

.idx li:first-child { padding-top: 0; }

.idx li:last-child { border-bottom: 0; padding-bottom: 0; }

.idx h3 { font-size: var(--text-lg); line-height: 1.3; }
.idx h3 { align-self: start; }
.idx h3 a { display: inline-flex; align-items: center; gap: var(--space-sm); color: inherit; text-decoration: none; }
.idx h3 a .icon { display: inline-block; width: 14px; height: 14px; margin-left: var(--space-2xs); vertical-align: -1px; color: var(--color-ink-2); transition: translate var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.idx h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.idx h3 a:hover .icon { translate: 2px -2px; color: var(--color-accent); }
.idx h3 a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.idx h3 img, .idx__mono { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; }
.idx h3 img { object-fit: contain; background: #fff; padding: 3px; outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; }
.idx__mono { display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent); font: 600 13px/1 var(--font-display); }

.idx p { color: var(--color-ink-2); max-width: 62ch; }

.partners__text { display: grid; gap: var(--space-lg); justify-items: start; }

@media (max-width: 60rem) {
  .banner__text { grid-column: 1 / -1; }
  .cat > h2 { grid-column: 1 / -1; position: static; max-width: none; }

  .idx { grid-column: 1 / -1; }

  .idx li { grid-template-columns: minmax(0, 1fr); }

}
.section--s.lib, .section--s.doc, .section--s.archive { padding-top: var(--space-xl); }

.banner h1, .banner .lead { text-wrap: balance; }

.btn:focus-visible { outline-offset: 3px; }

.filters button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.filters button:active { transform: translateY(1px); }

/* key figures under the intro, counted from the list below */
.plug-figs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 24rem; margin-top: var(--space-xl); }
.plug-figs li { display: grid; gap: var(--space-2xs); align-content: start; padding-inline: var(--space-md); border-left: 1px solid var(--color-rule-strong); }
.plug-figs li:first-child { padding-left: 0; border-left: 0; }
.plug-figs b { font: 600 var(--text-figure)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.plug-figs span { font-size: var(--text-sm); color: var(--color-ink-2); }
.plug-more { margin-top: var(--space-sm); color: var(--color-ink-2); }

/* The integrations circle UtilityCloud on a turning sphere (site.js places them); a decorative echo of the list below. */
.sphere { position: relative; grid-column: 7 / -1; justify-self: center; width: min(100%, 34rem); margin: 0; }
.sphere__stage { position: relative; aspect-ratio: 1; touch-action: pan-y; }
.sphere__stage::before { content: ""; position: absolute; inset: 10%; border: 1px dashed var(--color-rule-strong); border-radius: 50%; }
.sphere__core { position: absolute; left: 50%; top: 50%; z-index: 100; display: grid; place-items: center; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--color-brand); color: var(--color-brand-ink); box-shadow: 0 0 0 10px color-mix(in oklab, var(--color-brand) 10%, transparent), 0 0 0 22px color-mix(in oklab, var(--color-brand) 5%, transparent); }
.sphere__core svg { width: 40%; height: auto; aspect-ratio: 380 / 302; }
.sphere__list { list-style: none; }
.sphere__list li { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); background: var(--color-paper); box-shadow: 0 1px 2px color-mix(in oklab, var(--color-ink) 6%, transparent), 0 6px 16px -8px color-mix(in oklab, var(--color-ink) 22%, transparent); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; line-height: 1.2; white-space: nowrap; transform: translate(-50%, -50%); will-change: transform, opacity; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.sphere__list img, .sphere__mono { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; }
.sphere__list img { object-fit: contain; background: #fff; padding: 2px; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.sphere__mono { display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent); font: 600 11px/1 var(--font-display); }
.sphere__list li:hover { border-color: var(--color-accent); background: var(--color-accent-fill); color: var(--color-accent-ink); }
html:not(.js) .sphere__list li { position: static; display: inline-block; margin: 0 var(--space-3xs) var(--space-xs) 0; transform: none; }
html:not(.js) .sphere__stage { aspect-ratio: auto; }
html:not(.js) .sphere__stage::before, html:not(.js) .sphere__core { display: none; }
@media (max-width: 60rem) { .sphere { grid-column: 1 / -1; width: min(100%, 26rem); } }
@media (max-width: 40rem) { .sphere__list li { gap: 5px; padding: 3px 9px 3px 3px; font-size: var(--text-xs); } .sphere__list img, .sphere__mono { width: 18px; height: 18px; } }