/* www.munipro.ai anonymous landing (templates/muni/ai_landing.html).
   Ported from design-hub's launch frames AI_LANDING (1440) and AI_LANDING_M
   (390), restyled onto DL2, the unified design language (design hub g23,
   tokens v2.0.3). Every colour, font, type size, radius, shadow and motion
   value below comes from one --dl2-* custom property named after its token
   key, defined once on the landing root (<html class="mpai-dl2">) so nothing
   else in the app changes. The page loads this one same-origin stylesheet
   and the same-origin docs fonts; no web-font CDN. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../docs/fonts/inter-latin.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../docs/fonts/source-serif-4-latin.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(../docs/fonts/jetbrains-mono-latin.woff2) format("woff2"); }

.mpai-dl2 {
  /* color */
  --dl2-color-ink: #0C2140;             /* titles, key numbers */
  --dl2-color-text: #1E293B;            /* body */
  --dl2-color-muted: #5B6B82;           /* labels, feet, source lines */
  --dl2-color-faint: #94A3B8;           /* placeholders and disabled marks only */
  --dl2-color-rule: #E2E8F0;
  --dl2-color-rule-strong: #CBD5E1;     /* eyebrow dashes, table head rule */
  --dl2-color-control-border: #7D8CA2;  /* form control boundaries (2.0.2) */
  --dl2-color-surface: #FFFFFF;
  --dl2-color-tint: #F1F5F9;
  --dl2-color-page: #F7F9FC;            /* the skills directory: the Ask card, host chips, the note panel */
  --dl2-color-good: #15803D;            /* the skills directory: the Live chip */
  --dl2-color-action: #0265D9;
  --dl2-color-action-hover: #145EC1;
  --dl2-color-action-pressed: #0A4BA0;
  --dl2-color-action-soft: #E2ECFA;
  --dl2-color-action-line: #C6D9F6;
  --dl2-color-on-action: #FFFFFF;
  --dl2-color-accent-large: #3D84EA;    /* large accent words only */
  --dl2-color-focus-ring: #3D84EA;      /* opaque, 2px with a 2px offset (2.0.3) */
  --dl2-color-sky: #F3F7FE;             /* the hero ground */
  --dl2-color-sapphire: #012A63;        /* footer, dark bands */
  --dl2-color-on-sapphire: rgba(255, 255, 255, 0.88);
  --dl2-color-on-sapphire-rule: rgba(255, 255, 255, 0.16);
  --dl2-color-chart-hero-soft: #A2C8F0; /* the brand blue on sapphire (lockup A) */
  --dl2-color-gold: #DCC184;            /* the single brand moment: the 48 x 3 rule over the H1 */
  /* font */
  --dl2-font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dl2-font-display: "Source Serif 4", Georgia, serif;
  --dl2-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  /* type: size / line */
  --dl2-type-t-meta-size: 11px;          --dl2-type-t-meta-line: 16px;
  --dl2-type-t-small-size: 12px;         --dl2-type-t-small-line: 16px;
  --dl2-type-t-cell-size: 13px;          --dl2-type-t-cell-line: 20px;
  --dl2-type-t-body-size: 14px;          --dl2-type-t-body-line: 21px;
  --dl2-type-t-title-size: 15px;         --dl2-type-t-title-line: 22px;
  --dl2-type-t-page-size: 20px;          --dl2-type-t-page-line: 28px;
  --dl2-type-serif-finding-size: 20px;   --dl2-type-serif-finding-line: 28px;
  --dl2-type-serif-display-size: 28px;   --dl2-type-serif-display-line: 34px;
  --dl2-type-www-read-size: 16px;        --dl2-type-www-read-line: 26px;
  --dl2-type-www-section-size: 36px;     --dl2-type-www-section-line: 44px;
  --dl2-type-www-hero-size: 56px;        --dl2-type-www-hero-line: 64px;
  --dl2-type-www-hero-phone-size: 36px;  --dl2-type-www-hero-phone-line: 44px;
  /* radius */
  --dl2-radius-tag: 4px;
  --dl2-radius-control: 6px;
  --dl2-radius-card: 8px;
  /* elevation: none at rest */
  --dl2-elevation-1: 0 6px 18px rgba(12, 33, 64, .12);
  --dl2-elevation-2: 0 12px 32px rgba(12, 33, 64, .14);
  /* motion */
  --dl2-motion-base: 200ms;
  --dl2-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  /* layout (unchanged) */
  --max-width: 1200px;
  --nav-height: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--dl2-color-text); background: var(--dl2-color-surface); font-family: var(--dl2-font-ui); font-size: var(--dl2-type-www-read-size); line-height: var(--dl2-type-www-read-line); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, figure { margin: 0; }
img { display: block; }

.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 200; padding: .65rem 1rem; color: var(--dl2-color-on-action); background: var(--dl2-color-action); }
.skip-link:focus { top: 1rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.5rem; border: 2px solid transparent; border-radius: var(--dl2-radius-control); font-family: var(--dl2-font-ui); font-size: var(--dl2-type-t-body-size); line-height: var(--dl2-type-t-body-line); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--dl2-motion-base) var(--dl2-motion-easing), border-color var(--dl2-motion-base) var(--dl2-motion-easing), color var(--dl2-motion-base) var(--dl2-motion-easing); }
.btn-sm { padding: 8px 18px; }
.btn-primary { color: var(--dl2-color-on-action); background: var(--dl2-color-action); border-color: var(--dl2-color-action); }
.btn-primary:hover, .btn-primary:focus-visible { color: var(--dl2-color-on-action); background: var(--dl2-color-action-hover); border-color: var(--dl2-color-action-hover); }
.btn-primary:active { background: var(--dl2-color-action-pressed); border-color: var(--dl2-color-action-pressed); }
.btn-outline { color: var(--dl2-color-action); background: transparent; border-color: var(--dl2-color-action); }
.btn-outline:hover, .btn-outline:focus-visible { color: var(--dl2-color-on-action); background: var(--dl2-color-action); }
/* on sapphire (the footer): white ground, sapphire words */
.btn-on-dark { color: var(--dl2-color-sapphire); background: var(--dl2-color-surface); border-color: var(--dl2-color-surface); }
.btn-on-dark:hover, .btn-on-dark:focus-visible { color: var(--dl2-color-sapphire); background: var(--dl2-color-action-soft); border-color: var(--dl2-color-action-soft); }
.btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* the minimal header: the DL2 lockup A for MuniPro AI (dl2 brand/lockups/ai-light.svg) at H 28 */
.nav { position: sticky; top: 0; z-index: 100; height: var(--nav-height); background: var(--dl2-color-surface); border-bottom: 1px solid var(--dl2-color-rule); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.nav-logo { display: inline-flex; align-items: center; height: 28px; text-decoration: none; }
.nav-logo__lockup { display: block; width: auto; height: 28px; }
.nav-acts { display: flex; align-items: center; gap: 1.5rem; }
.nav-signin { color: var(--dl2-color-ink); font-family: var(--dl2-font-ui); font-size: var(--dl2-type-t-title-size); line-height: var(--dl2-type-t-title-line); font-weight: 500; text-decoration: none; }
.nav-signin:hover, .nav-signin:focus-visible { color: var(--dl2-color-action); text-decoration: underline; text-underline-offset: 3px; }

/* hero: copy left, the held picture right */
.hero { background: var(--dl2-color-sky); border-bottom: 1px solid var(--dl2-color-rule); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 3rem; align-items: center; max-width: var(--max-width); margin: 0 auto; padding: 5rem 1.5rem; }
.hero-copy > * + * { margin-top: 1.5rem; }
.hero h1::before { content: ""; display: block; width: 48px; height: 3px; margin-bottom: 1.5rem; background: var(--dl2-color-gold); }
.hero h1 { color: var(--dl2-color-ink); font-family: var(--dl2-font-display); font-size: var(--dl2-type-www-hero-size); line-height: var(--dl2-type-www-hero-line); font-weight: 600; letter-spacing: -.01em; }
.lede { max-width: 36ch; color: var(--dl2-color-text); font-size: var(--dl2-type-t-page-size); line-height: var(--dl2-type-t-page-line); font-weight: 400; }
.status-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border: 1px solid var(--dl2-color-action-line); border-radius: var(--dl2-radius-tag); background: var(--dl2-color-surface); color: var(--dl2-color-action); font-size: var(--dl2-type-t-small-size); line-height: var(--dl2-type-t-small-line); font-weight: 600; letter-spacing: .01em; }
.status-chip::before { content: ""; width: 7px; height: 7px; border: 1.5px solid var(--dl2-color-action); border-radius: 50%; }
.draft-tag { display: inline-block; padding: 3px 8px; border: 1px dashed var(--dl2-color-faint); border-radius: var(--dl2-radius-tag); color: var(--dl2-color-muted); font-family: var(--dl2-font-mono); font-size: var(--dl2-type-t-meta-size); line-height: var(--dl2-type-t-meta-line); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

/* the slot boxes: see munipro-ai-slots.css at the end of this file */

/* content bands: white bands, a left-aligned head */
.sec { background: var(--dl2-color-surface); border-top: 1px solid var(--dl2-color-rule); scroll-margin-top: var(--nav-height); }
.sec-warm { background: var(--dl2-color-surface); }
.sec-in { max-width: var(--max-width); margin: 0 auto; padding: 5rem 1.5rem; }
.sec-head { max-width: 760px; margin-bottom: 2.5rem; }
.eyebrow { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; color: var(--dl2-color-muted); font-family: var(--dl2-font-ui); font-size: var(--dl2-type-t-meta-size); line-height: var(--dl2-type-t-meta-line); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 48px; height: 3px; background: var(--dl2-color-rule-strong); }
.sec-head h2 { margin-top: .75rem; color: var(--dl2-color-ink); font-family: var(--dl2-font-display); font-size: var(--dl2-type-www-section-size); line-height: var(--dl2-type-www-section-line); font-weight: 600; text-wrap: balance; }
.sec-head h2:first-child { margin-top: 0; }
.sec-head h2 em { color: var(--dl2-color-accent-large); font-style: italic; }
.dek { margin-top: .75rem; color: var(--dl2-color-text); font-size: var(--dl2-type-www-read-size); line-height: var(--dl2-type-www-read-line); }

/* the cards: a two-column grid of equal cards, then the full-width access card */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.card { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; border: 1px solid var(--dl2-color-rule); border-radius: var(--dl2-radius-card); background: var(--dl2-color-surface); }
.card h3 { margin-top: 1.25rem; color: var(--dl2-color-ink); font-size: var(--dl2-type-t-page-size); line-height: var(--dl2-type-t-page-line); font-weight: 600; }
.card p { margin-top: .5rem; color: var(--dl2-color-text); font-size: var(--dl2-type-www-read-size); line-height: var(--dl2-type-www-read-line); }
.card .slot-card { flex: none; }
.card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: center; padding: 2rem; }
.card-wide h3 { margin-top: 0; color: var(--dl2-color-ink); font-family: var(--dl2-font-display); font-size: var(--dl2-type-serif-display-size); line-height: var(--dl2-type-serif-display-line); font-weight: 600; }
.card-wide p { margin-top: .75rem; font-size: var(--dl2-type-www-read-size); line-height: var(--dl2-type-www-read-line); }

/* connectors */
.connector-list { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.connector-list li { padding: 4px 12px; border: 1px solid var(--dl2-color-rule); border-radius: var(--dl2-radius-tag); background: var(--dl2-color-tint); color: var(--dl2-color-ink); font-size: var(--dl2-type-t-body-size); line-height: var(--dl2-type-t-body-line); font-weight: 600; }
.text-link { display: inline-block; margin-top: 1.5rem; color: var(--dl2-color-action); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* request access: one card, the canonical form is a link away (DL2: no shadow at rest) */
.request-card { padding: 2rem; border: 1px solid var(--dl2-color-rule); border-radius: var(--dl2-radius-card); background: var(--dl2-color-surface); box-shadow: none; }
.request-note { margin-top: 1.25rem; color: var(--dl2-color-text); font-size: var(--dl2-type-www-read-size); line-height: var(--dl2-type-www-read-line); }

/* questions: the www FAQ, numbered by a counter so a dropped item renumbers */
.faq-list { max-width: 880px; counter-reset: faq; border-top: 1px solid var(--dl2-color-rule-strong); }
.faq-item { border-bottom: 1px solid var(--dl2-color-rule-strong); counter-increment: faq; }
.faq-item summary { display: flex; align-items: baseline; gap: 1rem; padding: 1.5rem 0; color: var(--dl2-color-ink); font-family: var(--dl2-font-display); font-size: var(--dl2-type-serif-finding-size); line-height: var(--dl2-type-serif-finding-line); font-weight: 600; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: counter(faq, lower-roman) "."; min-width: 2rem; color: var(--dl2-color-action); font-family: var(--dl2-font-display); font-size: var(--dl2-type-www-read-size); font-style: italic; font-weight: 400; }
.faq-item summary::after { content: "+"; display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin-left: auto; border: 1px solid var(--dl2-color-rule-strong); border-radius: var(--dl2-radius-control); color: var(--dl2-color-action); font-family: var(--dl2-font-ui); font-size: var(--dl2-type-www-read-size); font-weight: 500; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .answer { padding: 0 0 1.5rem 3rem; color: var(--dl2-color-text); font-size: var(--dl2-type-www-read-size); line-height: var(--dl2-type-www-read-line); }

/* footer: DL2_FOOTER, the munipro.ai instance (launch board frame_l14): sapphire, the MuniPro AI dark lockup, the promise,
   one link group, the family row, then the legal rows (copyright, C11, trademarks). No gold. */
.ftr { padding: 3rem 0 2rem; background: var(--dl2-color-sapphire); color: var(--dl2-color-on-sapphire); font-family: var(--dl2-font-ui); font-size: var(--dl2-type-t-body-size); line-height: var(--dl2-type-t-body-line); }
.ftr-in { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.ftr-in > * + * { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--dl2-color-on-sapphire-rule); }
.ftr-lead { display: grid; grid-template-columns: 3fr 6fr 3fr; gap: 1rem; align-items: start; }
.ftr-home { display: inline-flex; padding-top: 2px; }
.ftr-home img { width: auto; height: 28px; }
.ftr-promise { max-width: 48ch; color: var(--dl2-color-on-sapphire); font-size: var(--dl2-type-www-read-size); line-height: var(--dl2-type-www-read-line); }
.ftr-lead .btn { justify-self: end; }
.ftr-head { margin: 0 0 1rem; color: var(--dl2-color-chart-hero-soft); font-size: var(--dl2-type-t-meta-size); line-height: var(--dl2-type-t-meta-line); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ftr-links { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ftr-links a, .ftr-legal a { color: var(--dl2-color-on-sapphire); font-size: var(--dl2-type-t-body-size); line-height: 20px; text-decoration: none; }
.ftr-links a:hover, .ftr-links a:focus-visible, .ftr-legal a:hover, .ftr-legal a:focus-visible { color: var(--dl2-color-surface); text-decoration: underline; text-underline-offset: 3px; }
.ftr-talk__links { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0; padding: 0; list-style: none; }
.ftr-talk__links a { color: var(--dl2-color-on-sapphire); font-size: var(--dl2-type-t-title-size); line-height: 24px; text-decoration: none; }
.ftr-talk__links a:hover, .ftr-talk__links a:focus-visible { color: var(--dl2-color-surface); text-decoration: underline; text-underline-offset: 3px; }
.ftr-fam { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ftr-fam li { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.ftr-fam a, .ftr-fam span[aria-current] { display: inline-flex; }
.ftr-fam img { width: auto; height: 20px; }
.ftr-here { color: var(--dl2-color-on-sapphire); font-size: var(--dl2-type-t-meta-size); line-height: var(--dl2-type-t-meta-line); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ftr-legal { font-size: var(--dl2-type-t-small-size); line-height: var(--dl2-type-t-small-line); }
.ftr-legal p { max-width: 960px; }
.ftr-legal p + p { margin-top: .5rem; }
.ftr-legal__row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: .75rem; }
.ftr-legal__row a { font-size: var(--dl2-type-t-small-size); line-height: var(--dl2-type-t-small-line); text-decoration: underline; text-underline-offset: 3px; }
.ftr-gate { display: inline-block; margin-left: .25rem; padding: 0 6px; border: 1px dashed var(--dl2-color-chart-hero-soft); border-radius: var(--dl2-radius-tag); color: var(--dl2-color-chart-hero-soft); font-family: var(--dl2-font-mono); font-size: var(--dl2-type-t-meta-size); line-height: var(--dl2-type-t-meta-line); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* focus: one opaque ring on every focusable element and every ground (tokens 2.0.3: 3.69:1 on white, 3.76:1 on sapphire) */
:focus-visible { outline: 2px solid var(--dl2-color-focus-ring); outline-offset: 2px; }
.skip-link:focus { outline: 2px solid var(--dl2-color-focus-ring); outline-offset: 2px; }

/* 390 (AI_LANDING_M): one column, the media under the copy, the phone menu */
@media (max-width: 880px) {
  .nav-in { gap: .75rem; padding: 0 1rem; }
  .nav-acts { gap: 1rem; }
  .nav-logo, .nav-logo__lockup { height: 24px; }
  .nav-signin { font-size: var(--dl2-type-t-body-size); }
  .nav .btn { padding: 7px 12px; font-size: var(--dl2-type-t-small-size); line-height: var(--dl2-type-t-small-line); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 3rem 1rem; }
  .hero h1 { font-size: var(--dl2-type-www-hero-phone-size); line-height: var(--dl2-type-www-hero-phone-line); }
  .sec-in { padding: 3rem 1rem; }
  .sec-head { margin-bottom: 1.5rem; }
  .sec-head h2 { font-size: var(--dl2-type-serif-display-size); line-height: var(--dl2-type-serif-display-line); }
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 1rem; }
  .card-wide { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem; }
  .request-card { padding: 1.25rem; }
  .request-card .btn { width: 100%; }
  .faq-item .answer { padding-left: 0; }
  .ftr { padding: 2rem 0 1.5rem; }
  .ftr-in { padding: 0 1rem; }
  .ftr-lead { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .ftr-lead .btn { justify-self: stretch; min-height: 44px; }
  .ftr-links { gap: 0; }
  .ftr-talk__links { flex-direction: column; gap: 0; }   /* DL2_FOOTER_M: the Talk to us links stack */
  .ftr-talk__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr-fam { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .nav-signin { transition: none; }
}

/* ==== PR #5818 picture slots (design hub g22, B13 round 2) ===========================================
   Replaces the PR's slot block (munipro-ai-landing.css lines 82-90 and the phone hero rule, line 150); see header/CHROME.md for
   the order. Every class is in the template's .slot family (slot-*), every @keyframes is slot-*. No inline style: the motion is
   these classes and keyframes only, so it runs under style-src 'self'. Ported from the launch board's frame_l8.py. */

/* the boxes: the PR's shapes, with the hero at the frame's window and the record equal to the assistant (banker grid) */
.slot { position: relative; display: block; width: 100%; max-width: none; margin: 0; border: 1px solid var(--dl2-color-rule);
  border-radius: var(--dl2-radius-tag); background: var(--dl2-color-surface); }
.slot[data-slot="hero-answer"] { aspect-ratio: 691 / 534; border-radius: var(--dl2-radius-card); box-shadow: var(--dl2-elevation-2); }
.slot[data-slot="does-assistant"] { aspect-ratio: 850 / 500; }
.slot[data-slot="does-record"] { aspect-ratio: 850 / 500; }
.slot[data-slot="does-connector"] { aspect-ratio: 788 / 418; }
.slot[data-slot="does-deliverables"] { aspect-ratio: 3 / 2; }
.slot[data-slot="does-access"] { aspect-ratio: 16 / 7; border: 0; }
@media (max-width: 880px) {
  .slot[data-slot="hero-answer"] { aspect-ratio: 382 / 404; }   /* trimmed to the last citation; the still keeps its 382 / 508 and crops at the foot */
}
/* the caption (the badge, the Illustration tag) sits under the box, never on the picture */
.slot:has(> figcaption) { margin-bottom: 2.25rem; }
.slot > figcaption { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: .5rem 0 0; color: var(--dl2-color-muted); font-family: var(--dl2-font-ui); font-size: var(--dl2-type-t-cell-size); line-height: var(--dl2-type-t-cell-line); }
.slot-media { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--dl2-color-surface); }
.slot-media--paper { display: flex; align-items: stretch; justify-content: center; padding: 1rem; background: var(--dl2-color-sky); }
.slot-media--plain { display: flex; align-items: center; justify-content: center; padding: 1.25rem 0 0; background: var(--dl2-color-surface); }
.slot-media > picture { display: contents; }
.slot-tag { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px dashed var(--dl2-color-faint); border-radius: var(--dl2-radius-tag); color: var(--dl2-color-muted);
  font-family: var(--dl2-font-mono); font-size: var(--dl2-type-t-meta-size); font-weight: 500; letter-spacing: .14em; line-height: var(--dl2-type-t-meta-line); text-transform: uppercase; }
.slot-sample { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--dl2-radius-tag); background: var(--dl2-color-sapphire); color: var(--dl2-color-surface);
  font-family: var(--dl2-font-ui); font-size: var(--dl2-type-t-meta-size); font-weight: 500; line-height: var(--dl2-type-t-meta-line); white-space: nowrap; }

/* the pans: a box onto one still that moves over 10 s (transform only), never past 2x its first window */
.slot-pan { position: absolute; top: 0; left: 0; max-width: none; height: auto; transform-origin: 0 0;
  animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }

/* hero-answer: the window, still; the answer streams (a white curtain steps down line by line, 10 s, frame_l8 l8-stream) */
.slot-hero .slot-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.slot-stream { position: absolute; overflow: hidden; }
.slot-stream__curtain { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--dl2-color-surface); border-top: 2px solid var(--dl2-color-action-line);
  animation: slot-stream 10s infinite step-end; }
@keyframes slot-stream {
  /* results only (Will 10-18 16:03Z): the question, then the answer; no tool-call lines (their two steps are gone, the rest moved up 117 px) */
  0% { transform: translateY(0%); } 3% { transform: translateY(13.14%); } 25% { transform: translateY(22.39%); } 30% { transform: translateY(28.39%); } 35% { transform: translateY(34.39%); } 40% { transform: translateY(40.39%); } 45% { transform: translateY(46.39%); } 50% { transform: translateY(52.68%); } 55% { transform: translateY(58.96%); } 59% { transform: translateY(68.10%); } 63% { transform: translateY(76.68%); }
  67% { transform: translateY(101%); } 96% { transform: translateY(101%); } 100% { transform: translateY(0%); } }

/* hero-answer: desktop, the frame's whole assistant window (691 / 534); phone, the assistant panel (382 / 508, the PR's) */
@media (min-width: 881px) {
  .slot-hero figcaption .slot-sample { display: none; }        /* the window's own bar carries the badge */
}
.slot-hero .slot-stream { left: 9.359%; top: 12.637%; width: 81.137%; height: 84.354%; }
@media (max-width: 880px) {
  .slot-hero .slot-media img { height: auto; }
  .slot-hero .slot-stream { left: 0; top: 18.607%; width: 100%; height: 75.730%; }
}

/* does-assistant, does-record, does-connector: each still's own pan, the frame's windows (frame_l8 A_PAN, S1_REC, K_PAN) */
.slot-card[data-slot="does-assistant"] .slot-pan { width: 100.0000%; animation-name: slot-pan-assistant; }
@keyframes slot-pan-assistant { 0% { transform: scale(1.0000) translate(0.0000%, 0.0000%); } 12% { transform: scale(1.0000) translate(0.0000%, 0.0000%); } 30% { transform: scale(1.4857) translate(-0.9615%, 0.0000%); } 42% { transform: scale(1.4857) translate(-0.9615%, 0.0000%); } 58% { transform: scale(1.4857) translate(-31.7308%, -32.2449%); } 68% { transform: scale(1.4857) translate(-31.7308%, -32.2449%); } 76% { transform: scale(1.0000) translate(0.0000%, 0.0000%); } 100% { transform: scale(1.0000) translate(0.0000%, 0.0000%); } }
.slot-card[data-slot="does-record"] .slot-pan { width: 173.9387%; animation-name: slot-pan-record; }
@keyframes slot-pan-record { 0% { transform: scale(1.0000) translate(0.0000%, 0.0000%); } 15% { transform: scale(1.0000) translate(0.0000%, 0.0000%); } 35% { transform: scale(1.0000) translate(-42.5085%, 0.0000%); } 55% { transform: scale(1.0000) translate(-42.5085%, 0.0000%); } 72% { transform: scale(1.0000) translate(0.0000%, 0.0000%); } 100% { transform: scale(1.0000) translate(0.0000%, 0.0000%); } }
.slot-card[data-slot="does-connector"] .slot-pan { width: 100.0000%; animation-name: slot-pan-connector; }
@keyframes slot-pan-connector { 0% { transform: scale(1.0000) translate(0.0000%, -18.0392%); } 15% { transform: scale(1.0000) translate(0.0000%, -18.0392%); } 35% { transform: scale(1.4812) translate(-0.5076%, 0.0000%); } 55% { transform: scale(1.4812) translate(-0.5076%, 0.0000%); } 75% { transform: scale(1.0000) translate(0.0000%, -18.0392%); } 100% { transform: scale(1.0000) translate(0.0000%, -18.0392%); } }

/* does-deliverables, drawn: the memo's page turns, the deck's slides advance (10 s) */
.slot-docs { display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); grid-template-rows: minmax(0, 1fr); gap: .75rem; width: 100%; height: 100%; }
.slot-file { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: 10px 11px; border: 1px solid var(--dl2-color-rule); border-radius: var(--dl2-radius-tag);
  background: var(--dl2-color-surface); box-shadow: var(--dl2-elevation-1); color: var(--dl2-color-text); }
.slot-file__k { align-self: flex-start; display: inline-block; margin-bottom: 6px; padding: 1px 6px; border: 1px solid var(--dl2-color-action-line); border-radius: var(--dl2-radius-tag);
  background: var(--dl2-color-sky); color: var(--dl2-color-action-pressed); font-family: var(--dl2-font-mono); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.slot-file__t { margin: 0; color: var(--dl2-color-ink); font-family: var(--dl2-font-display); font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.slot-file__m { margin-top: 3px; color: var(--dl2-color-muted); font-size: 9.5px; line-height: 1.35; }
.slot-memo__rule { height: 1px; margin: 7px 0; background: var(--dl2-color-rule); }
.slot-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; margin: 0; font-size: 9.5px; line-height: 1.35; }
.slot-kv dt { color: var(--dl2-color-muted); }
.slot-kv dd { margin: 0; color: var(--dl2-color-ink); font-variant-numeric: lining-nums tabular-nums; font-family: var(--dl2-font-mono); text-align: right; }
.slot-memo__ai { margin-top: 8px; padding: 6px 7px; border: 1px dashed var(--dl2-color-action-line); border-radius: var(--dl2-radius-tag); background: repeating-linear-gradient(135deg, var(--dl2-color-sky) 0 5px, var(--dl2-color-surface) 5px 10px); }
.slot-memo__ai b { display: block; margin-bottom: 4px; color: var(--dl2-color-action-pressed); font-family: var(--dl2-font-mono); font-size: 8.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.slot-memo__ai i, .slot-lines i { display: block; height: 4px; margin-top: 4px; border-radius: var(--dl2-radius-tag); background: var(--dl2-color-action-line); }
.slot-lines i:nth-child(3n) { width: 88%; } .slot-lines i:nth-child(4n) { width: 94%; } .slot-lines i:last-child { width: 58%; }
.slot-memo__ai i:nth-of-type(2) { width: 88%; } .slot-memo__ai i:nth-of-type(3) { width: 94%; } .slot-memo__ai i:nth-of-type(4) { width: 62%; }
.slot-pages { position: relative; flex: 1; overflow: hidden; perspective: 900px; }
.slot-page { background: var(--dl2-color-surface); }
.slot-page--2 { position: absolute; inset: 0; }
.slot-page--1 { position: relative; z-index: 1; height: 100%; transform-origin: 0 50%; animation: slot-turn 10s infinite cubic-bezier(.45, 0, .25, 1); }
@keyframes slot-turn { 0%, 25% { transform: scaleX(1); box-shadow: none; } 33% { transform: scaleX(.35); box-shadow: 6px 0 10px -6px var(--dl2-color-faint); }
  38%, 90% { transform: scaleX(0); } 95% { transform: scaleX(.35); } 100% { transform: scaleX(1); } }
.slot-page__h { display: block; color: var(--dl2-color-action-pressed); font-family: var(--dl2-font-mono); font-size: 8.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.slot-deck__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--dl2-color-rule); border-radius: var(--dl2-radius-tag); background: var(--dl2-color-surface); }
.slot-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 12px; opacity: 0;
  animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; }
.slot-slide--1 { animation-name: slot-s1; border-left: 4px solid var(--dl2-color-action-pressed); } .slot-slide--2 { animation-name: slot-s2; } .slot-slide--3 { animation-name: slot-s3; }
@keyframes slot-s1 { 0%, 30% { opacity: 1; transform: translateX(0); } 33%, 97% { opacity: 0; transform: translateX(-12px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes slot-s2 { 0%, 30% { opacity: 0; transform: translateX(12px); } 33%, 63% { opacity: 1; transform: translateX(0); } 66%, 100% { opacity: 0; transform: translateX(-12px); } }
@keyframes slot-s3 { 0%, 63% { opacity: 0; transform: translateX(12px); } 66%, 97% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-12px); } }
.slot-slide__t { margin: 0; color: var(--dl2-color-ink); font-family: var(--dl2-font-display); font-size: 15px; font-weight: 600; line-height: 1.2; }
.slot-slide__s { margin: 0; color: var(--dl2-color-muted); font-size: 10px; line-height: 1.35; }
.slot-slide__n { position: absolute; right: 8px; bottom: 6px; color: var(--dl2-color-muted); font-family: var(--dl2-font-mono); font-size: 8.5px; }
.slot-slide .slot-kv { max-width: 220px; }

/* does-access, drawn: a request runs from You to MuniPro AI and back, inside your entitlements, inside your company (10 s) */
.slot-g { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.slot-fence { position: relative; padding: 2rem 1.5rem 1.5rem; border: 2px dashed var(--dl2-color-action-line); border-radius: var(--dl2-radius-card); background: var(--dl2-color-surface); }
.slot-fence__k { position: absolute; top: -10px; left: 16px; padding: 0 8px; background: var(--dl2-color-surface); color: var(--dl2-color-action-pressed); font-family: var(--dl2-font-mono);
  font-size: var(--dl2-type-t-meta-size); font-weight: 500; letter-spacing: .12em; line-height: var(--dl2-type-t-meta-line); text-transform: uppercase; }
.slot-fence__co { position: relative; padding: 2rem 1.5rem 1.5rem; border: 1px solid var(--dl2-color-action-line); border-radius: var(--dl2-radius-card); background: var(--dl2-color-sky); }
.slot-fence__co > .slot-fence__k { background: var(--dl2-color-sky); }
.slot-fence__you { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; }
.slot-fence__you b { color: var(--dl2-color-ink); font-size: var(--dl2-type-t-title-size); line-height: var(--dl2-type-t-title-line); }
.slot-chip { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--dl2-color-action-soft); border-radius: var(--dl2-radius-tag); background: var(--dl2-color-sky); color: var(--dl2-color-action-pressed); }
.slot-chip--ai { background: var(--dl2-color-surface); animation: slot-ai 10s infinite linear; }
@keyframes slot-ai { 0%, 20% { box-shadow: 0 0 0 0 var(--dl2-color-action-line); } 26%, 34% { box-shadow: 0 0 0 5px var(--dl2-color-action-line); } 40%, 100% { box-shadow: 0 0 0 0 var(--dl2-color-action-line); } }
.slot-fence__arrow { position: relative; display: inline-flex; justify-content: center; width: 56px; color: var(--dl2-color-action); }
.slot-pulse { position: absolute; top: calc(50% - 4px); left: 0; width: 8px; height: 8px; border-radius: 50%; opacity: 0;
  animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; }
.slot-pulse--q { background: var(--dl2-color-action-hover); animation-name: slot-q; }
.slot-pulse--a { border: 2px solid var(--dl2-color-action-hover); background: var(--dl2-color-surface); animation-name: slot-a; }
@keyframes slot-q { 0%, 4% { opacity: 0; transform: translateX(0); } 6% { opacity: 1; } 22% { opacity: 1; transform: translateX(48px); } 24%, 100% { opacity: 0; transform: translateX(48px); } }
@keyframes slot-a { 0%, 36% { opacity: 0; transform: translateX(48px); } 38% { opacity: 1; } 54% { opacity: 1; transform: translateX(0); } 56%, 100% { opacity: 0; transform: translateX(0); } }

/* the loops, once the hub sends a cut (video-swap.md): the video plays; under reduced motion its poster <img> shows instead */
.slot-video__v, .slot-video__poster { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; background: var(--dl2-color-surface); }
.slot-video__poster { display: none; }
/* Still-only until the egress guard covers MP4/WebM (opaque video is fail-closed in check_mcp_brand_egress.py). */
.slot-video__poster.slot-video__still { display: block; }
.slot-media > picture { display: contents; }

/* 390 (the PR's 880 px break) */
@media (max-width: 880px) {
  .slot-media--paper { padding: .625rem; }
  .slot-docs { gap: .5rem; }
  .slot-file { padding: 7px 8px; }
  .slot-media--plain { padding-top: .75rem; }
  .slot-fence { padding: 1.25rem .5rem .75rem; }
  .slot-fence__co { padding: 1.25rem .5rem .625rem; }
  .slot-fence__you { gap: .375rem; }
  .slot-chip { width: 34px; height: 34px; }
  .slot-fence__you b { font-size: var(--dl2-type-t-cell-size); line-height: var(--dl2-type-t-cell-line); }
  .slot-fence__arrow { width: 40px; }
}

/* reduced motion: every picture holds its rest frame (8 s into the loop): the answer fully streamed, each pan on its rest
   window, the memo on page 1 (its title and par), the deck on slide 1, the access diagram still; a loop shows its poster */
@media (prefers-reduced-motion: reduce) {
  .slot-stream__curtain { display: none; }
  .slot-pan, .slot-page--1, .slot-slide, .slot-chip--ai, .slot-pulse { animation: none; }
  .slot-card[data-slot="does-assistant"] .slot-pan { transform: scale(1.0000) translate(0.0000%, 0.0000%); }
  .slot-card[data-slot="does-record"] .slot-pan { transform: scale(1.0000) translate(0.0000%, 0.0000%); }
  .slot-card[data-slot="does-connector"] .slot-pan { transform: scale(1.0000) translate(0.0000%, -18.0392%); }
  .slot-page--1 { transform: none; }
  .slot-slide--2, .slot-slide--3 { opacity: 0; }
  .slot-slide--1 { opacity: 1; transform: none; }
  .slot-pulse { opacity: 0; }
  .slot-video__v { display: none; }
  .slot-video__poster { display: block; }
}

/* ==== The skills directory (#skills) and the skill pages (templates/muni/ai_skill_detail.html) ======================
   Ported from design-hub's frames SKILLS_DIR / SKILLS_DIR_M and SKILL_DETAIL / SKILL_DETAIL_M (board frame_q.py, DL2 2.0.6).
   Every class is sk-*; every value is a --dl2-* token above. No resting shadow on a card. */
.sk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sk-sec ul { padding: 0; list-style: none; }
.sk-sec button { font-family: inherit; }
.sk-sec .sec-head.sk-head { margin-bottom: 0; }
.sk-sec .sk-lede { margin-top: 16px; color: var(--dl2-color-muted); font-size: var(--dl2-type-www-read-size); line-height: var(--dl2-type-www-read-line); }
.sk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 18px; border: 1px solid var(--dl2-color-action-line);
  border-radius: var(--dl2-radius-control); font: 600 14px/20px var(--dl2-font-ui); text-decoration: none; cursor: pointer; white-space: nowrap; }
.sk-btn--outline { background: var(--dl2-color-surface); color: var(--dl2-color-action); }
.sk-btn--outline:hover { background: var(--dl2-color-action-soft); }
.sk-btn--solid { background: var(--dl2-color-action); border-color: var(--dl2-color-action); color: var(--dl2-color-on-action); }
.sk-btn--solid:hover { background: var(--dl2-color-action-hover); border-color: var(--dl2-color-action-hover); color: var(--dl2-color-on-action); }

/* filters: three groups in one row; 44 px chips; no counts */
.sk-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; margin-top: 40px; }
.sk-fg__k { margin-bottom: 8px; color: var(--dl2-color-muted); font: 600 11px/16px var(--dl2-font-ui); letter-spacing: .06em; text-transform: uppercase; }
.sk-fg__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-f { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 1px solid var(--dl2-color-rule-strong); border-radius: var(--dl2-radius-control);
  background: var(--dl2-color-surface); color: var(--dl2-color-text); font: 500 14px/20px var(--dl2-font-ui); cursor: pointer; white-space: nowrap; }
.sk-f:hover { border-color: var(--dl2-color-control-border); }
.sk-f[aria-pressed="true"] { border-color: var(--dl2-color-action); background: var(--dl2-color-action-soft); color: var(--dl2-color-ink); }
.sk-f__ck { display: none; color: var(--dl2-color-action); }
.sk-f[aria-pressed="true"] .sk-f__ck { display: inline-flex; }
.sk-fbar, .sk-sheet, .sk-scrim { display: none; }

/* the grid: three equal tracks, cards in a row share a height; the Ask card fills the last row */
.sk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.sk-card, .sk-ask { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border: 1px solid var(--dl2-color-rule);
  border-radius: var(--dl2-radius-card); background: var(--dl2-color-surface); box-shadow: none; }
.sk-card:hover { border-color: var(--dl2-color-action-line); }
.sk-card[hidden], .sk-ask[hidden] { display: none; }
.sk-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.sk-outs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sk-out { display: inline-flex; align-items: center; gap: 5px; color: var(--dl2-color-muted); font: 500 12px/16px var(--dl2-font-ui); }
.sk-out .sk-glyph { flex: none; color: var(--dl2-color-ink); }
.sk-status { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 24px; padding: 0 8px; border: 1px solid var(--dl2-color-rule);
  border-radius: var(--dl2-radius-tag); background: var(--dl2-color-surface); font: 600 12px/16px var(--dl2-font-ui); }
.sk-status--live { color: var(--dl2-color-good); }
.sk-status--coming { color: var(--dl2-color-muted); background: var(--dl2-color-tint); }
.sk-kicker { margin-bottom: -6px; color: var(--dl2-color-action); font: 600 11px/16px var(--dl2-font-ui); letter-spacing: .06em; text-transform: uppercase; }
.sk-card__name { color: var(--dl2-color-ink); font: 600 18px/24px var(--dl2-font-ui); letter-spacing: -0.005em; }
.sk-card__result { color: var(--dl2-color-text); font: 400 15px/22px var(--dl2-font-ui); }
.sk-rebuilt { padding-top: 12px; border-top: 1px solid var(--dl2-color-rule); }
.sk-rebuilt__k { margin-bottom: 2px; color: var(--dl2-color-muted); font: 600 11px/16px var(--dl2-font-ui); letter-spacing: .06em; text-transform: uppercase; }
.sk-rebuilt__t { color: var(--dl2-color-muted); font: 400 13px/20px var(--dl2-font-ui); }
.sk-review { display: flex; gap: 6px; color: var(--dl2-color-muted); font: 400 12px/18px var(--dl2-font-ui); }
.sk-review svg { flex: none; margin-top: 3px; }
.sk-card__foot { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--dl2-color-rule); }
.sk-hosts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--dl2-color-muted); font: 400 12px/16px var(--dl2-font-ui); }
.sk-hosts__k { margin-right: 2px; }
.sk-host { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px solid var(--dl2-color-rule); border-radius: var(--dl2-radius-tag);
  background: var(--dl2-color-page); color: var(--dl2-color-text); font: 500 12px/16px var(--dl2-font-ui); }
.sk-more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; margin-bottom: -10px; color: var(--dl2-color-action);
  font: 600 14px/20px var(--dl2-font-ui); text-decoration: none; }
.sk-more:hover { color: var(--dl2-color-action-hover); text-decoration: underline; }
.sk-card--etc .sk-card__result { color: var(--dl2-color-muted); }
.sk-ask { justify-content: center; border-style: dashed; border-color: var(--dl2-color-rule-strong); background: var(--dl2-color-page); }
.sk-ask[data-span="2"] { grid-column: span 2; }
.sk-ask[data-span="3"] { grid-column: span 3; }
.sk-ask__t { max-width: 520px; color: var(--dl2-color-muted); font: 400 15px/22px var(--dl2-font-ui); }
.sk-ask .sk-more { margin: 0; }
.sk-empty { display: flex; align-items: center; gap: 16px; margin-top: 32px; padding: 20px; border: 1px solid var(--dl2-color-rule); border-radius: var(--dl2-radius-card);
  background: var(--dl2-color-page); }
.sk-empty[hidden] { display: none; }

/* the skill page: the head and the capture well, then the panels, then Pairs with */
.sk-sec--detail .sec-in { padding-top: 4rem; }
.sk-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.sk-dhead { grid-column: span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sk-crumb { display: flex; align-items: center; gap: 8px; color: var(--dl2-color-muted); font: 500 13px/20px var(--dl2-font-ui); }
.sk-crumb a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--dl2-color-action); text-decoration: none; }
.sk-h { color: var(--dl2-color-ink); font: 600 var(--dl2-type-www-section-size)/var(--dl2-type-www-section-line) var(--dl2-font-display); letter-spacing: -0.005em; }
.sk-sec .sk-lede--detail { margin-top: 0; color: var(--dl2-color-text); font-size: var(--dl2-type-www-read-size); line-height: var(--dl2-type-www-read-line); }
.sk-well { grid-column: span 8; position: relative; margin: 0; }
.sk-well__img { aspect-ratio: 16 / 10; border: 1px solid var(--dl2-color-rule); border-radius: var(--dl2-radius-card); overflow: hidden; background: var(--dl2-color-tint); }
.sk-badge { position: absolute; top: 8%; right: 6.5%; padding: 1px 7px; border: 1px solid var(--dl2-color-rule); border-radius: var(--dl2-radius-tag);
  background: var(--dl2-color-surface); color: var(--dl2-color-muted); font: 400 12px/16px var(--dl2-font-ui); white-space: nowrap; }
.sk-dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
/* no capture yet: the head runs alone; a lone last panel spans both columns (Use it in and Read the skill stay paired) */
.sk-hero--solo .sk-dhead { grid-column: 1 / -1; max-width: 760px; }
.sk-dgrid > .sk-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
img.sk-well__img { display: block; width: 100%; height: auto; }
.sk-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px 24px; border: 1px solid var(--dl2-color-rule);
  border-radius: var(--dl2-radius-card); background: var(--dl2-color-surface); }
.sk-panel--note { background: var(--dl2-color-page); }
.sk-panel__h { color: var(--dl2-color-ink); font: 600 16px/24px var(--dl2-font-ui); }
.sk-panel__t { color: var(--dl2-color-text); font: 400 15px/22px var(--dl2-font-ui); }
.sk-panel__t--muted { color: var(--dl2-color-muted); font-size: 13px; line-height: 20px; }
.sk-list { display: flex; flex-direction: column; gap: 8px; }
.sk-list li { position: relative; padding-left: 16px; color: var(--dl2-color-text); font: 400 15px/22px var(--dl2-font-ui); }
.sk-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--dl2-color-muted); }
.sk-list--words { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.sk-list--words li { padding: 2px 8px; border: 1px solid var(--dl2-color-rule); border-radius: var(--dl2-radius-tag); background: var(--dl2-color-page); font-size: 13px; line-height: 20px; }
.sk-list--words li::before { display: none; }
.sk-use { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.sk-use__guides { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.sk-guide { display: inline-flex; align-items: center; min-height: 44px; color: var(--dl2-color-action); font: 600 14px/20px var(--dl2-font-ui); text-decoration: none; }
.sk-guide:hover { text-decoration: underline; }
.sk-path { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--dl2-color-rule);
  border-radius: var(--dl2-radius-control); background: var(--dl2-color-page); color: var(--dl2-color-action); text-decoration: none; }
.sk-path svg { flex: none; }
.sk-path code { min-width: 0; color: var(--dl2-color-text); font: 400 13px/20px var(--dl2-font-mono); overflow-wrap: anywhere; }
.sk-path:hover { border-color: var(--dl2-color-action-line); }
.sk-pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-top: 48px; }
.sk-pairs__h { align-self: start; padding-top: 20px; font-size: 20px; line-height: 28px; }

/* about 1024: two tracks */
@media (max-width: 1100px) {
  .sk-grid, .sk-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-pairs__h { grid-column: 1 / -1; padding-top: 0; }
  .sk-dhead, .sk-well { grid-column: span 12; }
}

/* phone: one track, Filters opens a sheet, 44 px targets, 12 px between cards */
@media (max-width: 760px) {
  .sk-sec .sec-head h2, .sk-h { font-size: var(--dl2-type-serif-display-size); line-height: var(--dl2-type-serif-display-line); }
  .sk-filters { display: none; }
  .sk-fbar { display: flex; align-items: center; gap: 8px; margin: 24px -1rem 0 0; }
  .sk-fbtn { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 14px; border: 1px solid var(--dl2-color-control-border);
    border-radius: var(--dl2-radius-control); background: var(--dl2-color-surface); color: var(--dl2-color-ink); font: 600 14px/20px var(--dl2-font-ui); cursor: pointer; }
  .sk-fbar__roles { display: flex; gap: 8px; min-width: 0; overflow-x: auto; padding-right: 1rem; scrollbar-width: none; }
  .sk-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
  .sk-ask[data-span] { grid-column: auto; }
  .sk-card, .sk-ask { padding: 16px; }
  .sk-scrim:not([hidden]) { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 140; background: color-mix(in srgb, var(--dl2-color-ink) 32%, transparent); }
  .sk-sheet:not([hidden]) { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 141; max-height: 86%;
    border-radius: var(--dl2-radius-card) var(--dl2-radius-card) 0 0; background: var(--dl2-color-surface); box-shadow: var(--dl2-elevation-2); }
  .sk-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 8px 16px; border-bottom: 1px solid var(--dl2-color-rule); }
  .sk-sheet__h { color: var(--dl2-color-ink); font: 600 16px/24px var(--dl2-font-ui); }
  .sk-sheet__h:focus { outline: none; }
  .sk-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--dl2-radius-control);
    background: transparent; color: var(--dl2-color-muted); cursor: pointer; }
  .sk-sheet__body { display: flex; flex-direction: column; gap: 20px; padding: 16px; overflow-y: auto; }
  .sk-sheet__foot { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; padding: 12px 16px 16px; border-top: 1px solid var(--dl2-color-rule); }
  .sk-sec--detail .sec-in { padding-top: 2rem; }
  .sk-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sk-dhead, .sk-well { grid-column: auto; }
  .sk-badge { position: static; display: inline-block; margin-top: 8px; }
  .sk-dgrid, .sk-pairs { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
  .sk-panel { padding: 16px; }
  .sk-pairs__h { padding-top: 12px; }
  .sk-use .sk-btn { width: 100%; }
}

/* Request access: the demo form in a modal (templates/muni/_ai_request_access_modal.html,
   static/js/munipro-ai-request-access.js); the form's fields arrive from /marketing/demo/ and take these styles. */
html:has(.ra-modal[open]) { overflow: hidden; }
.ra-modal { --ra-error: #B42318; width: min(560px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 1px solid var(--dl2-color-rule); border-radius: var(--dl2-radius-card); background: var(--dl2-color-surface); color: var(--dl2-color-text); font-family: var(--dl2-font-ui); font-size: var(--dl2-type-t-body-size); line-height: var(--dl2-type-t-body-line); box-shadow: var(--dl2-elevation-2); overflow: auto; overscroll-behavior: contain; }
.ra-modal::backdrop { background: rgba(12, 33, 64, .55); }
.ra-modal__in { padding: 1.5rem; }
.ra-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ra-modal__title { color: var(--dl2-color-ink); font-family: var(--dl2-font-display); font-size: var(--dl2-type-serif-display-size); line-height: var(--dl2-type-serif-display-line); font-weight: 600; }
.ra-modal__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -6px -6px 0 0; padding: 0; border: 0; border-radius: var(--dl2-radius-control); background: transparent; color: var(--dl2-color-muted); font: 400 26px/1 var(--dl2-font-ui); cursor: pointer; }
.ra-modal__close:hover { background: var(--dl2-color-tint); color: var(--dl2-color-ink); }
.ra-modal__close:focus-visible, .ra-modal .btn:focus-visible, .ra-modal a:focus-visible { outline: 2px solid var(--dl2-color-focus-ring); outline-offset: 2px; }
.ra-modal__dek { margin-top: .5rem; color: var(--dl2-color-muted); }
.ra-modal__body { margin-top: 1.25rem; }
.ra-modal__msg { margin: 0; color: var(--dl2-color-text); font-size: var(--dl2-type-www-read-size); line-height: var(--dl2-type-www-read-line); }
.ra-modal__msg--done { color: var(--dl2-color-ink); font-weight: 600; }
.ra-modal__msg--error { color: var(--ra-error); }
.ra-modal__msg a { color: var(--dl2-color-action); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ra-modal__acts { margin-top: 1.25rem; }
.ra-form p { margin: 0 0 1rem; }
.ra-form label { display: block; margin-bottom: 6px; color: var(--dl2-color-ink); font-size: var(--dl2-type-t-cell-size); line-height: var(--dl2-type-t-cell-line); font-weight: 600; }
.ra-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .ra-form select, .ra-form textarea { display: block; width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--dl2-color-control-border); border-radius: var(--dl2-radius-control); background: var(--dl2-color-surface); color: var(--dl2-color-text); font-family: var(--dl2-font-ui); font-size: 16px; line-height: 24px; }
.ra-form textarea { min-height: 112px; resize: vertical; }
.ra-form input:focus-visible, .ra-form select:focus-visible, .ra-form textarea:focus-visible { outline: 2px solid var(--dl2-color-focus-ring); outline-offset: 2px; border-color: var(--dl2-color-action); }
.ra-form p:has(> input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: 10px; }
.ra-form p:has(> input[type="checkbox"]) label { margin: 0; color: var(--dl2-color-text); font-weight: 400; }
.ra-form input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--dl2-color-action); }
.ra-form .helptext { display: block; margin-top: 4px; color: var(--dl2-color-muted); font-size: var(--dl2-type-t-small-size); line-height: var(--dl2-type-t-small-line); }
.ra-form .errorlist { margin: 0 0 6px; padding: 0; list-style: none; color: var(--ra-error); font-size: var(--dl2-type-t-cell-size); line-height: var(--dl2-type-t-cell-line); }
.ra-form .errorlist.nonfield { margin-bottom: 1rem; }
.ra-form__submit { margin-top: .25rem; }
.ra-form__submit:disabled { opacity: .6; cursor: progress; }
@media (max-width: 880px) {
  .ra-modal { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .ra-modal__in { padding: 1.25rem 1rem; }
  .ra-form__submit, .ra-modal__acts .btn { width: 100%; min-height: 44px; }
}