.product-viz{--viz-blue:#376b7b;--viz-pale:#eaf2f1;color:#16343e;background:#fff;border:1px solid #dbe5e5;border-radius:14px;box-shadow:0 18px 55px #183d4510;overflow:hidden;container-type:inline-size;text-align:left;font-family:Arial,Helvetica,sans-serif}
.viz-top{padding:16px 22px;border-bottom:1px solid #e4eaea;display:flex;justify-content:space-between;align-items:center;gap:15px;background:#f8faf8}.viz-top img{width:104px!important;height:auto!important;max-height:45px;object-fit:contain;box-shadow:none!important;border:0!important;border-radius:0!important}.viz-top>span{font-size:8px;letter-spacing:1.2px;color:#647d83;text-align:right}
.viz-title{padding:23px 24px 17px;display:flex;align-items:center;justify-content:space-between;gap:14px}.viz-title h3{font-size:21px;letter-spacing:-.035em;line-height:1.25}.viz-play{background:#edf2f1;border:1px solid #dce5e4;border-radius:5px;padding:9px 12px;white-space:nowrap;font-size:11px;min-height:36px}.viz-stage{padding:0 24px 24px;min-height:310px}.viz-stage small{font-size:9px;letter-spacing:1px;color:#68818a;display:block}.viz-stage h4{font-size:23px;letter-spacing:-.035em;line-height:1.2;margin:8px 0}.viz-stage p{font-size:12px;line-height:1.6;color:#60757c;margin:5px 0}.viz-badge{display:inline-block;color:#305e63;background:#e5f0ed;font-size:10px;padding:7px 9px;border-radius:5px;white-space:nowrap}.viz-job{display:flex;gap:17px;align-items:center;padding-bottom:23px}.viz-job>svg{width:90px;flex-shrink:0}.viz-job>div{flex:1}.viz-job h4{font-size:20px}
.viz-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.viz-paper{background:#f7f9f8;border:1px solid #e3eae8;padding:17px;border-radius:8px}.viz-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px;padding:13px 0;border-bottom:1px solid #e1e8e6}.viz-row:last-child{border:0}.viz-row strong{text-align:right;font-weight:600}.viz-row.is-focus strong{color:#24726c}.viz-flow{display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 0;font-size:12px}.viz-flow b{color:#72929b}.viz-flow.horizontal{flex-direction:row;justify-content:center;gap:15px;margin-top:25px}.viz-flow span{background:#fff;padding:9px;border:1px solid #dce6e3;border-radius:5px}
.viz-calendar{display:grid;grid-template-columns:155px minmax(0,1fr);gap:20px}.viz-inbox{border-right:1px dashed #ccd9d8;padding-right:16px}.viz-ticket{margin-top:19px;padding:15px 12px;background:#fbf3e7;border:1px solid #ecddc5;border-radius:7px;display:flex;flex-direction:column;gap:8px;box-shadow:0 5px 12px #102f3a06}.viz-ticket b{font-size:14px}.viz-ticket span{font-size:10px}.viz-ticket em{font:10px/1.4 Arial;color:#92734a;letter-spacing:0}.viz-ticket-muted{opacity:.5}.viz-dot{width:6px;height:6px;background:#c49354;border-radius:50%}.viz-week-head{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:600;gap:8px;min-height:29px}.viz-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:14px}.viz-days>div{min-height:145px;background:#f5f8f7;border:1px solid #e5eae9;border-radius:5px;padding:10px 6px}.viz-days small{text-align:center;margin-bottom:20px;font-size:8px}.viz-other{background:#e6eaea;padding:9px 5px;border-left:2px solid #a6b5b4;font-size:9px;line-height:1.6;border-radius:3px}.viz-other span{color:#7c8f93}.viz-slot{text-align:center;border:1px dashed #b5c9c7;border-radius:5px;padding:13px 3px;font-size:10px;line-height:1.6;color:#6c9391}.viz-booked{background:#dceeed;padding:10px 6px;border-left:3px solid #418880;border-radius:4px;font-size:10px;display:flex;flex-direction:column;gap:7px;animation:viz-arrive .7s ease-out}.viz-booked strong{font-size:9px}.viz-capacity{margin-top:18px;display:grid;grid-template-columns:1fr auto;gap:9px;font-size:10px}.viz-capacity strong{font-size:16px}.viz-meter{grid-column:1/-1;height:6px;background:#eaf0ee;border-radius:4px;overflow:hidden}.viz-meter i{height:100%;background:#50897f;display:block;animation:viz-grow .8s ease-out;transform-origin:left}.viz-capacity small{grid-column:1/-1;font-size:9px;letter-spacing:0}
.viz-explainer{padding:19px 24px;display:flex;gap:14px;align-items:center;background:#edf3f2;min-height:86px}.viz-explainer .viz-number{font-size:24px;font-weight:500;color:#658d95}.viz-explainer p{font-size:13px;line-height:1.6;color:#36565f;margin:0}.viz-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #dde7e5}.viz-steps button{font-size:11px;line-height:1.3;background:#fff;padding:17px 8px;color:#657d85;border-right:1px solid #e5ebe9;min-height:58px;display:flex;align-items:center;justify-content:center;gap:8px}.viz-steps button:last-child{border:0}.viz-steps button span{font-size:9px;opacity:.65}.viz-steps button[aria-pressed=true]{background:#193e4a;color:#fff}.viz-steps button:hover{background:#dce9e7;color:#193e4a}
.viz-stock-top{display:flex;align-items:center;gap:17px}.viz-part{width:82px;flex-shrink:0;background:#eaf1f0;border-radius:10px}.viz-part svg{width:100%}.viz-stock-top>div:nth-child(2){flex:1}.viz-shelves{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.viz-shelves span{border:1px solid #dce6e3;padding:11px;display:flex;align-items:center;gap:12px;font-size:11px;border-radius:5px}.viz-shelves b{font-size:24px;font-weight:400;color:#4a818a}
.viz-invoice-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}.viz-invoice-table>div{display:grid;grid-template-columns:2fr .65fr 1fr .7fr;gap:6px;font-size:11px;padding:14px 7px;border-bottom:1px solid #e2e9e7;align-items:center}.viz-invoice-table .viz-invoice-label{font-size:9px;color:#6f858b;background:#f1f5f3}.viz-invoice-table strong{font-size:11px}.viz-discount{background:#def0e9;color:#287663;padding:8px 4px;border-radius:4px;text-align:center;animation:viz-arrive .5s ease}.viz-total{padding:23px 6px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:12px}.viz-total strong{font-size:29px;font-weight:500}.viz-total small{grid-column:1/-1;letter-spacing:0}.viz-transfer{display:flex;align-items:center;justify-content:center;gap:27px;border:1px dashed #b9cecb;border-radius:6px;padding:14px;font-size:13px}.viz-transfer strong{color:#32764b}.viz-moving-arrow{animation:viz-arrow 1.2s ease-in-out 2}
.viz-mobile-layout{display:grid;grid-template-columns:225px 1fr;gap:30px;align-items:center}.viz-phone{background:#f5f8f5;border:6px solid #193b46;border-radius:28px;padding:16px 14px 12px;box-shadow:10px 15px 0 #e0ebe9;max-width:225px}.viz-notch{height:6px;width:55px;margin:-8px auto 18px;border-radius:8px;background:#193b46}.viz-phone-brand{font-size:12px;font-weight:700;display:flex;justify-content:space-between;margin-bottom:26px}.viz-phone-brand span{font-size:9px;font-weight:400}.viz-phone>svg{width:100%;height:76px;margin:6px 0}.viz-phone h4{font-size:24px}.viz-phone small{font-size:8px}.viz-phone-card{background:white;border:1px solid #e0e8e3;padding:14px 9px;border-radius:7px}.viz-phone-card b{font-size:12px}.viz-phone-card p{font-size:10px;min-height:32px}.viz-phone-action{background:#d9eae6;color:#326960;border-radius:5px;padding:11px 5px;margin-top:12px;text-align:center;font-size:9px}.viz-phone-nav{display:flex;justify-content:space-around;border-top:1px solid #d9e3df;margin-top:24px;padding-top:12px;font-size:8px;line-height:1.8;text-align:center}.viz-note-number{font-size:55px;color:#afc8c9}.viz-mobile-note h4{font-size:30px;line-height:1.15}.viz-mobile-note p{font-size:14px}.viz-customer-card{background:#f2f7f4;border-radius:9px;padding:24px}.viz-customer-card h4{font-size:26px}.viz-timeline{display:flex;justify-content:space-between;gap:8px;margin-top:24px;font-size:11px}.viz-timeline .is-focus{color:#30796f}.viz-proposal{border-top:1px solid #cfdfd8;padding-top:20px;margin-top:20px;display:flex;justify-content:space-between;gap:12px;align-items:center}.viz-proposal strong{font-size:20px}.viz-proposal span{font-size:11px;max-width:150px;line-height:1.5}
.detail-illustration{margin:0 0 28px}.detail-illustration>figcaption,.home-illustration>figcaption{font-size:10px;color:#74888d;margin-top:12px;line-height:1.5}.hero .home-illustration{margin:0;min-width:0;transform:rotate(1deg)}.hero .home-illustration .product-viz{box-shadow:20px 24px 0 #e2ece9}.real-preview .product-viz{border:0;box-shadow:none}.mobile-illustration{margin:0;width:100%;min-width:0}.mobile-illustration .viz-mobile-note{display:none}.mobile-illustration .viz-mobile-layout{display:flex;justify-content:center}.mobile-illustration .viz-top,.mobile-illustration .viz-title{background:white}.mobile-illustration .viz-title h3{font-size:20px}.mobile-illustration .viz-stage{background:#fff}.mobile-illustration .product-viz{max-width:430px;margin:auto}.hero{grid-template-columns:.85fr 1.15fr}
@keyframes viz-arrive{from{opacity:0;transform:translate(-14px,7px)}to{opacity:1;transform:none}}@keyframes viz-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes viz-arrow{50%{transform:translateX(9px)}}
@container(max-width:520px){.viz-calendar{grid-template-columns:110px 1fr;gap:12px}.viz-inbox{padding-right:10px}.viz-ticket{padding:12px 8px}.viz-stage{padding:0 15px 18px}.viz-top{padding:12px 16px}.viz-title{padding:18px 16px}.viz-title h3{font-size:19px}.viz-job{gap:10px;flex-wrap:wrap}.viz-job>svg{width:70px}.viz-job h4{font-size:18px}.viz-two{grid-template-columns:1fr}.viz-paper{padding:13px}.viz-mobile-layout{grid-template-columns:190px 1fr;gap:20px}.viz-mobile-note h4{font-size:22px}.viz-phone{width:190px}.viz-explainer{padding:16px;min-height:98px}.viz-explainer p{font-size:12px}.viz-steps button{font-size:10px;gap:4px}.viz-steps button span{display:none}.viz-shelves span{gap:7px;padding:8px}.viz-invoice-head h4{font-size:20px}}
@container(max-width:370px){.viz-calendar{grid-template-columns:1fr}.viz-inbox{border:0;padding:0}.viz-ticket{flex-direction:row;align-items:center;flex-wrap:wrap;margin:10px 0}.viz-ticket em{display:none}.viz-days>div{min-height:120px}.viz-mobile-layout{display:flex;justify-content:center}.viz-mobile-note{display:none}.viz-top>span{font-size:7px}.viz-title h3{font-size:17px}.viz-invoice-table>div{font-size:10px;gap:4px}.viz-stock-top{gap:10px}.viz-stock-top .viz-badge{display:none}.viz-proposal{flex-direction:column;align-items:flex-start}.viz-timeline{font-size:10px}}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero .home-illustration{transform:none;max-width:720px;width:100%}.hero .home-illustration .product-viz{box-shadow:8px 10px 0 #e2ece9}}
@media(prefers-reduced-motion:reduce){.product-viz *{animation:none!important;transition:none!important}}