/* UI/UX page additions; shared MayaWeb header, forms, cards and colours stay intact. */
.uiux-design-page .ux-text-link{color:var(--ft-text);font-weight:650;text-underline-offset:5px}
#uiux-hero-enquiry{scroll-margin-top:140px}
.ux-hero-path{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:35px 0 30px}
.ux-hero-path span{font-size:.78rem;letter-spacing:.025em;padding:10px 16px;border:1px solid var(--ft-line);border-radius:9px}
.ux-hero-path i{font-style:normal;font-size:1rem;color:var(--ft-accent)}
.uiux-design-page #uiux-pricing .mw-tier{padding:24px;border-width:1px}
.uiux-design-page .ve-card a:not(.button),.ux-after-table a{color:var(--ft-text);text-underline-offset:4px}
/* Keep this example at a readable scale beside the service explanation. */
#uiux-what .wd-definition{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.ux-concept{margin:0;min-width:0;width:100%;max-width:560px;justify-self:end;border:1px solid #d9c6e7;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 16px 40px #78409510}
.ux-concept-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:#f3eafa;border-bottom:1px solid #dfcde9}
body[data-mw-theme] .ux-concept-bar>span{font-size:.68rem;line-height:1.6;letter-spacing:.07em;font-weight:700;color:#71349b!important}
.ux-view-controls{display:flex;gap:3px;padding:3px;background:#fff;border:1px solid #dfcde9;border-radius:10px;flex-shrink:0}
.ux-view-controls[hidden]{display:none}
.ux-view-controls button{font:inherit;font-size:.78rem;font-weight:650;border:0;border-radius:7px;padding:10px 12px;background:transparent;color:#71349b;cursor:pointer;min-height:44px;transition:background .18s,color .18s}
.ux-view-controls button:hover{background:#f3eafa}
.ux-view-controls button[aria-pressed="true"]{background:#71349b;color:#fff}
.ux-view-controls button:focus-visible,.ux-demo-continue:focus-visible{outline:3px solid #9d58be;outline-offset:3px}
.ux-concept-screen{padding:22px 24px;background:radial-gradient(circle at 100% 0,#f3e7fb 0,transparent 45%),#fff}
body[data-mw-theme] .ux-concept-screen :is(strong,p,span){color:#432451!important}
.ux-demo-nav{display:flex;align-items:center;gap:10px;font-size:.62rem;letter-spacing:.07em;font-weight:650}
body[data-mw-theme] .ux-demo-nav .ux-demo-mark{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:9px;background:#71349b;color:#fff!important}
.ux-demo-mark svg{width:20px;height:20px;display:block}
.ux-demo-nav .ux-example-tag{margin-left:auto;font-size:.58rem;font-weight:500;letter-spacing:0;text-align:right}
.ux-demo-heading{padding:23px 0 19px}
body[data-mw-theme] .ux-demo-heading .ux-demo-kicker{display:block;font-size:.65rem;letter-spacing:.08em;font-weight:700;margin-bottom:9px;color:#71349b!important}
.ux-demo-heading>strong{display:block;max-width:330px;font-size:1.8rem;line-height:1.2;letter-spacing:-.035em}
.ux-demo-heading p{font-size:.85rem!important;line-height:1.65!important;margin:11px 0 0!important}
.ux-demo-options{min-width:0;margin:0;padding:0;border:0;display:grid;gap:10px}
.ux-demo-options legend{font-size:.74rem;font-weight:600;color:#675472;padding:0;margin-bottom:10px}
.ux-demo-choice{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #e1d3e9;border-radius:12px;background:#fff;cursor:pointer;transition:background .18s,border-color .18s;min-width:0}
.ux-demo-choice:hover{border-color:#a96bc8;background:#fcf9fe}
.ux-demo-choice:has(input:checked){border-color:#9a52bd;background:#f8f2fc;box-shadow:inset 0 0 0 1px #9a52bd18}
.ux-demo-choice:has(input:focus-visible){outline:3px solid #71349b;outline-offset:3px}
.ux-demo-choice input{appearance:auto;accent-color:#71349b;position:static;width:18px;height:18px;min-width:18px;margin:0;padding:0;flex-shrink:0;cursor:pointer}
.ux-demo-choice-copy{flex:1;min-width:0}
.ux-demo-choice strong{display:block;font-size:.9rem;line-height:1.4}
.ux-demo-choice-copy>span{display:block;font-size:.76rem;line-height:1.55;margin-top:4px}
.ux-choice-arrow{opacity:0;flex-shrink:0}
.ux-demo-choice:has(input:checked) .ux-choice-arrow{opacity:1}
body[data-mw-theme] #uiux-what .ux-demo-continue{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:13px 16px;border:1px solid #71349b;border-radius:10px;background:#71349b;color:#fff!important;font-size:.85rem;font-weight:650;line-height:1.5;margin-top:17px;text-decoration:none;transition:background .18s}
body[data-mw-theme] #uiux-what .ux-demo-continue:hover{background:#542675}
body[data-mw-theme] .ux-demo-continue span{color:inherit!important}
.ux-demo-help{font-size:.7rem!important;text-align:center;margin:8px 0 0!important;line-height:1.6!important}
.ux-concept figcaption{padding:14px 20px;border-top:1px solid #dfcde9;background:#fcf9fe;font-size:.72rem;line-height:1.65;color:#694678}
body[data-mw-theme] .ux-concept figcaption span{color:inherit!important}
.ux-concept-credit{display:block;margin-top:4px;font-size:.67rem}
.ux-concept-screen[data-view="wireframe"]{background:#fff;filter:grayscale(1)}
.ux-concept-screen[data-view="wireframe"] :is(.ux-demo-choice,.ux-demo-mark){border-radius:0;border:1px dashed #888;background:#f5f5f5;box-shadow:none}
body[data-mw-theme] #uiux-what .ux-concept-screen[data-view="wireframe"] .ux-demo-continue{border-radius:0;border:1px dashed #666;background:#eee;color:#333!important}
body[data-mw-theme] .ux-concept-screen[data-view="wireframe"] .ux-demo-mark{color:#333!important}
@media(max-width:1000px){#uiux-what .wd-definition{grid-template-columns:1fr;gap:30px}.ux-concept{justify-self:center}}
@media(max-width:420px){.ux-concept-bar{flex-wrap:wrap;gap:10px;padding:14px 16px}.ux-concept-bar>span br{display:none}.ux-view-controls{width:100%}.ux-view-controls button{flex:1}.ux-concept-screen{padding:18px 16px}.ux-demo-heading>strong{font-size:1.6rem}.ux-demo-nav{font-size:.58rem}.ux-demo-nav .ux-example-tag{max-width:45px;font-size:.56rem}.ux-demo-choice{gap:10px;padding:12px}.ux-demo-choice strong{font-size:.85rem}.ux-demo-choice-copy>span{font-size:.74rem}.ux-concept figcaption{padding:14px 16px}}
@media(prefers-reduced-motion:reduce){.ux-view-controls button,.ux-demo-choice,.ux-demo-continue{transition:none!important}}
.ux-audit-panel{border:1px solid var(--ft-line);border-radius:20px;padding:32px;background:var(--ft-card)}
.ux-audit-panel>h3{font-size:1.35rem}.ux-audit-list{list-style:none;counter-reset:audit;padding:0;margin:25px 0 0;display:grid;gap:20px}
.ux-audit-list li{position:relative;padding:0 0 0 46px;counter-increment:audit}
.ux-audit-list li:before{content:counter(audit,decimal-leading-zero);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#71349b;background:#f0e3f7;font-size:.7rem;font-weight:700}
.ux-audit-list strong{font-size:.95rem;display:block}.ux-audit-list span{display:block;font-size:.83rem;line-height:1.7;margin-top:6px}
.ux-plain-list{padding-left:22px;line-height:1.8}.ux-plain-list li+li{margin-top:8px}
.ux-system-board{border:1px solid var(--ft-line);border-radius:22px;padding:30px;background:var(--ft-card);box-shadow:0 24px 50px #08041020}
.ux-board-title{font-size:.65rem;letter-spacing:.09em;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.ux-board-title>span{opacity:.7}
.ux-swatches{display:flex;gap:8px;margin:26px 0}.ux-swatches i{display:block;width:50px;height:50px;border-radius:12px;background:#391c4d;border:1px solid #bb8cce55}.ux-swatches i:nth-child(2){background:#71349b}.ux-swatches i:nth-child(3){background:#b469dc}.ux-swatches i:nth-child(4){background:#f1e2fa}
.ux-type-study{display:flex;align-items:center;gap:26px;padding:18px 0 26px;border-bottom:1px solid var(--ft-line)}
.ux-type-study>strong{font-size:4rem;line-height:1;letter-spacing:-.08em}.ux-type-study>span{font-size:.85rem;line-height:1.65}
.ux-state-study{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}.ux-state-study>span{display:block;padding:13px 15px;border-radius:8px;font-size:.72rem;font-weight:600;border:1px solid #b581d1}
body[data-mw-theme] .ux-state-primary{color:#fff!important;background:#71349b}
.ux-field-study>span{font-size:.75rem;font-weight:650}.ux-field-study>div{border:1px solid var(--ft-line);border-radius:8px;padding:15px;margin-top:10px;font-size:.8rem;color:var(--ft-muted)}
.ux-system-board>p{font-size:.72rem!important;line-height:1.65!important;margin:20px 0 0!important}
.ux-after-table{margin-top:24px!important}
@media(max-width:640px){.ux-audit-panel,.ux-system-board{padding:24px}.ux-hero-path{gap:9px}.ux-hero-path span{padding:9px 11px}.uiux-design-page .si-actions{align-items:flex-start}}
.uiux-design-page .wd-services-grid,.uiux-design-page .wd-platform-grid{grid-auto-rows:1fr}
@media(max-width:640px){.uiux-design-page .wd-services-grid,.uiux-design-page .wd-platform-grid{grid-auto-rows:auto}}
@media(max-width:900px){.uiux-design-page .mw-organized-hero .si-hero-grid{grid-template-columns:1fr;gap:30px}}