/* Native dashboard illustration; names and figures are fictional sample data. */
.portal-mini{top:105px}
.client-strip{padding:28px 0 36px;border-block:1px solid var(--line);background:#fff;overflow:hidden}
.client-strip-heading{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 24px 24px;min-height:28px}
.client-strip-heading p{font-size:10px;color:#898d96;letter-spacing:.1em}
.marquee-toggle{background:none;border:1px solid #e1e2e7;border-radius:20px;font-size:10px;color:#747985;padding:6px 11px;min-width:55px}
.marquee-toggle[hidden]{display:none}
.logo-marquee{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;width:max-content}
.client-strip.is-animated .logo-track{animation:client-scroll 32s linear infinite}
.client-strip.is-paused .logo-track,.client-strip:hover .logo-track,.client-strip:focus-within .logo-track{animation-play-state:paused}
.logo-set{display:flex;align-items:center;flex-shrink:0;gap:70px;padding-right:70px}
.placeholder-logo{display:flex;align-items:center;gap:9px;white-space:nowrap;color:#9b9ea6;font-size:29px;font-weight:700;letter-spacing:-.055em;min-width:165px;justify-content:center}
.placeholder-logo i{font-style:normal;font-size:35px;line-height:1}.logo-1{font-size:22px;letter-spacing:-.025em}.logo-2{font-family:Georgia,serif;font-weight:400;font-style:italic;font-size:32px}.logo-3{font-size:19px;letter-spacing:.06em}.logo-4{font-family:Georgia,serif;letter-spacing:-.04em;font-size:30px}.logo-5{font-weight:400;font-size:28px}
@keyframes client-scroll{to{transform:translateX(-50%)}}
.dashboard-scroll{overflow:auto;border:9px solid #101112;border-radius:25px;background:#f1f3f4;box-shadow:0 12px 28px #13132012;scrollbar-width:thin;scrollbar-color:#c8cbd3 #f1f3f4}
.dashboard-scroll:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.demo-dashboard{color:#292b30;background:#f1f3f4;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:10px;min-width:820px;text-align:left;line-height:1.35}
.demo-dashboard *{box-sizing:border-box}
.demo-dashboard h3,.demo-dashboard h4{letter-spacing:-.025em;color:#202225;line-height:1.2}
.demo-dashboard h3{font-size:20px;font-weight:700}
.demo-dashboard h4{font-size:12px;font-weight:600;margin:0}
.demo-toolbar{height:41px;display:flex;align-items:center;gap:10px;padding:7px 13px;border-bottom:1px solid #e6e8eb;background:#f5f6f7}
.demo-toolbar>span:first-of-type{font-size:8px;background:#e9ebed;padding:3px 7px;border-radius:4px}
.demo-toolbar>img{height:24px;width:auto}
.demo-toolbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:8px;color:#747880}
.demo-help{display:grid;place-items:center;width:13px;height:13px;border:1px solid #8f9299;border-radius:50%;font-size:9px;margin-left:12px}
.demo-avatar{width:25px;height:25px;border-radius:50%;display:inline-grid;place-items:center;flex-shrink:0;background:#e2e5e9;color:#5b616c;font-size:8px;font-weight:600;letter-spacing:0}
.tone-0{background:#ede1db;color:#82675b}.tone-1{background:#e0e8df;color:#637960}.tone-2{background:#e2e4f4;color:#5b5e86}.tone-3{background:#f1e7d7;color:#8c7855}
.demo-toolbar .demo-avatar{width:21px;height:21px;font-size:7px}
.demo-layout{display:grid;grid-template-columns:158px minmax(0,1fr)}
.demo-sidebar{border-right:1px solid #e3e5e9;padding:12px 9px;background:#f0f2f3}
.demo-brand{background:#fff;display:flex;align-items:center;gap:7px;padding:9px 7px;border-radius:9px;box-shadow:0 1px 3px #00000008;margin-bottom:19px}
.demo-brand>span:last-child{margin-left:auto}.demo-brand small{display:block;color:#8b8e95;font-size:7px}
.demo-brand-icon{width:24px;height:24px;flex-shrink:0;border-radius:50%;display:inline-grid;place-items:center;background:#25282b;color:#fff;font-size:8px;letter-spacing:-.04em}
.demo-nav>div{position:relative;display:flex;align-items:center;gap:8px;padding:7px 9px;font-size:9px;line-height:1;border-radius:7px;min-height:27px}
.demo-nav>div>span{font-size:14px;width:13px;text-align:center;color:#7b818a}.demo-nav .is-current{background:#e5e7eb;color:var(--blue)}.demo-nav .is-current>span{color:var(--blue)}.demo-nav .is-current:before{content:'';position:absolute;left:-9px;top:7px;bottom:7px;width:2px;background:var(--blue);border-radius:3px}
.demo-nav i{margin-left:auto;background:#fb6472;color:#fff;font-size:7px;border-radius:10px;padding:3px 4px;font-style:normal}
.demo-config{font-size:8px;color:#868b93;display:block;margin:19px 9px 6px}
.demo-main{padding:21px 24px 22px;min-width:0}
.demo-welcome{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.demo-welcome p{font-size:10px;color:#92969d;margin-top:5px}
.demo-caught-up{font-size:8px;background:#e2f3e8;color:#56a478;padding:6px 9px;border-radius:6px;white-space:nowrap}
.demo-health{background:#fff;border-radius:15px;box-shadow:0 2px 2px #10102005;margin-bottom:16px;overflow:hidden}
.demo-health-items{display:flex;align-items:center;gap:12px;padding:10px 12px}
.demo-health-brand{display:flex;align-items:center;gap:7px;white-space:nowrap}.demo-health-brand strong{font-size:10px}.demo-health-brand small{display:block;font-size:7px;color:#868c95;margin-top:4px}
.demo-health-metric{display:flex;align-items:center;gap:7px;border-left:1px solid #eceef0;padding-left:12px;flex:1;white-space:nowrap}
.demo-health-metric>span:last-child{font-size:7px;color:#989ba1}.demo-health-metric small{display:block;font-size:7px;color:#57a875;margin-top:4px}.demo-health-metric b{color:#42484e;margin-right:3px}
.demo-gauge{position:relative;display:grid;place-items:end center;width:32px;height:22px;border-radius:32px 32px 0 0;border:5px solid #71c493;border-bottom:0;font-weight:700;font-size:10px;padding-top:2px;line-height:1}
.demo-breakdown{background:#f5f6f9;color:#777b88;padding:6px 8px;border-radius:7px;font-size:8px}
.demo-health>p{background:#f7f8f9;font-size:7px;color:#8f949c;padding:6px 13px;border-top:1px solid #f0f1f4}
.demo-middle{display:grid;grid-template-columns:1.85fr 1fr;gap:13px;margin-bottom:15px}
.demo-panel{background:#fff;border:1px solid #eceef0;border-radius:15px;padding:16px;min-width:0;box-shadow:0 2px 2px #10102002}
.demo-sales header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.demo-sales header strong{font-size:12px;display:block;margin-top:6px}.demo-sales h4 span{color:#9499a1;font-weight:400}
.demo-periods{display:flex;gap:7px;color:#91969f;font-size:7px;align-items:center}.demo-periods span{padding:2px 3px}.demo-periods .selected{background:#202225;color:white;border-radius:9px;padding-inline:6px}
.demo-chart{display:flex;gap:8px;height:154px}.demo-axis{display:flex;flex-direction:column;justify-content:space-between;font-size:7px;color:#969ba3;width:26px;padding:12px 0 0;flex-shrink:0}.demo-chart svg{width:100%;height:100%;overflow:visible;min-width:0}
.demo-chart-dates{display:flex;justify-content:space-between;font-size:6px;color:#91969f;padding-left:34px;margin-top:7px}
.demo-activity h4{margin-bottom:13px}.demo-activity-row{display:flex;gap:8px;padding:8px 0;border-bottom:1px solid #f0f1f3;align-items:center}.demo-activity-row:last-child{border-bottom:0}.demo-activity-row p{font-size:8px;color:#959aa2;line-height:1.4}.demo-activity-row strong{font-weight:400;color:#4d535b}.demo-activity-row small{display:block;font-size:7px;margin-top:2px}
.demo-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.demo-table{padding:14px 12px}.demo-table header{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:19px}.demo-table h4{font-size:11px}.demo-table header small{font-size:6px;color:#92969e;white-space:nowrap}.demo-table-label{display:flex;justify-content:space-between;font-size:7px;color:#a0a5ae;padding:0 0 8px 20px;border-bottom:1px solid #eff0f2}.demo-table-row{display:flex;align-items:center;gap:6px;padding:9px 0;border-bottom:1px solid #f0f1f3}.demo-table-row:last-child{border:0;padding-bottom:0}.demo-rank{font-size:7px;color:#a7acb4;width:7px}.demo-table .demo-avatar{width:22px;height:25px;border-radius:5px;font-size:7px}.demo-row-name{font-size:8px;line-height:1.2}.demo-row-name small{display:block;color:#a2a6ac;font-size:6px;margin-top:3px}.demo-table-row b{font-size:8px;font-weight:500;margin-left:auto;white-space:nowrap}
.dashboard-scroll-hint{display:none}
@media(max-width:1100px){.portal-mini{top:95px}}
@media(max-width:700px){.portal-mini{top:88px}.client-strip{padding-block:24px}.client-strip-heading{margin-bottom:18px;gap:12px}.client-strip-heading p{font-size:8px}.logo-set{gap:45px;padding-right:45px}.placeholder-logo{font-size:24px;min-width:140px}.logo-1{font-size:18px}.logo-3{font-size:16px}.logo-2,.logo-4{font-size:27px}.dashboard-scroll{border-width:5px;border-radius:14px}.dashboard-scroll-hint{display:block;font-size:9px;text-align:center;color:#868b96;margin-top:8px}.demo-dashboard{min-width:820px}.demo-main{padding:17px}.demo-layout{grid-template-columns:135px minmax(0,1fr)}.demo-health-items{gap:9px;padding-inline:9px}.demo-health-metric{gap:5px;padding-left:9px}.demo-breakdown{display:none}}
@media(max-width:350px){.portal-mini{top:77px}}
@media(prefers-reduced-motion:reduce){.client-strip.is-animated .logo-track{animation:none}.marquee-toggle{display:none}}
/* On phones, keep the key dashboard panels readable instead of cropping the desktop canvas. */
@media(max-width:700px){
 .demo-dashboard{min-width:0;font-size:9px}.demo-layout{display:block}.demo-sidebar{display:none}.demo-toolbar{padding-inline:9px;gap:7px}.demo-toolbar-right{font-size:0;gap:5px}.demo-toolbar-right .demo-help{display:none}.demo-main{padding:15px 10px 12px}.demo-welcome{margin-bottom:14px}.demo-welcome h3{font-size:18px}.demo-welcome p{font-size:8px}.demo-caught-up{display:none}.demo-health-items{gap:6px;padding:10px 7px}.demo-health-brand,.demo-breakdown{display:none}.demo-health-metric{border:0;padding:0;gap:4px}.demo-health-metric>span:last-child{font-size:6px}.demo-gauge{width:27px;height:20px;font-size:9px;border-width:4px}.demo-health>p{font-size:6px;padding:6px 9px}.demo-middle{grid-template-columns:1fr;margin-bottom:12px}.demo-sales{padding:12px}.demo-chart{height:140px}.demo-periods{gap:3px}.demo-sales h4{font-size:11px}.demo-activity{display:none}.demo-bottom{grid-template-columns:1fr}.demo-bottom>.demo-table:nth-child(-n+2){display:none}.demo-table header{margin-bottom:12px}.demo-table h4{font-size:12px}.demo-table header small{font-size:8px}.demo-table-label{font-size:8px}.demo-row-name{font-size:10px}.demo-row-name small{font-size:8px}.demo-table-row b{font-size:10px}.dashboard-scroll-hint{display:none}
}
/* Real client logos: optically balanced heights, quiet monochrome, continuous scroll. */
.client-logo{display:block;flex-shrink:0;height:var(--logo-h);width:auto;opacity:.5;transition:opacity var(--motion-fast,200ms)}
.client-logo:hover{opacity:.85}
.client-strip .logo-set{gap:64px;padding-right:64px}
.client-strip.is-animated .logo-track{animation-duration:56s}
@media(max-width:700px){.client-logo{height:calc(var(--logo-h)*.78)}.client-strip .logo-set{gap:44px;padding-right:44px}.client-strip.is-animated .logo-track{animation-duration:44s}}