/* Component library: self-contained examples. ui-* classes are safe to reuse in site pages. */
.ui-component{--ui-surface:#fff;--ui-text:var(--ink,#122a23);padding:25px;border-radius:10px;background:var(--ui-surface);color:var(--ui-text);border:1px solid #dce3d9;line-height:1.6;overflow-wrap:anywhere}
.ui-variant-2{border:2px solid var(--primary);border-radius:0}.ui-variant-3{--ui-surface:var(--ink);--ui-text:#fff;border-color:var(--ink)}.ui-variant-4{--ui-surface:color-mix(in srgb,var(--accent) 22%,#fff);border-left:5px solid var(--primary)}.ui-variant-5{padding:16px;box-shadow:0 6px 25px #142b2410;border-radius:20px}
.ui-component h2{font-size:27px;line-height:1.25;letter-spacing:-.6px}.ui-component h3{font-size:21px;line-height:1.3;margin:0 0 13px}.ui-component h4{font-size:17px;margin:10px 0}.ui-component p{font-size:17px;margin:9px 0 16px}.ui-component a{text-decoration:underline;text-underline-offset:3px}.ui-component .ui-button{display:inline-flex;padding:11px 17px;background:var(--primary);color:#fff;border:0;border-radius:5px;text-decoration:none;font-size:15px;gap:12px;align-items:center}.ui-variant-3 .ui-button{background:var(--accent);color:#182a25}.ui-text-link{font-weight:600}.ui-flex{display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap}.ui-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px}.ui-inline{display:flex;gap:12px;align-items:center;list-style:none;padding:0;flex-wrap:wrap;margin:0}.ui-stack{display:flex;flex-direction:column;gap:12px}.ui-kicker{font-size:11px!important;letter-spacing:1.5px;font-weight:700}.ui-symbol{font-size:55px;color:var(--primary)}.ui-variant-3 .ui-symbol{color:var(--accent)}.ui-big{font-size:45px;line-height:1.2}.ui-badge,.ui-tag{display:inline-block;background:color-mix(in srgb,var(--primary) 12%,#fff);color:var(--primary);padding:5px 10px;border-radius:20px;font-size:12px}.ui-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--primary);color:#fff}.ui-timeline{border-left:2px solid var(--primary);padding-left:25px}.ui-component li{margin-bottom:7px}.ui-component blockquote{margin:0;border-left:3px solid var(--primary);padding-left:18px}.ui-component footer{width:auto;padding:0;margin:12px 0 0;font-size:13px}.ui-component label{display:block;margin:12px 0 7px;font-size:15px}.ui-component input:not([type=checkbox]):not([type=radio]),.ui-component textarea,.ui-component select{width:100%;border:1px solid #b8c5bc;border-radius:5px;background:#fff;color:#182c23;padding:10px;font:inherit;max-width:100%}.ui-component input[type=range]{padding:0}.ui-component button{font:inherit;cursor:pointer}.ui-component fieldset{border:1px solid #a3b6aa;padding:14px;min-width:0}.ui-component legend{padding:0 8px;font-size:14px}.ui-component progress,.ui-component meter{display:block;width:100%;height:18px;accent-color:var(--primary)}.ui-component table{width:100%;border-collapse:collapse;font-size:14px}.ui-component caption{text-align:left;font-weight:600;margin-bottom:12px}.ui-component th,.ui-component td{padding:10px;border-bottom:1px solid #9aaba360;text-align:left}.ui-component dt{font-weight:600}.ui-component dd{margin:5px 0 18px}.ui-component figure{margin:0}.ui-component img{max-width:100%;height:auto;border-radius:5px}.ui-component figcaption{font-size:12px;margin-top:10px}.ui-spinner{display:inline-block;width:22px;height:22px;border:3px solid #b8cdc0;border-top-color:var(--primary);border-radius:50%;animation:ui-spin 1s linear infinite;margin-right:12px}.ui-skeleton{height:20px;background:#bac8bd70;border-radius:5px;margin-bottom:12px}.ui-skeleton.short{width:65%}.ui-tip{position:relative;display:inline-block}.ui-tip [role=tooltip]{position:absolute;bottom:calc(100% + 9px);left:0;width:230px;padding:12px;background:#16352a;color:#fff;font-size:13px;border-radius:6px;visibility:hidden;z-index:5}.ui-tip:hover [role=tooltip],.ui-tip:focus-within [role=tooltip]{visibility:visible}.ui-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.ui-component [role=tablist]{display:flex;gap:8px;flex-wrap:wrap}.ui-component [role=tab]{padding:8px 12px;border:1px solid #bfccc0;background:#fff;color:#173729;border-radius:4px}.ui-component [role=tab][aria-selected=true]{background:var(--primary);color:white}.ui-component summary{cursor:pointer;font-weight:600}.ui-component dialog{max-width:440px}.ui-component [data-ui-form-status]{font-size:13px}.ui-component [role=switch]{accent-color:var(--primary)}
/* Catalog controls are distinct from the reusable component styles above. */
.catalog-intro{padding:55px 0 30px}.catalog-intro h1{font-size:48px}.catalog-toolbar{position:sticky;top:0;z-index:15;background:#fcfcf7f5;backdrop-filter:blur(10px);padding:18px 0;border-block:1px solid #dce3d9}.catalog-toolbar .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.catalog-toolbar input{padding:12px 15px;width:min(420px,100%);border:1px solid #bdcbbc;border-radius:5px;font:inherit}.catalog-count{font-size:13px;color:#637267}.catalog-section{padding:40px 0;border-bottom:1px solid #dce3d9;scroll-margin-top:95px}.catalog-section>h2{font-size:30px;margin-bottom:25px}.catalog-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.catalog-example{min-width:0;border:1px solid #dce3d9;background:#f7f8f1;border-radius:9px;padding:18px}.catalog-example>h3{font-size:14px;font-weight:600;margin-bottom:15px}.catalog-actions{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}.catalog-actions button{padding:8px 13px;border:1px solid #b9c7ba;background:#fff;color:#183e2b;border-radius:4px;font:inherit;font-size:13px}.catalog-example pre{white-space:pre-wrap;word-break:break-word;background:#132b22;color:#d6eee0;border-radius:6px;padding:15px;font:12px/1.7 monospace;max-height:360px;overflow:auto}.catalog-example [role=status]{font-size:12px;margin:8px 0 0}.catalog-directory{display:flex;gap:7px;flex-wrap:wrap;padding-top:20px}.catalog-directory a{font-size:11px;padding:6px 9px;border:1px solid #d7dfd0;border-radius:4px}.sample-header{padding:20px 0;border-bottom:1px solid #dce3d9}.sample-header .wrap{display:flex;justify-content:space-between;align-items:center;gap:25px}.sample-header a:not(.brand){font-size:14px}.quote-section{padding:50px 0 80px}.quote-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:55px;align-items:start}.provider-frame{border:1px solid #dce3d9;border-radius:8px;padding:20px;background:#fff;min-height:320px}.provider-frame iframe{width:100%;border:0;min-height:420px}.quote-section p{color:#627267;font-size:17px}.provider-frame [data-provider-status]{font-size:13px}.error-section{min-height:65vh;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:60px;padding:65px 0}.error-graphic{display:grid;place-items:center;background:var(--ink);color:var(--accent);border-radius:100px 8px 8px 8px;min-height:340px;font-size:100px;letter-spacing:-6px}.error-section h1{font-size:54px}.error-section p{font-size:18px;color:#627267}.variation-gallery{padding:45px 0 70px}.variation-gallery h1{font-size:45px}.variation-set{padding:35px 0;border-bottom:1px solid #dce3d9}.variation-set h2{font-size:29px;margin-bottom:20px}.variation-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.variation-links a{padding:18px;border:1px solid #dce3d9;border-radius:6px;background:white}.variation-links strong{display:block;font-size:17px}.variation-links span{font-size:13px;color:#657368}.variation-banner{display:flex;justify-content:space-between;gap:16px;padding:12px 5%;background:#eef1e8;color:#1b3a2a;font-size:13px}.error-section .actions{margin-bottom:20px}@keyframes ui-spin{to{transform:rotate(360deg)}}@media(max-width:700px){.catalog-examples,.quote-layout,.error-section,.variation-links{grid-template-columns:1fr}.error-section h1,.catalog-intro h1{font-size:38px}.error-section{gap:30px;padding:45px 0}.error-graphic{min-height:220px;font-size:80px}.quote-layout{gap:25px}.catalog-example{padding:14px}.catalog-section{padding:30px 0}.variation-banner{font-size:11px;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.ui-spinner{animation:none}}
/* Button variants change the control itself, as well as its surrounding panel. */
.ui-variant-2 .ui-button{background:transparent;color:var(--primary);border:2px solid var(--primary);border-radius:0}
.ui-variant-3 .ui-button{background:var(--accent);color:#172b22;border:1px solid var(--accent)}
.ui-variant-4 .ui-button{background:#0047ff;color:white;border-radius:10px;box-shadow:0 5px 14px #0047ff20}
.ui-variant-5 .ui-button{border-radius:999px;padding:8px 14px;font-size:13px}
.ui-variant-2 .ui-badge,.ui-variant-2 .ui-tag{background:transparent;border:1px solid var(--primary);border-radius:3px}
.ui-variant-4 .ui-badge,.ui-variant-4 .ui-tag{background:var(--accent);color:var(--ink)}
.ui-variant-5 .ui-flex{gap:10px;justify-content:flex-start}