/* Layout 02 with typography from option 03 and expanded Clara demos. */
body{font-family:Arial,Helvetica,sans-serif;font-size:16px}
h1,h2,h3{font-family:Arial,Helvetica,sans-serif;font-weight:700}
h1{line-height:1.06;letter-spacing:-2.7px}
h2{line-height:1.16;letter-spacing:-1.4px}
em{font-family:inherit;font-style:normal;font-weight:inherit}h1 em{font-size:1em}
.brand{font-family:'Manrope',sans-serif}
.hero-copy>p{max-width:455px}
.demo-copy,.demo-window{min-width:0}
.demo-grid{gap:70px;grid-template-columns:.9fr 1.1fr}
.demo-copy>p{max-width:350px}
.demo-tabs button{font-size:12px;gap:13px}
.demo-window{border-radius:13px;border-color:#c6d5ea;box-shadow:0 16px 42px #1e46751a}.demo-window-header{background:#fff;padding:15px 20px}.demo-window-header strong{font-size:14px}.demo-window-header small{font-size:10px}.example-tag{font-size:8px;background:#edf3ff;color:#557ab4}
#demo-panel{height:360px;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:18px;gap:12px;background:#f6f8fd;scrollbar-width:thin;scrollbar-color:#bacce6 transparent}
.demo-bubble{font-size:12px;line-height:1.6;padding:12px 14px;max-width:91%;white-space:pre-line;flex-shrink:0}.demo-bubble .speaker{font-size:9px;color:#5e7599;margin-bottom:5px}.demo-bubble.outgoing{background:#e1ebff}.demo-bubble.incoming{border-color:#e0e7f0}
.demo-controls{padding:12px 17px;display:flex;gap:12px;align-items:center;background:#fff;border-top:1px solid #e3eaf4;min-height:62px}.demo-controls>.button{font-size:11px;padding:10px 13px;gap:17px}.demo-controls>span{font-size:10px;color:#7b8ba4}.demo-controls>button:last-child{margin-left:auto;color:#496990;background:#edf2fa;border-radius:6px;font-size:22px;min-width:34px;height:34px}
.context-summary{padding:13px 18px;background:#eef4ff;border-top:1px solid #dde6f5}.context-summary strong{font-size:10px;font-weight:600;line-height:1.6;display:block;color:#325889}.context-summary>div{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.context-summary span{font-size:9px;padding:5px 7px;border:1px solid #ccdcf3;border-radius:4px;color:#5577a5;background:#f8faff}.demo-footer{font-size:9px;padding:11px;background:#fff;color:#77869e}

.option-link{display:flex;gap:6px;align-items:center;padding:7px 9px;bottom:12px;left:12px;font-size:10px}
.option-link>span{font-size:8px;letter-spacing:.5px;margin-right:5px}
.option-link a{padding:5px 7px;border-radius:4px}.option-link a:hover{background:#eaf0fb}
@media(max-width:900px){
 .hero-copy>p{margin-inline:auto}.demo-grid{grid-template-columns:1fr;gap:35px}
 .demo-copy>p{max-width:550px}.demo-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px}
 .demo-tabs button{white-space:normal;width:100%;min-width:0;text-align:left;line-height:1.4;border:1px solid #cbd5ec;border-radius:6px;font-size:11px;padding:11px;gap:8px}
 .demo-tabs button>span:last-child{display:none}.demo-tabs button:last-child{grid-column:1/-1}
 #demo-panel{height:355px;padding:13px}.demo-bubble{font-size:12px}
 .demo-controls{padding:10px 12px;gap:8px}.demo-controls>span{font-size:9px}.demo-controls>.button{font-size:10px}
 .context-summary{padding:12px 14px}.demo-footer{font-size:8px}
 footer{padding-bottom:65px}
}
@media(max-width:360px){.demo-controls>.button{gap:8px}.demo-controls{gap:6px}.demo-footer{font-size:7px}}