
/* SONIC V30.1 — independent, responsive product showcase. Visual-only change. */
.sonic-showcase{max-width:1440px!important;margin:0 auto!important;padding:110px clamp(20px,4vw,64px) 100px!important;background:#fff!important;border:0!important;box-shadow:none!important;display:block!important}
.sonic-showcase *{box-sizing:border-box}
.sonic-showcase-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:42px;text-align:left}
.sonic-showcase-kicker{font:700 11px/1.4 Onest,sans-serif;letter-spacing:.18em;color:#b15f2c}
.sonic-showcase-heading h2{font:700 clamp(38px,4.9vw,72px)/1.04 Onest,sans-serif!important;letter-spacing:-.065em!important;color:#111!important;margin:15px 0 0!important}
.sonic-showcase-heading h2 em{font-style:normal;color:#b15f2c}
.sonic-showcase-heading>p{max-width:355px;margin:0 0 6px;font-size:14px;line-height:1.8;color:#777;text-align:left}
.sonic-showcase-window{overflow:hidden;border:1px solid #e8e5e0;border-radius:27px;background:#fff;box-shadow:0 30px 75px #17120e0a}
.sonic-showcase-windowbar{height:57px;background:#f5f4f1;border-bottom:1px solid #e9e6e2;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:14px;font-size:10px;font-weight:700;letter-spacing:.13em;color:#64615e}
.sonic-showcase-windowbar b{color:#b15f2c}
.sonic-showcase-traffic{display:flex;gap:6px}.sonic-showcase-traffic i{width:9px;height:9px;border-radius:50%;background:#d6d2cc}.sonic-showcase-traffic i:first-child{background:#cf8a72}.sonic-showcase-traffic i:nth-child(2){background:#e2c281}.sonic-showcase-traffic i:nth-child(3){background:#91b5a3}
.sonic-showcase-demo{display:flex;align-items:center;gap:7px;color:#b15f2c}.sonic-showcase-demo i{width:6px;height:6px;background:#b15f2c;border-radius:50%}
.sonic-showcase-layout{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:610px}
.sonic-showcase-sidebar{background:#0b0b0b;color:#fff;padding:29px 17px;display:flex;flex-direction:column;min-width:0}
.sonic-showcase-logo{display:flex;align-items:center;gap:10px;padding:0 11px 43px;font-size:18px;font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.sonic-showcase-logo small{display:block;color:#a7a7a7;font-size:7px;letter-spacing:.16em;margin-top:3px}
.sonic-showcase-symbol{width:34px;height:34px;display:grid;place-items:center;background:#b15f2c;color:#fff;border-radius:11px;font-size:23px;flex-shrink:0}
.sonic-showcase-nav{display:flex;flex-direction:column;gap:8px}.sonic-showcase-nav div{display:flex;align-items:center;gap:13px;border-radius:12px;padding:14px 13px;font-size:12px;font-weight:600;color:#aaa}.sonic-showcase-nav div span{font-size:17px;width:18px;text-align:center}.sonic-showcase-nav .is-selected{background:#b15f2c;color:#fff}
.sonic-showcase-sidefoot{margin-top:auto;border-top:1px solid #2a2a2a;padding:20px 8px 0;color:#999;font-size:10px;display:flex;align-items:center;gap:9px}.sonic-showcase-statusdot{width:7px;height:7px;border-radius:50%;background:#a1b69c}
.sonic-showcase-main{min-width:0;padding:35px clamp(18px,3vw,45px) 36px;background:#faf9f7}
.sonic-showcase-welcome{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:27px}.sonic-showcase-overline{font-size:10px;font-weight:700;letter-spacing:.12em;color:#b15f2c;margin-bottom:8px}.sonic-showcase-welcome h3{font-size:clamp(21px,2.4vw,32px)!important;line-height:1.2!important;letter-spacing:-.045em!important;margin:0!important;color:#111!important}.sonic-showcase-welcome h3 span{color:#b15f2c}.sonic-showcase-welcome p{font-size:12px;color:#888;margin:8px 0 0}.sonic-showcase-user{width:42px;height:42px;border-radius:50%;background:#e9d3c3;color:#8e4d26;display:grid;place-items:center;font-weight:700;flex-shrink:0}
.sonic-showcase-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:15px}.sonic-showcase-metrics article{min-width:0;background:#fff;border:1px solid #eae7e2;border-radius:18px;padding:19px 21px;display:flex;flex-direction:column;align-items:flex-start;position:relative}.sonic-showcase-metricicon{position:absolute;top:16px;right:18px;font-size:19px;color:#b15f2c}.sonic-showcase-metrics small{font-size:11px;color:#85817c;font-weight:500}.sonic-showcase-metrics strong{font-size:clamp(28px,3vw,39px);line-height:1.2;color:#111!important;font-weight:700;letter-spacing:-.06em;margin:12px 0 7px}.sonic-showcase-caption{font-size:10px;color:#aaa}
.sonic-showcase-bottom{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px}.sonic-showcase-chartcard,.sonic-showcase-activity{background:#fff;border:1px solid #eae7e2;border-radius:19px;min-width:0;padding:22px}.sonic-showcase-cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.sonic-showcase-cardhead h4{font-size:14px;font-weight:700;letter-spacing:-.02em;color:#111;margin:0}.sonic-showcase-cardhead p{font-size:10px;color:#aaa;margin:5px 0 0}.sonic-showcase-cardhead>span{font-size:10px;color:#a39d96;background:#f5f4f1;border-radius:99px;padding:7px 10px;white-space:nowrap}
.sonic-showcase-chart{display:block;width:100%;height:auto;margin-top:23px}.sonic-showcase-months{display:flex;justify-content:space-between;font-size:9px;font-weight:600;letter-spacing:.05em;color:#aaa;padding:2px 3px 0}
.sonic-showcase-release{display:flex;align-items:center;gap:11px;padding:15px 0;border-bottom:1px solid #f0eeeb;min-width:0}.sonic-showcase-cover{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:20px;flex-shrink:0}.cover-one{background:#a86842}.cover-two{background:#272727}.cover-three{background:#c6ad8f}.sonic-showcase-release>div{min-width:0;flex:1}.sonic-showcase-release strong{display:block;font-size:11px;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sonic-showcase-release small{display:block;font-size:10px;color:#999;margin-top:4px}.sonic-showcase-chip{font-size:9px;font-weight:700;border-radius:99px;padding:7px 9px;white-space:nowrap}.sonic-showcase-chip.done{background:#e9f3e9;color:#4e8052}.sonic-showcase-chip.review{background:#fff1df;color:#a26d2d}.sonic-showcase-chip.draft{background:#efeeed;color:#777}.sonic-showcase-activitynote{font-size:10px;color:#aaa;margin-top:19px}
.sonic-showcase-disclaimer{text-align:center!important;color:#aaa!important;font-size:10px!important;letter-spacing:.15em!important;font-weight:700!important;margin:23px 0 0!important}
@media(max-width:1050px){.sonic-showcase-layout{grid-template-columns:180px minmax(0,1fr)}.sonic-showcase-sidebar{padding:24px 10px}.sonic-showcase-logo{font-size:15px;padding:0 6px 28px}.sonic-showcase-main{padding:24px}.sonic-showcase-bottom{grid-template-columns:1fr}.sonic-showcase-chart{max-height:180px}}
@media(max-width:680px){.sonic-showcase{padding:65px 16px!important}.sonic-showcase-heading{display:block;margin-bottom:25px}.sonic-showcase-heading>p{margin-top:15px}.sonic-showcase-windowbar{padding:0 12px;font-size:8px;height:45px}.sonic-showcase-windowbar>span:nth-child(2){letter-spacing:0}.sonic-showcase-layout{grid-template-columns:1fr}.sonic-showcase-sidebar{display:none}.sonic-showcase-main{padding:20px 13px}.sonic-showcase-metrics{gap:7px}.sonic-showcase-metrics article{padding:12px 10px;border-radius:12px}.sonic-showcase-metricicon{display:none}.sonic-showcase-metrics strong{font-size:29px}.sonic-showcase-metrics small{font-size:10px}.sonic-showcase-caption{font-size:9px}.sonic-showcase-chartcard,.sonic-showcase-activity{padding:18px}.sonic-showcase-window{border-radius:18px}.sonic-showcase-welcome h3{font-size:22px!important}}
