.ux-intro{display:flex;gap:55px;align-items:start;margin:8px 0 42px;padding:28px 0;border-block:0}.ux-intro>p{flex:1.25;font:400 clamp(23px,2.3vw,31px)/1.35 var(--heading);max-width:620px}.ux-constraints{flex:1;display:flex;flex-wrap:wrap;gap:9px;padding-top:4px}.ux-constraints span{padding:9px 13px;border-radius:24px;background:#e8eddf;color:#3c5147;font-size:11px}
.ux-flow{margin:0 0 48px;padding:30px;border-radius:22px;background:#e9eddf}.ux-flow-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:24px}.ux-flow h3{font-size:28px}.ux-flow-head p{font-size:11px;color:#5c6c5c}.flow-map{display:flex;align-items:center;gap:35px}.flow-origin{flex:0 0 150px;background:#284438;color:#fff4e1;text-align:center;padding:24px 16px;border-radius:50%;font:500 23px var(--heading);position:relative}.flow-origin:after{content:"";position:absolute;width:35px;height:1px;background:#99ab91;top:50%;left:100%}.flow-routes{flex:1;border-left:1px solid #99ab91;padding-left:24px;display:flex;flex-direction:column;gap:15px}.flow-route{position:relative;display:flex;align-items:center;gap:12px}.flow-route:before{content:"";position:absolute;left:-25px;top:50%;width:24px;height:1px;background:#99ab91}.flow-step{flex:1;min-width:0;background:#fbf8ed;padding:13px 14px;border-radius:9px;font:500 16px var(--heading)}.flow-step small{display:block;font:10px/1.5 var(--body);color:#62735d;margin-top:5px}.flow-end{background:#d3dfc6}.flow-arrow{color:#7b8e73;font-size:20px;flex-shrink:0}
.ui-shot figcaption{border-left:2px solid #b9c8ac;padding-left:14px}.ui-shot p{max-width:480px!important;font-size:12px!important}.ui-note{display:block;color:#607852;font:700 9px var(--body);letter-spacing:1.3px;text-transform:uppercase;margin-bottom:7px}.ux-specs{display:flex;gap:26px;margin-top:35px;padding:25px 0;border-block:0}.ux-specs article{flex:1;min-width:0}.ux-specs h3{font-size:21px;margin-bottom:16px}.contrast-pair{display:flex;align-items:center;gap:14px;margin-bottom:10px}.contrast-chip{width:58px;height:45px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#343036;color:#fff4e1;font:500 24px var(--heading)}.contrast-chip.peach{background:#ffc7a8;color:#35232b}.contrast-pair strong{font:500 24px var(--heading)}.contrast-pair small{display:block;color:#697268;font-size:10px}.selection-spec{display:flex;gap:10px;margin:17px 0}.selection-spec span{padding:12px 20px;background:#51474f;color:#fff4e1;border:2px solid #aa9387;border-radius:10px;font:500 17px var(--heading)}.selection-spec .is-selected{background:#ffd49e;color:#35232b;border-color:#ffd49e}.selection-spec b{margin-left:9px}.ux-specs p{font-size:11px;line-height:1.7;max-width:310px}.spacing-demo{display:flex;align-items:end;gap:12px;height:56px;margin-bottom:14px}.spacing-demo span{display:block;background:#b4c5a6;width:var(--space);height:var(--space);position:relative;border-radius:3px}.spacing-demo span:after{content:attr(data-size);position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:9px;margin-top:5px}.spacing-demo+p{margin-top:27px}
.ux-refinements{margin-top:38px}.ux-refinements h3{font-size:28px;margin-bottom:22px}.refinement-list{display:flex;gap:25px;counter-reset:refine}.refinement-list article{flex:1;min-width:0;border-top:1px solid #c4cbb8;padding-top:17px}.refinement-list h4{font:500 21px var(--heading);margin:0 0 10px}.refinement-list p{font-size:12px;line-height:1.75}.refinement-list small{display:block;margin-top:12px;font-size:10px;color:#6c7c61}
@media(max-width:850px){.ux-intro{gap:26px}.flow-map{gap:25px}.flow-origin{flex-basis:115px;font-size:20px}.flow-origin:after{width:25px}.flow-routes{padding-left:16px}.flow-route{gap:7px}.flow-route:before{width:16px;left:-17px}.flow-step{padding:12px 9px;font-size:14px}.ux-flow{padding:23px}.ux-specs{flex-wrap:wrap}.ux-specs article{flex-basis:40%}.refinement-list{gap:17px}}
@media(max-width:560px){.ux-intro{display:block;margin-bottom:30px;padding:22px 0}.ux-intro>p{font-size:25px}.ux-constraints{margin-top:20px;gap:7px}.ux-constraints span{font-size:10px;padding:8px 11px}.ux-flow{padding:21px 15px;margin-bottom:32px}.ux-flow-head{display:block}.ux-flow-head p{margin-top:8px}.ux-flow h3{font-size:25px}.flow-map{display:block}.flow-origin{padding:12px 20px;border-radius:25px;font-size:19px;width:145px;margin-bottom:20px}.flow-origin:after{left:18px;top:100%;width:1px;height:20px}.flow-routes{margin-left:18px;padding-left:13px;gap:18px}.flow-route{flex-wrap:wrap;gap:6px}.flow-route:before{left:-14px;width:13px;top:22px}.flow-step{flex-basis:calc(50% - 18px);font-size:13px;padding:11px 8px}.flow-end{flex-basis:100%;margin-left:0}.flow-route .flow-arrow:nth-last-child(2){display:none}.flow-step small{font-size:9px}.ux-specs{display:block;padding:23px 0}.ux-specs article+article{margin-top:30px}.ux-specs h3{font-size:22px}.refinement-list{display:block}.refinement-list article+article{margin-top:25px}.ux-refinements{margin-top:30px}}

/* Screens lead the case study; supporting diagrams stay compact. */
.interface-section{padding-top:38px}.interface-section>.section-heading{margin-bottom:28px}.ux-flow{margin:34px 0 0;padding:24px}.ux-flow-head{margin-bottom:18px}.ui-shot figcaption{display:flex;flex-direction:column;gap:5px}.ui-note{margin:0}.ui-shot h3{margin:0}.ux-specs{padding-bottom:40px}.system-details{padding-bottom:0}@media(max-width:560px){.interface-section{padding-top:25px}.ux-flow{padding:20px 15px}.ux-specs article+article{margin-top:25px}}

/* Icon family follows the contrast, selection, and spacing specifications. */
#interface-design .icon-tile { margin-top: 28px; padding: 28px; border-radius: 12px; background: #343037; color: #fff3dc; }
#interface-design .icon-tile .board-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 11px; letter-spacing: 1px; }
#interface-design .icon-tile .board-top > span { color: #ddd0c5; font-size: 9px; }
#interface-design .icon-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; padding-top: 28px; }
#interface-design .icon-grid > div { text-align: center; }
#interface-design .icon-grid img { width: 45px; height: 45px; object-fit: contain; margin: 0 auto 12px; }
#interface-design .icon-grid span { font-size: 12px; }
@media (max-width: 600px) {
 #interface-design .icon-tile { padding: 22px; }
 #interface-design .icon-tile .board-top { align-items: flex-start; flex-direction: column; gap: 8px; }
 #interface-design .icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; }
}