/* Scoped examples for the service catalogue; no global page overrides. */
.sx-example{--sx-ink:#172b23;--sx-muted:#627167;--sx-line:#d9e0d4;--sx-paper:#f2f5ed;--sx-lime:#d9f985;color:var(--sx-ink);background:var(--sx-paper);border:1px solid var(--sx-line);border-radius:4px;padding:24px;max-width:100%;min-width:0;font:400 14px/1.5 'Onest',system-ui,sans-serif;overflow-wrap:anywhere}
.sx-example *{box-sizing:border-box;min-width:0}
.sx-example p{margin:0 0 12px}.sx-example strong,.sx-example b{font-weight:650}.sx-example :is(button,input,select){font:inherit;color:inherit;max-width:100%}.sx-example :is(button,input,select):focus-visible{outline:3px solid #536e0d;outline-offset:3px}.sx-example :is(button,input,select):disabled{opacity:.55;cursor:default}.sx-example input[aria-invalid=true]{border-color:#a44724;background:#fff7ee}
.sx-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid var(--sx-line);padding-bottom:14px;margin-bottom:20px}.sx-label{font-size:12px;font-weight:650;letter-spacing:.01em}.sx-meta{font-size:10px;color:var(--sx-muted);text-align:right}.sx-eyebrow{display:block;font:500 10px/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.03em;text-transform:uppercase;color:var(--sx-muted);margin-bottom:10px}.sx-note{margin:18px 0 0!important;font-size:11px;line-height:1.65;color:var(--sx-muted)}
.sx-actions{display:flex;flex-wrap:wrap;gap:8px}.sx-button,.sx-faux-button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:44px;padding:10px 14px;border:1px solid var(--sx-ink);border-radius:2px;background:var(--sx-ink);color:#fff!important;font-size:12px;font-weight:600;line-height:1.4;text-align:center}.sx-button{cursor:pointer}.sx-button:not(:disabled):hover{background:#30463a}.sx-button--secondary{background:transparent;color:var(--sx-ink)!important;border-color:#abb8a9}.sx-button--secondary:not(:disabled):hover{background:#e5ebdd}.sx-faux-button{min-height:38px;font-size:11px;background:var(--sx-lime);color:var(--sx-ink)!important;border:0}.sx-pill{display:inline-block;align-self:start;padding:4px 8px;font-size:10px;line-height:1.5;background:var(--sx-lime);border-radius:2px}.sx-feedback{margin:16px 0!important;padding:12px 14px;border-left:2px solid #6d813f;background:#e8efdc;font-size:12px;line-height:1.55}.sx-confirm{display:block;font-size:11px;color:#476526;padding:8px 0 0}.sx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-block:16px}.sx-stat{padding:16px 12px;background:#fff;border:1px solid var(--sx-line)}.sx-stat>span{display:block;font-size:10px;line-height:1.4;color:var(--sx-muted);margin-bottom:8px}.sx-stat>strong{font-size:clamp(23px,3.5vw,34px);font-weight:500;letter-spacing:-.05em;line-height:1.1}
.sx-site{background:#fff;border:1px solid var(--sx-line)}.sx-site-nav{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--sx-line);font-size:9px}.sx-site-nav>span{color:var(--sx-muted);font-size:8px}.sx-site-body{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;padding:24px 18px}.sx-site-title{display:block;font-size:clamp(23px,3vw,38px);font-weight:500!important;letter-spacing:-.06em;line-height:1.14;margin-bottom:14px}.sx-site-body p{font-size:11px;max-width:32ch;color:var(--sx-muted)}.sx-site-bottom{display:flex;flex-wrap:wrap;gap:12px;padding:12px 16px;border-top:1px solid var(--sx-line);font-size:8px;color:var(--sx-muted)}.sx-room{position:relative;min-height:210px;background:linear-gradient(155deg,#ece6d8 0 63%,#d8d1bb 63%);overflow:hidden}.sx-room-window{position:absolute;top:12%;right:12%;width:40%;height:47%;background:linear-gradient(90deg,transparent 47%,#d1c9b8 48% 51%,transparent 52%),linear-gradient(#f6f8e8 48%,#d1c9b8 49% 52%,#f6f8e8 53%);border:5px solid #ded7c7}.sx-room-desk{position:absolute;top:60%;left:12%;width:70%;height:7%;background:#7f8468;box-shadow:0 7px 0 #5f6953;transform:skewY(-7deg)}.sx-room-desk:before,.sx-room-desk:after{content:'';position:absolute;top:14px;width:5px;height:62px;background:#5f6953}.sx-room-desk:before{left:9%}.sx-room-desk:after{right:7%}.sx-room-seat{position:absolute;bottom:14%;left:43%;width:25%;height:23%;background:#aab596;border-radius:40% 40% 8% 8%;transform:skewY(-7deg)}.sx-room-plant{position:absolute;left:10%;top:24%;width:19%;height:35%;background:#667655;clip-path:polygon(50% 0,100% 52%,68% 62%,83% 100%,24% 100%,32% 62%,0 45%)}
.sx-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sx-before,.sx-after{padding:22px 18px;min-height:235px}.sx-before{border:1px dashed #bfc7bb;background:#e9ede3;color:#6f7d71}.sx-after{background:#fff;border:1px solid #b6c49e}.sx-compare strong{display:block;font-size:22px;line-height:1.2;letter-spacing:-.04em;margin-bottom:16px}.sx-compare p{font-size:12px;line-height:1.6}.sx-line{height:6px;width:100%;background:#cfd7c8;margin-bottom:8px}.sx-line--short{width:70%}.sx-muted-tag{display:inline-block;padding:6px 8px;border:1px solid #bac4b3;font-size:10px}
.sx-crm-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sx-crm-source,.sx-crm-destination{padding:18px;background:#fff;border:1px solid var(--sx-line)}.sx-crm-source>strong{display:block;font-size:20px;line-height:1.3;margin-bottom:12px}.sx-crm-source>p,.sx-deal p{font-size:12px;color:var(--sx-muted);line-height:1.65}.sx-crm-source .sx-actions{margin-top:20px}.sx-deal{display:flex;flex-direction:column;gap:12px;background:#edf5de;border:1px solid #c4d3b0;border-left:3px solid #779442;padding:16px}.sx-deal>strong{font-size:16px;line-height:1.35}.sx-deal p{margin:0}.sx-deal--empty{border:1px dashed #bcc6b5;background:#f8faf4;min-height:160px;justify-content:center}.sx-mini-flow{display:flex;flex-direction:column;gap:8px}.sx-mini-flow>span:first-child{background:#fff;padding:10px 14px;border:1px solid var(--sx-line);font-size:11px}.sx-mini-flow>b{align-self:center;font-size:18px;font-weight:400}.sx-mini-flow .sx-deal{gap:7px;padding:12px}.sx-mini-flow .sx-deal>strong{font-size:14px}.sx-mini-flow .sx-deal p{font-size:10px}
.sx-config-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.sx-controls{display:flex;flex-direction:column;gap:16px}.sx-field{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600}.sx-field :is(input,select){min-height:44px;padding:10px 12px;width:100%;border:1px solid #aebba6;border-radius:2px;background:#fff;font-size:14px;font-weight:400}.sx-field>span{font-size:10px;font-weight:400;color:var(--sx-muted)}.sx-quote{padding:22px;background:#fff;border:1px solid #c3d2ad;box-shadow:inset 0 3px 0 var(--sx-lime)}.sx-total{display:block;font-size:clamp(26px,4vw,42px);font-weight:500!important;letter-spacing:-.05em;margin-bottom:6px}.sx-quote>p{font-size:12px;color:var(--sx-muted)}.sx-checks{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:12px}.sx-checks li{position:relative;padding-left:17px}.sx-checks li:before{content:'✓';position:absolute;left:0;color:#698142}.sx-mini-price>span{display:block;font-size:11px}.sx-mini-price>strong{display:block;font-size:36px;font-weight:500;letter-spacing:-.04em;margin-block:12px}.sx-mini-options{display:flex;flex-wrap:wrap;gap:5px}.sx-mini-options>span{padding:6px 8px;border:1px solid var(--sx-line);font-size:9px}.sx-mini-options>.sx-selected{background:var(--sx-lime);border-color:#bfd185}.sx-price-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;margin-top:16px;border-top:1px solid var(--sx-line);font-size:11px}.sx-price-line>b{font-size:20px;font-weight:500;letter-spacing:-.03em}.sx-price-line--large{font-size:13px;padding:18px;background:#fff;border:1px solid var(--sx-line)}.sx-price-line--large>strong{font-size:28px;font-weight:500;letter-spacing:-.04em}
.sx-product{display:grid;grid-template-columns:95px 1fr;gap:18px;align-items:center}.sx-product strong{display:block;font-size:18px;margin-bottom:6px}.sx-product p{font-size:11px;color:var(--sx-muted)}.sx-product b{font-size:13px}.sx-notebook{aspect-ratio:3/4;background:linear-gradient(90deg,#526448 0 7%,#849675 7% 10%,#a4b88f 10% 100%);box-shadow:4px 4px 0 #d0d8c7;border-radius:2px 7px 7px 2px;display:flex;align-items:center;justify-content:center}.sx-notebook>span{font-size:20px;line-height:1.2;letter-spacing:-.03em;color:#2f4930;transform:translateX(4px)}.sx-product--full{grid-template-columns:minmax(100px,.65fr) minmax(0,1.35fr);gap:32px;align-items:start}.sx-product--full>.sx-notebook{width:100%;max-width:210px;justify-self:center}.sx-product--full .sx-notebook>span{font-size:38px}.sx-product--full strong{font-size:24px}.sx-product--full .sx-controls{margin-top:22px}
.sx-field--source{max-width:320px}.sx-funnel{display:grid;gap:18px;margin-block:24px}.sx-funnel-row{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:12px}.sx-funnel-row>b{font-size:16px;font-weight:500}.sx-meter{grid-column:1/-1;height:12px;background:#e0e8d7;overflow:hidden}.sx-meter>i{display:block;height:100%;background:#91ac58;min-width:2px}.sx-analytics-footer{display:flex;align-items:start;justify-content:space-between;gap:18px;border-top:1px solid var(--sx-line);padding-top:16px;font-size:11px;color:var(--sx-muted)}.sx-analytics-footer>span:first-child{flex-shrink:0}.sx-analytics-footer b{display:block;font-size:22px;letter-spacing:-.03em;color:var(--sx-ink);font-weight:500}.sx-analytics-footer>span:last-child{max-width:33ch}.sx-mini-bars{display:grid;gap:7px;margin-top:18px}.sx-mini-bars>span{display:block;background:linear-gradient(90deg,#c8dda2 var(--sx-bar),#e5edda var(--sx-bar));padding:7px 9px;font-size:10px}
.sx-chat{display:flex;flex-direction:column;gap:12px;margin-top:18px}.sx-bubble{align-self:flex-start;max-width:93%;padding:16px;background:#fff;border:1px solid var(--sx-line);font-size:13px;line-height:1.65}.sx-bubble>p{margin:0}.sx-bubble--question{align-self:flex-end;background:#e1edcb;border-color:#cbd9b3;font-size:12px}.sx-chat+.sx-actions{margin-top:18px}.sx-support-head{display:flex;align-items:start;justify-content:space-between;gap:12px;padding-bottom:16px}.sx-support-head strong{font-size:21px;line-height:1.2;display:block;letter-spacing:-.03em}.sx-checklist{list-style:none;margin:0;padding:0;display:grid}.sx-checklist>li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:start;padding:14px 0;border-top:1px solid var(--sx-line)}.sx-check-dot{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:#dbe9c8;color:#496523;border-radius:50%;font-size:12px}.sx-check-dot--pending{background:#e8e0c9;color:#776329}.sx-checklist b{display:block;font-size:12px}.sx-checklist small{display:block;color:var(--sx-muted);font-size:10px;margin-top:4px}.sx-check-state{font-size:9px;color:var(--sx-muted);padding-top:4px}
.sx-example--compact{padding:18px;font-size:12px}.sx-example--compact .sx-top{margin-bottom:16px;padding-bottom:12px}.sx-example--compact .sx-label{font-size:10px}.sx-example--compact .sx-meta{font-size:9px;max-width:105px}.sx-example--compact .sx-stats{gap:6px}.sx-example--compact .sx-stat{padding:12px 8px}.sx-example--compact .sx-stat>span{font-size:9px}.sx-example--compact .sx-stat>strong{font-size:27px}.sx-example--compact .sx-eyebrow{font-size:8px}.sx-example--compact .sx-site-nav{padding:9px;font-size:7px}.sx-example--compact .sx-site-nav>span{font-size:6px}.sx-example--compact .sx-site-body{gap:10px;padding:16px 10px}.sx-example--compact .sx-site-title{font-size:24px}.sx-example--compact .sx-site-body p{font-size:8px}.sx-example--compact .sx-faux-button{padding:8px;font-size:8px;gap:8px;min-height:30px}.sx-example--compact .sx-room{min-height:165px}.sx-example--compact .sx-site-bottom{gap:8px;padding:8px;font-size:6px}.sx-example--compact .sx-compare{gap:8px}.sx-example--compact .sx-before,.sx-example--compact .sx-after{padding:14px 11px;min-height:210px}.sx-example--compact .sx-compare strong{font-size:17px}.sx-example--compact .sx-compare p{font-size:10px}.sx-example--compact .sx-muted-tag{font-size:8px}.sx-example--compact .sx-bubble{font-size:11px;padding:12px}.sx-example--compact .sx-chat{gap:7px}.sx-example--compact .sx-support-head strong{font-size:18px}.sx-example--compact .sx-checklist>li{padding:12px 0;gap:7px}.sx-example--compact .sx-checklist b{font-size:11px}.sx-example--compact .sx-checklist small{font-size:9px}.sx-example--compact .sx-check-state{font-size:8px}.sx-example--compact .sx-note{font-size:9px}
@media(max-width:700px){.sx-example:not(.sx-example--compact){padding:18px}.sx-crm-grid,.sx-config-grid{grid-template-columns:minmax(0,1fr)}.sx-product--full{gap:20px;grid-template-columns:minmax(82px,.6fr) minmax(0,1.4fr)}.sx-product--full strong{font-size:21px}.sx-product--full .sx-controls{grid-column:1/-1}.sx-analytics-footer{flex-direction:column;gap:10px}.sx-analytics-footer>span:last-child{max-width:none}.sx-analytics-footer b{display:inline;margin-left:7px}}
@media(max-width:420px){.sx-example{padding:14px}.sx-top{align-items:start}.sx-stats{gap:6px}.sx-stat{padding:12px 8px}.sx-stat>strong{font-size:27px}.sx-stat>span{font-size:9px}.sx-site-body{grid-template-columns:minmax(0,1fr);padding:16px}.sx-site-title{font-size:27px}.sx-site-nav>span{display:none}.sx-room{min-height:150px}.sx-room-desk{top:55%}.sx-room-window{height:42%}.sx-room-seat{bottom:9%;height:27%}.sx-example--compact .sx-site-body{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}.sx-example--compact .sx-site-title{font-size:19px}.sx-example--compact .sx-site-body p{font-size:8px}.sx-example--compact .sx-room{min-height:165px}.sx-compare{grid-template-columns:minmax(0,1fr)}.sx-before,.sx-after{min-height:0}.sx-example--compact .sx-compare{grid-template-columns:1fr 1fr}.sx-example--compact .sx-before,.sx-example--compact .sx-after{padding:12px 9px;min-height:215px}.sx-example--compact .sx-compare strong{font-size:16px}.sx-price-line--large{align-items:start;flex-direction:column;gap:8px}.sx-product--full{grid-template-columns:minmax(0,1fr)}.sx-product--full>.sx-notebook{max-width:120px;justify-self:start}.sx-bubble{max-width:100%;font-size:12px}.sx-checklist>li{grid-template-columns:22px minmax(0,1fr)}.sx-check-state{grid-column:2}.sx-example--compact .sx-checklist>li{grid-template-columns:22px minmax(0,1fr) auto}.sx-example--compact .sx-check-state{grid-column:auto}}