(it has to be, to sit above the page in the stacking context), so anything scoped to #uc-app alone never reaches it — which silently left the drawer in Times New Roman and collapsed `border: … var(--uc-line)` to `0px none`, breaking the "DM Sans only" and outlined-button rules (§2.2). The same trap applies to the two roots added with the per-industry split: #si-app (the /solutions index) and #uc-page (a use-case detail page). Adding a root here is not optional — miss one and it renders in the browser's default serif with every outlined border gone. */ /* The global header/footer are siblings of every root below, so the roots never reach them. This is the only page-level CSS these pages load, and the shared bundle only scopes --font-sans to `#header, .mobile-menu, .footer` without ever applying it — so with no base font here the chrome fell back to Times New Roman while the page body stayed DM Sans. Every other page CSS (integrations.css, automotive.css, …) carries this rule; keep it in sync. The stack is spelled out because this file defines no :root — var(--font-sans) is not in scope on here. */ body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } #uc-app, #si-app, #uc-page, .uc-drawer { --uc-ink: #1E1E24; --uc-mute: #6E6E78; --uc-line: #ECECEF; --uc-indigo: #6366f1; --uc-indigo-ink: #4338ca; --uc-bg-soft: #FBFBFC; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--uc-ink); } /* The section has three page types now: the industry gallery (#uc-app), the index (#si-app) and a use-case detail page (#uc-page). Same shell for all. */ #uc-app .container, #si-app .container, #uc-page .container { max-width: 1200px; margin: 0 auto; padding-inline: 24px; } /* ---------- hero ---------- */ .uc-hero { padding: 72px 0 32px; } .uc-hero__eyebrow { display: block; margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--uc-indigo-ink); } .uc-hero__h1 { margin: 0 0 16px; max-width: 16ch; font-size: clamp(32px, 4.4vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; } .uc-hero__lede { margin: 0 0 32px; max-width: 64ch; font-size: 17px; line-height: 1.65; color: var(--uc-mute); } /* ---------- search ---------- */ .uc-search { position: relative; max-width: 460px; } .uc-search__ic { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #9A9AA2; pointer-events: none; } #uc-q { width: 100%; padding: 13px 16px; padding-inline-start: 42px; border: 1.5px solid var(--uc-line); border-radius: 12px; background: #fff; font-family: inherit; font-size: 14.5px; color: var(--uc-ink); transition: border-color .15s ease, box-shadow .15s ease; } #uc-q::placeholder { color: #9A9AA2; } #uc-q:focus { outline: none; border-color: var(--uc-indigo); box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); } #uc-q::-webkit-search-cancel-button { cursor: pointer; } /* ---------- filters ---------- */ .uc-filters { padding: 8px 0 4px; } .uc-filters__grp + .uc-filters__grp { margin-top: 22px; } .uc-filters__lbl { margin-bottom: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9A9AA2; } /* Primary axis: operation (§4) */ .uc-ops { display: flex; flex-wrap: wrap; gap: 8px; } .uc-op { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px solid var(--uc-line); border-radius: 999px; background: transparent; /* outlined, never filled dark */ font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--uc-ink); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; } .uc-op:hover { border-color: #C9CBF5; background: #F7F8FF; } .uc-op:focus-visible { outline: 2px solid var(--uc-indigo); outline-offset: 2px; } .uc-op.is-active { border-color: var(--uc-indigo); background: #F4F5FF; color: var(--uc-indigo-ink); } .uc-op__ic { display: flex; color: var(--uc-indigo); } .uc-op__ic svg { width: 15px; height: 15px; } .uc-op__c { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #F1F1F4; font-size: 11px; font-weight: 700; color: var(--uc-mute); } .uc-op.is-active .uc-op__c { background: #E4E6FD; color: var(--uc-indigo-ink); } /* Secondary filter: industry */ .uc-chips { display: flex; flex-wrap: wrap; gap: 8px; } .uc-chip { padding: 7px 13px; border: 1.5px solid var(--uc-line); border-radius: 999px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--uc-mute); cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .uc-chip:hover { border-color: #C9CBF5; color: var(--uc-ink); } .uc-chip:focus-visible { outline: 2px solid var(--uc-indigo); outline-offset: 2px; } .uc-chip.is-active { border-color: var(--uc-indigo); background: #F4F5FF; color: var(--uc-indigo-ink); font-weight: 600; } /* ---------- results ---------- */ /* Was 88px bottom — that whitespace is now the proof strip's job, and the big gap read as a layout bug once the unstyled list sat in it. */ .uc-results { padding: 28px 0 40px; } .uc-count { margin: 0 0 16px; font-size: 13px; color: var(--uc-mute); } .uc-count #uc-count-n { font-weight: 700; color: var(--uc-ink); } .uc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } /* ---------- card (prototype TemplateCard anatomy, §2.1) ---------- */ /* The card is an

, not an : it has two targets. The title's link is stretched over the whole body (opens the detail) and the "Set up outcome" button sits above it (opens the register popup). A