.ucl {
    --ucl-brand: #5459fc;
    --ucl-text: #2d3748;
    --ucl-muted: #667085;
    --ucl-border: #d9dcf5;
    font: 300 18px/1.55 'Mabry Pro', sans-serif;
    color: var(--ucl-text);
    background: #fff;
    width: 100%;
    margin: 0;
    padding: 0;
}
/* Product header markup reuses the theme's existing MENU 2 rules. Overrides stay local. */
.ucl-site-header, .ucl-site-footer { font: 300 18px/1.5 'Mabry Pro', sans-serif; position: relative; margin: 0; }
.ucl-site-header *, .ucl-site-footer * { box-sizing: border-box; }
.ucl-site-header [hidden] { display: none !important; }
.ucl-site-header .header-l1 { position: relative; }
.ucl-site-header .topmen .header-l1 { position: fixed; }
.ucl-site-header .header-l1-in { min-height: 80px; }
.ucl-site-header .ucl-brand, .ucl-site-footer .ucl-brand { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; flex-shrink: 0; font-size: 28px; font-weight: 700; color: inherit; text-decoration: none; }
.ucl-site-header :is(a, button):focus-visible, .ucl-site-footer a:focus-visible { outline: 3px solid #ff9e02; outline-offset: 4px; }
.ucl-site-header .header_menu_button { padding-inline: 15px; }
.ucl-site-header .header_menu_button > a { color: #fff; background: #5358fc; border-radius: 4px; box-shadow: 0 0 16.3px #5459fc80; padding: 12px 20px 16px; font-size: 20px; font-weight: 700; line-height: 20px; }
.ucl-site-header .header_menu_button > a:hover { color: #fff; box-shadow: none; }
.ucl-site-header .header_menu_button > a::after { display: none; }
.ucl-site-header .main-navigation li:focus-within > .sub-menu { display: flex; left: 0; }
.ucl-site-header .header-l2 { display: none; }
.ucl-site-header .ucl-menu-toggle { display: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #2d3748; cursor: pointer; min-height: 44px; width: 44px; padding: 0; }
.ucl-site-header .ucl-menu-toggle .mob-btn-in { top: 21px; }
.ucl-site-header .ucl-submenu-toggle { display: none; }
.ucl-site-footer { background: #231f4c; color: #fff; padding: 32px 0; border-top: 2px solid #fe9e02; }
.ucl-site-footer .ucl-shell-inner { width: min(1200px, calc(100% - 48px)); margin-inline: auto; display: flex; flex-direction: column; gap: 24px; }
.ucl-site-footer .ucl-footer-row { display: flex; align-items: flex-start; gap: 32px; width: 100%; }
.ucl-site-footer .ucl-brand img { width: 25px; height: 32px; }
.ucl-site-footer .ucl-footer-content { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.ucl-site-footer nav { width: 100%; min-width: 0; }
.ucl-site-footer .ucl-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 28px; list-style: none; padding: 0; margin: 0; }
.ucl-site-footer .ucl-menu li { flex: 0 0 auto; margin: 0; padding: 0; list-style: none; text-align: left; }
.ucl-site-footer .ucl-menu a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 0; color: #fff; text-decoration: none; font-size: 20px; font-weight: 300; line-height: 28px; }
.ucl-site-footer .ucl-copyright { width: 100%; margin: 0; color: #fff; opacity: .7; font-size: 16px; line-height: 24px; text-align: left; }
.ucl-site-footer a:hover { color: #fe9e02; }
@media (max-width: 992px) {
    .ucl-site-header .header-l1-in { min-height: 70px; }
    .ucl-site-header.ucl-menu-ready .header-l2 { display: block; visibility: hidden; pointer-events: none; }
    .ucl-site-header.ucl-menu-open .header-l2 { visibility: visible; pointer-events: auto; }
    .ucl-site-header .header-l2-in { overflow-y: auto; padding-bottom: 32px; }
    .ucl-site-header.ucl-menu-ready .ucl-menu-toggle { display: block; top: 12px; }
    .ucl-site-header #site-navigation-mob .sub-menu { position: static; max-width: 100%; background: transparent; box-shadow: none; padding: 0 0 0 16px; }
    .ucl-site-header #site-navigation-mob .menu-item-has-children { display: flex; flex-wrap: wrap; width: 100%; }
    .ucl-site-header #site-navigation-mob .menu-item-has-children::after { display: none; }
    .ucl-site-header #site-navigation-mob .menu-item-has-children > a { pointer-events: auto; }
    .ucl-site-header #site-navigation-mob .menu-item-has-children > .sub-menu { display: none; flex-basis: 100%; }
    .ucl-site-header #site-navigation-mob .ucl-submenu-open > .sub-menu { display: flex; }
    .ucl-site-header .ucl-submenu-toggle { display: block; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: #2d3748; font: inherit; cursor: pointer; }
    .ucl-site-header:not(.ucl-menu-ready) .header-l1-in { height: auto; flex-wrap: wrap; }
    .ucl-site-header:not(.ucl-menu-ready) #site-navigation { display: block; position: static; width: 100%; height: auto; }
    .ucl-site-header:not(.ucl-menu-ready) #site-navigation ul { flex-wrap: wrap; }
    .ucl-site-header:not(.ucl-menu-ready) #site-navigation .sub-menu { display: flex; position: static; }
}
@media (max-width: 699px) {
    .ucl-site-footer .ucl-footer-row { flex-direction: column; gap: 24px; }
    .ucl-site-footer .ucl-brand { min-height: 32px; }
    .ucl-site-footer .ucl-footer-content { width: 100%; gap: 24px; }
    .ucl-site-footer .ucl-menu { flex-direction: column; align-items: flex-start; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .ucl-site-header *, .ucl-site-header *::before, .ucl-site-header *::after { transition: none !important; } }
.ucl *, .ucl *::before, .ucl *::after { box-sizing: border-box; }
.ucl [hidden] { display: none !important; }
.ucl :is(h1, h2, h3, p, figure, ul, ol) { margin: 0; }
.ucl :is(h1, h2, h3) { font-family: inherit; font-weight: 700; color: var(--ucl-text); text-transform: none; overflow-wrap: anywhere; }
.ucl :is(button, input) { font-family: inherit; }
.ucl a { text-decoration: none; }
.ucl :is(a, button, input):focus-visible { outline: 3px solid #3038c7; outline-offset: 4px; }
.ucl [tabindex='-1']:focus { outline: none; }
.ucl-container { width: min(1140px, calc(100% - 96px)); margin-inline: auto; }
.ucl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ucl-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 54px; padding: 18px 40px; border: 0; border-radius: 4px;
    background: var(--ucl-brand); color: #fff; font-size: 18px; line-height: 18px;
    font-weight: 700; cursor: pointer; text-align: center; box-shadow: none;
    transition: background-color .15s, box-shadow .15s;
}
.ucl-button:visited { color: #fff; }
.ucl-button:hover { background: #4146dc; color: #fff; }
.ucl-button-secondary, .ucl-button-secondary:visited { background: #fff; color: var(--ucl-brand); }
.ucl-button-secondary:hover { background: #f2f3ff; color: #4146dc; }
.ucl-hero { background: #f6f5ff url('../../images/use-case-library/hero-desktop.png') center/cover no-repeat; padding: 72px 0 40px; }
.ucl-hero > .ucl-container { display: flex; flex-direction: column; gap: 64px; }
.ucl-hero-main { display: grid; grid-template-columns: minmax(0, 620fr) minmax(0, 464fr); gap: 56px; min-height: 500px; }
.ucl-hero-message { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ucl-eyebrow { color: #5358fc; font-size: 14px; line-height: 18px; font-weight: 700; }
.ucl-hero h1 { font-size: 48px; line-height: 54px; max-width: 620px; }
.ucl-hero-description { font-size: 19px; line-height: 29px; color: #414b5d; max-width: 600px; }
.ucl-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ucl-actions .ucl-button { width: 190px; min-width: max-content; flex-shrink: 0; padding-inline: 20px; white-space: nowrap; }
.ucl-hero-cards { padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ucl-hero-card { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 15px 16px; background: rgba(255,255,255,.98); border-radius: 10px; }
.ucl-hero-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 60px; height: 60px; background: #ecedff; border-radius: 8px; }
.ucl-hero-icon img, .ucl-search > img, .ucl-metric img { display: block; flex-shrink: 0; max-width: none; }
.ucl-hero-card > div { min-width: 0; }
.ucl-hero-card h2 { font-size: 12px; line-height: 15px; margin-bottom: 5px; }
.ucl-hero-card p { font-size: 14px; line-height: 19px; color: #4f586b; }
.ucl-proof { display: flex; align-items: center; min-height: 104px; }
.ucl-proof-context { flex: 0 0 330px; padding: 5px 12px 5px 0; }
.ucl-proof-product { font-size: 12px; line-height: 16px; font-weight: 700; color: #5358fc; }
.ucl-proof-customers { font-size: 14px; line-height: 20px; color: #4f586b; margin-top: 5px !important; }
.ucl-metrics { flex: 0 1 750px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ucl-metric { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.ucl-metric strong { font-family: 'Mabry Pro', sans-serif; font-weight: 700; font-size: 40px; line-height: 46px; color: #241f4f; }
.ucl-metric-label { font-size: 11px; line-height: 14px; font-weight: 700; color: #5358fc; }
.ucl-metric-short, .ucl-proof-mobile-product { display: none; }
.ucl-catalog { display: flex; flex-direction: column; align-items: stretch; gap: 32px; padding-block: 64px; scroll-margin-top: 120px; }
.ucl-catalog > h2, .ucl-closing h2 { font-size: 34px; line-height: 40px; letter-spacing: -.25px; }
.ucl-toolbar { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ucl-search { display: flex; align-items: center; gap: 16px; width: min(520px, 100%); min-height: 54px; padding-left: 20px; border: 1px solid var(--ucl-border); border-radius: 4px; background: #fff; }
.ucl-search:focus-within { border-color: var(--ucl-brand); }
.ucl-search input { width: 100%; min-width: 0; min-height: 52px; padding: 12px 8px 12px 0; border: 0; background: transparent; color: var(--ucl-text); font-size: 16px; font-weight: 300; line-height: 24px; border-radius: 0; box-shadow: none; }
.ucl-search input:focus { outline: none; }
.ucl-search input::placeholder { color: var(--ucl-muted); opacity: 1; }
.ucl-search input::-webkit-search-cancel-button { display: none; }
.ucl-clear-search { flex: 0 0 44px; min-height: 44px; padding: 0; background: transparent; border: 0; font-size: 26px; color: var(--ucl-muted); cursor: pointer; }
.ucl-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.ucl-chip { border: 1px solid var(--ucl-border); padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--ucl-text); font-size: 14px; line-height: 18px; font-weight: 700; min-height: 44px; max-width: 100%; cursor: pointer; box-shadow: none; }
.ucl-chip:hover { border-color: var(--ucl-brand); background: #f7f7ff; }
.ucl-chip[aria-pressed='true'] { color: #fff; background: var(--ucl-brand); border-color: var(--ucl-brand); }
.ucl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 1080px; }
.ucl-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; padding: 30px; border: 1px solid var(--ucl-border); border-radius: 10px; background: #fff; color: var(--ucl-text); box-shadow: 0 12px 30px rgba(29,47,86,.1); transition: border-color .15s, box-shadow .15s; }
.ucl-card:visited { color: var(--ucl-text); }
.ucl-card:hover { border-color: var(--ucl-brand); box-shadow: 0 12px 30px rgba(29,47,86,.16); }
.ucl-card h3 { font-size: 22px; line-height: 28px; }
.ucl-card > p { font-size: 16px; line-height: 24px; color: var(--ucl-muted); }
.ucl-view-case { margin-top: auto; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--ucl-brand); }
.ucl-pill { display: inline-block; font-size: 14px; line-height: 18px; font-weight: 700; padding: 8px 16px; max-width: 100%; border-radius: 999px; background: #f0efff; color: #5946b7; text-transform: uppercase; overflow-wrap: anywhere; }
.ucl-category-catalogs-registers { background: #e5f7f0; color: #127357; }
.ucl-category-dashboards-reporting { background: #e8f0ff; color: #265cd1; }
.ucl-category-custom-jira-reporting { background: #f0eaff; color: #6640ad; }
.ucl-category-automated-calculations { background: #fff3de; color: #986000; }
.ucl-category-move-from-excel-to-confluence { background: #ffebf0; color: #b83357; }
.ucl-category-data-from-multiple-pages-sources { background: #e5f7fa; color: #0d6e80; }
.ucl-show-more { display: flex; justify-content: center; }
.ucl-empty { text-align: center; padding: 40px 16px; }
.ucl-empty h3 { font-size: 26px; line-height: 32px; margin-bottom: 12px; }
.ucl-empty p { margin-bottom: 20px; }
.ucl-closing { padding: 64px 0; text-align: center; color: #fff; background: #5358fc; }
.ucl-closing .ucl-container { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ucl-closing h2 { max-width: 760px; color: #fff; }
.ucl-closing p { max-width: 700px; font-size: 18px; line-height: 28px; color: rgba(255,255,255,.86); }
.ucl-closing .ucl-button { width: auto; max-width: 100%; padding-inline: 40px; }
.ucl-detail-inner { width: min(960px, calc(100% - 96px)); margin-inline: auto; padding-block: 64px; display: flex; flex-direction: column; gap: 40px; }
.ucl-back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; padding-block: 13px; font-size: 14px; line-height: 18px; font-weight: 700; color: #5358fc; }
.ucl-back:visited { color: #5358fc; }
.ucl-case-ending { display: flex; flex-direction: column; gap: 48px; }
.ucl-case-ending > .ucl-back { margin: 0; }
.ucl-related { display: flex; flex-direction: column; gap: 24px; }
.ucl-related h2 { font-size: 28px; line-height: 34px; }
.ucl-related .ucl-grid { gap: 24px; }
.ucl-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.ucl-pills .ucl-pill { font-size: 12px; line-height: 18px; padding: 8px 18px; }
.ucl-detail h1 { font-size: 40px; line-height: 46px; }
.ucl-outcome { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.ucl-outcome section { min-width: 0; width: 100%; }
.ucl-outcome h2 { font-size: 24px; line-height: 29px; margin-bottom: 14px; }
.ucl-result { background: #ebfaf2; border-left: 4px solid #127357; border-radius: 12px; padding: 32px; }
.ucl-rich-text { color: #4f586b; font-size: 17px; line-height: 25px; overflow-wrap: anywhere; }
.ucl .ucl-rich-text > * + * { margin-top: 16px; }
.ucl-rich-text :is(strong, b) { font-weight: 700; }
.ucl-rich-text :is(ul, ol) { padding-left: 24px; }
.ucl-rich-text ol > li { display: list-item; list-style-type: decimal; list-style-position: outside; }
.ucl-rich-text ul > li { display: list-item; list-style-type: disc; list-style-position: outside; }
.ucl-rich-text li + li { margin-top: 18px; }
.ucl-rich-text a { color: var(--ucl-brand); text-decoration: underline; }
.ucl-visual { border: 1px solid #d6d9e5; border-radius: 12px; overflow: hidden; }
.ucl-visual img { display: block; width: 100%; height: auto; }
.ucl-image-alt { padding: 14px 18px; font-size: 15px; color: var(--ucl-muted); }
.ucl-how h2 { font-size: 28px; line-height: 34px; margin-bottom: 22px; }
.ucl-macros { display: flex; flex-direction: column; gap: 22px; }
.ucl-macros h2 { font-size: 12px; line-height: 17px; letter-spacing: .36px; margin-bottom: 10px; }
.ucl-macro-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.ucl-macro-tags li { background: #f0efff; padding: 9px 14px; border-radius: 18px; color: #5358fc; font-weight: 700; font-size: 11px; line-height: 16px; }
.ucl-macro-tags.ucl-native li { background: #eef4fa; color: #47627d; }
@media (max-width: 1099px) {
    .ucl-hero { background-image: url('../../images/use-case-library/hero-tablet.png'); padding: 64px 0 56px; }
    .ucl-hero > .ucl-container { gap: 28px; }
    .ucl-hero-main { display: block; min-height: 0; }
    .ucl-hero-message { gap: 28px; }
    .ucl-hero h1, .ucl-hero-description { max-width: none; }
    .ucl-eyebrow { font-size: 13px; line-height: 17px; }
    .ucl-hero-cards, .ucl-proof-customers, .ucl-metric img, .ucl-metric-label { display: none; }
    .ucl-actions .ucl-button { width: 220px; }
    .ucl-proof { margin-top: 8px; padding-top: 18px; border-top: 1px solid #d6d9ff; min-height: 0; gap: 32px; }
    .ucl-proof-context { flex-basis: 280px; padding: 0; }
    .ucl-proof-product { font-size: 11px; line-height: 14px; letter-spacing: .33px; }
    .ucl-proof-mobile-product { display: inline; }
    .ucl-metrics { flex: 1; }
    .ucl-metric { gap: 4px; }
    .ucl-metric strong { font-size: 22px; line-height: 26px; }
    .ucl-metric-short { display: block; color: #5358fc; font-weight: 700; font-size: 9px; line-height: 11px; letter-spacing: .45px; }
    .ucl-catalog { gap: 40px; }
    .ucl-catalog > h2, .ucl-closing h2 { font-size: 36px; line-height: 42px; }
    .ucl-closing .ucl-container { width: calc(100% - 192px); }
    .ucl-closing p { font-size: 17px; line-height: 24px; color: #fff; }
    .ucl-hero-description { line-height: 28px; color: #4f586b; }
    .ucl-grid { gap: 20px; }
    .ucl-card { padding: 24px; }
    .ucl-detail-inner { padding: 64px 0 72px; gap: 36px; }
    .ucl-detail h1 { font-size: 42px; line-height: 48px; }
    .ucl-pills .ucl-pill { font-size: 11px; line-height: 16px; padding: 9px 14px; }
}
@media (max-width: 699px) {
    .ucl-container, .ucl-detail-inner { width: calc(100% - 48px); }
    /* Figma decorations exported separately: the red cube stays beside the heading,
       while the purple cube follows the bottom as editable copy changes height. */
    .ucl-hero { background-color: #f7f8ff; background-image: url('../../images/use-case-library/hero-mobile-red.png'), url('../../images/use-case-library/hero-mobile-purple.png'), url('../../images/use-case-library/hero-mobile-orange.png'); background-position: right 75px, right bottom, right top; background-size: 15px 161px, 52.5px 42px, 90px 74.5px; background-repeat: no-repeat; padding: 48px 0; }
    .ucl-hero > .ucl-container, .ucl-hero-message { gap: 24px; }
    .ucl-hero h1 { font-size: 38px; line-height: 43px; }
    .ucl-hero-description { font-size: 18px; line-height: 26px; }
    .ucl-actions { flex-direction: column; width: 100%; }
    .ucl-actions .ucl-button { width: 100%; }
    .ucl-proof { flex-direction: column; align-items: stretch; gap: 16px; padding-top: 16px; }
    .ucl-proof-context { flex-basis: auto; }
    .ucl-proof-product { max-width: 285px; }
    .ucl-catalog { padding-block: 56px; gap: 28px; }
    .ucl-catalog > h2, .ucl-closing h2 { font-size: 30px; line-height: 36px; }
    .ucl-filters { gap: 8px; }
    .ucl-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ucl-card h3 { font-size: 22px; line-height: 28px; }
    .ucl-card .ucl-pill { font-size: 14px; line-height: 18px; }
    .ucl-closing { padding-block: 56px; }
    .ucl-closing .ucl-container { width: calc(100% - 48px); }
    .ucl-closing p { font-size: 17px; line-height: 24px; color: #fff; }
    .ucl-detail-inner { padding: 48px 0 56px; gap: 28px; }
    .ucl-detail h1 { font-size: 34px; line-height: 40px; }
    .ucl-pills { gap: 8px; }
    .ucl-pills .ucl-pill { font-size: 11px; line-height: 16px; padding: 9px 14px; }
    .ucl-result { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .ucl *, .ucl *::before, .ucl *::after { transition: none !important; scroll-behavior: auto !important; } }