@font-face{font-family:DM;src:url('../component-example/assets/dmsans.ttf')}*{box-sizing:border-box}body{margin:0;font:14px/1.5 DM,sans-serif;color:#182d31;background:#fcfbf7}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #007074;outline-offset:3px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,p{margin:0}h1{font-size:26px;line-height:1.25;letter-spacing:-.035em;font-weight:650}h2{font-size:15px;line-height:1.4;font-weight:600}button{border:0;background:none;color:inherit}.demo-note{display:none}.stage{width:100%;aspect-ratio:1100/850;position:relative;overflow:hidden;background:radial-gradient(ellipse at 55% 68%,#e9f2ee 0,transparent 65%)}.scene{position:absolute;width:1100px;height:850px;transform:scale(var(--scale,1));transform-origin:top left}.arrival{position:absolute;left:32px;top:28px;width:385px;height:88px;display:flex;gap:15px;align-items:center;padding:17px 20px;background:white;border:1px solid #ccdcd7;border-radius:10px;box-shadow:0 8px 18px #1838310a;z-index:2}.arrival>svg{width:36px;height:36px;padding:8px;background:#e2f7f3;border-radius:8px;color:#007074}.arrival strong{font-size:15px;display:block;margin-bottom:4px}.arrival span:not(.arrival-dot){font-size:12px;color:#697b79}.arrival-dot{width:7px;height:7px;border-radius:50%;background:#00b8b4;margin-left:auto}.connector{position:absolute;inset:0;width:1100px;height:850px;stroke:#32b9b3;stroke-width:2;fill:none}.connector circle{fill:#00b8b4;stroke:none}.crm{position:absolute;left:32px;top:144px;width:1000px;height:635px;background:white;border:1px solid #c7d8d2;border-radius:12px;box-shadow:0 3px 5px #213c3310,0 18px 38px -22px #213c3340;display:flex;overflow:hidden}.sidebar{width:142px;flex-shrink:0;background:#0e252a;color:#f7faf8;padding:24px 14px;position:relative}.wordmark{font-size:18px;font-weight:700;letter-spacing:-.035em;display:block}.demo-badge{display:inline-block;color:#91b6b4;font-size:8px;letter-spacing:.1em;margin:8px 0 0 0}.workspace-name{font-size:10px;color:#a9c3c1;margin-top:12px;padding-bottom:25px;border-bottom:1px solid #294045}.sidebar nav{display:grid;gap:7px;margin-top:24px}.sidebar nav button{min-height:40px;display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:6px;font-size:12px;color:#b6cac9;text-align:left}.sidebar nav button.active{background:#17454a;color:#e3fffa}.sidebar nav svg{width:17px;height:17px}.side-bottom{position:absolute;bottom:21px;font-size:9px;color:#9ab8b5;display:flex;gap:7px;align-items:center}.status-dot{width:5px;height:5px;border-radius:50%;background:#00b8b4}.record{min-width:0;flex:1}.record-head{padding:20px 25px 0}.crumb{color:#758684;font-size:10px;margin-bottom:16px}.crumb span{margin:0 7px;color:#c2ceca}.title-row{display:flex;align-items:start;justify-content:space-between;gap:14px}.title-row p{font-size:12px;color:#75817f;margin-top:5px}.badge{font-size:10px;padding:4px 8px;background:#fff3db;color:#8b5917;border:1px solid #f3d49e;border-radius:5px;white-space:nowrap}.tabs{display:flex;gap:24px;margin:20px 25px 0;border-bottom:1px solid #e0e8e5}.tabs button{font-size:12px;min-height:40px;padding:0 2px;border-bottom:2px solid transparent;color:#667875;display:flex;align-items:center;gap:7px}.tabs button[aria-selected=true]{color:#006c6e;border-color:#00b8b4;font-weight:600}.tabs button>span{font-size:9px;background:#f0f4f2;color:#71817d;padding:1px 4px;border-radius:3px}.panels{padding:22px 25px}.panel[hidden]{display:none}.details-grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:23px}.main-photo{position:relative;overflow:hidden;border-radius:7px}.photo{aspect-ratio:251/150;background-image:url('../systems-ai-estimate-stills/01-dimensioned-photos.webp');background-size:612% auto;background-repeat:no-repeat;border-radius:5px;background-color:#ddd8cb}.angle-a{background-position:11.67% 76.66%}.angle-b{background-position:32.68% 76.66%}.photo-count{position:absolute;right:8px;bottom:8px;font-size:9px;color:white;background:#0b242dc9;padding:3px 7px;border-radius:4px}.photo-strip{display:flex;gap:9px;margin-top:12px;align-items:center}.thumb{padding:3px;width:75px;border:1px solid #dce6e1;border-radius:5px;flex-shrink:0}.thumb.selected{border-color:#00aaa8;background:#eefaf7}.thumb .photo{border-radius:2px}.photo-source{font-size:9px;color:#6f817d;line-height:1.6}.photo-source strong{font-size:9px;font-weight:500;color:#425c55}.caption{font-size:10px;color:#778680;margin-top:12px}.info-column>h2{margin:0 0 8px}dl{margin:0}dl>div{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #e9eeeb;font-size:11px}dt{color:#73837e}dd{margin:0;color:#2b403a}.agent-panel{margin-top:17px;background:#f0f8f5;border:1px solid #d8e8e0;border-radius:7px;padding:13px;width:260px;max-width:100%}.agent-heading{display:flex;align-items:center;gap:7px;color:#48746c;font-size:10px;margin-bottom:10px}.agent-heading svg{width:15px;height:15px}.prepared-dot{width:5px;height:5px;background:#22a88f;border-radius:50%;margin-left:auto}.agent-panel h2{font-size:13px}.agent-panel p{font-size:10px;color:#698079;margin-top:5px}.condition{color:#906225;font-size:9px;margin-top:10px}.condition:before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:#e7a948;margin-right:6px}.text-action{font-size:10px;color:#006e70;display:flex;gap:8px;align-items:center;padding:10px 0 0;margin-top:11px;border-top:1px solid #d9e8e1;width:100%;text-align:left}.text-action svg{width:13px;height:13px;margin-left:auto}.next-action{position:absolute;right:20px;top:551px;width:215px;z-index:4;background:#fffefa;border:1px solid #e5c38c;border-radius:9px;box-shadow:0 12px 28px -12px #5a3d1940;padding:17px}.next-label{font-size:9px;color:#917346;letter-spacing:.09em}.next-action h2{font-size:14px;margin-top:8px}.next-action p{font-size:10px;color:#8b806e;margin:7px 0 13px}.next-action button{width:100%;height:36px;padding:0 8px;background:#ffa126;color:#39230a;border:1px solid #eaa042;border-radius:5px;display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600}.next-action button svg{width:14px;height:14px}.next-action button svg:last-child{margin-left:auto}.send-state{font-size:10px;display:flex;gap:7px;color:#7f8e87;padding:15px 0}.send-state svg{width:13px;height:13px;color:#a9b6af}.not-sent{padding-top:10px;border-top:1px solid #ece4d5;font-size:9px;color:#8a8274;display:flex;align-items:center;gap:6px}.not-sent>span{width:5px;height:5px;border-radius:50%;background:#bdb7a8}.panel-heading{margin-bottom:18px}.panel-heading h2{font-size:17px}.panel-heading p{font-size:11px;color:#70827b;margin-top:4px}.photo-gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px}figure{margin:0}figcaption{font-size:11px;color:#6e827a;margin-top:8px}.photo-help{font-size:12px;color:#697d75;margin-top:20px;max-width:560px}.estimate-summary{display:flex;justify-content:space-between;padding:12px;background:#f1f6f3;border-radius:6px;font-size:12px;margin-bottom:12px}table{width:100%;border-collapse:collapse;font-size:11px;text-align:left}th{font-size:9px;font-weight:500;color:#72867b;padding:7px 8px;background:#f8faf9}td{border-bottom:1px solid #e5ebe7;padding:10px 8px}fieldset{margin:16px 0 0;padding:12px;border:1px solid #e3e9e5;border-radius:6px;display:flex;gap:16px}legend{padding:0 5px;font-size:10px;color:#61736a}label{display:flex;align-items:center;gap:6px;font-size:10px;cursor:pointer}input{accent-color:#007074}.review-footer{display:flex;align-items:center;gap:12px;margin-top:13px}.review-footer button{padding:9px 13px;background:#007074;color:white;border-radius:5px;font-size:11px}.review-footer button:disabled{background:#e8eeeb;color:#88978f}.review-footer span{font-size:10px;color:#6d7f76;max-width:250px}.estimate-note{font-size:9px;margin-top:12px;color:#7c8c84}.live-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.scene[data-tab=estimate] .next-action{top:574px}.scene[data-tab=estimate] .panels{padding-right:172px}.scene[data-tab=estimate] fieldset{display:block}.scene[data-tab=estimate] fieldset label+label{margin-top:7px}
/* The inspection route uses a readable, reflowing application view. */
.inspect .demo-note{display:flex;justify-content:space-between;gap:12px;padding:12px 24px;font-size:12px;background:#e9f2ed;color:#476359}.demo-note a{color:#007074}.inspect .stage{aspect-ratio:auto;overflow:visible;padding:30px;max-width:1250px;margin:auto;background:none}.inspect .scene{position:relative;transform:none;width:100%;height:auto;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:18px}.inspect .arrival{position:static;width:385px;max-width:100%;grid-column:1/-1;height:auto;min-height:80px}.inspect .connector{display:none}.inspect .crm{position:relative;inset:auto;width:100%;height:auto;min-height:600px;grid-column:1;overflow:visible}.inspect .sidebar{border-radius:11px 0 0 11px}.inspect .next-action,.inspect .scene[data-tab=estimate] .next-action{position:sticky;top:24px;width:100%;align-self:start;grid-column:2;grid-row:2}.inspect .details-grid{grid-template-columns:1fr}.inspect .info-column{display:grid;grid-template-columns:1fr 1fr;gap:16px}.inspect .info-column>h2{grid-column:1/-1}.inspect .agent-panel{margin:0;width:auto}.inspect .scene[data-tab=estimate] .panels{padding-right:25px}.inspect .record-head{padding-top:24px}.inspect .sidebar .demo-badge{display:block}.inspect .photo-gallery{grid-template-columns:1fr 1fr}@media(max-width:1000px){.inspect .scene{grid-template-columns:1fr}.inspect .next-action,.inspect .scene[data-tab=estimate] .next-action{position:static;grid-column:1;grid-row:3;width:100%;max-width:480px}.inspect .crm{min-height:0}.inspect .stage{padding:20px}.inspect .demo-note{flex-wrap:wrap}.inspect .next-action h2{font-size:17px}.inspect .next-action p{font-size:13px}.inspect .next-action button{font-size:14px;height:44px}.inspect .send-state,.inspect .not-sent{font-size:12px}}@media(max-width:600px){.inspect .stage{padding:16px}.inspect .crm{display:block}.inspect .sidebar{width:100%;padding:16px;border-radius:11px 11px 0 0}.inspect .sidebar nav{display:flex;margin:12px 0 0;gap:4px}.inspect .sidebar nav button{flex:1;min-height:44px;font-size:12px}.inspect .wordmark{display:flex;align-items:center;gap:10px}.inspect .sidebar .demo-badge{margin:0}.inspect .workspace-name,.inspect .side-bottom{display:none}.inspect .record-head{padding:20px 16px 0}.inspect h1{font-size:23px}.inspect .title-row{flex-wrap:wrap}.inspect .tabs{margin:15px 16px 0;gap:22px}.inspect .tabs button{font-size:13px;min-height:44px}.inspect .panels,.inspect .scene[data-tab=estimate] .panels{padding:18px 16px}.inspect .info-column{display:block}.inspect .agent-panel{margin-top:20px;padding:16px}.inspect dl>div{font-size:13px}.inspect .agent-panel h2{font-size:16px}.inspect .agent-panel p,.inspect .condition,.inspect .agent-heading{font-size:12px}.inspect .text-action{font-size:13px;min-height:44px}.inspect .photo-source{font-size:10px}.inspect .thumb{width:68px;min-height:44px}.inspect .photo-gallery{grid-template-columns:1fr}.inspect table{font-size:11px;table-layout:fixed}.inspect th,.inspect td{padding:9px 5px;overflow-wrap:anywhere}.inspect .review-footer{align-items:start;flex-direction:column}.inspect .review-footer button{font-size:13px;min-height:44px}.inspect .review-footer span,.inspect .estimate-note{font-size:11px}.inspect fieldset label{min-height:38px;font-size:12px}.inspect .arrival{padding:14px;gap:12px}.inspect .arrival span:not(.arrival-dot){font-size:11px}.inspect .arrival strong{font-size:14px}}
/* Use only the selected concept's photographic room region, never its UI. */
.photo.angle-a{background-image:url('../systems-directions/assets/02.png');background-size:268.54% auto;background-position:26.56% 54.5%;aspect-ratio:572/358}
.scene:not([data-tab=estimate]) .agent-panel{width:215px}.inspect .scene:not([data-tab=estimate]) .agent-panel{width:auto}.inspect .scene,.inspect .crm,.inspect .arrival,.inspect .record{min-width:0}@media(max-width:1000px){.inspect .scene{grid-template-columns:minmax(0,1fr)}.inspect .arrival{width:100%}}
@media(max-width:360px){.inspect .sidebar nav button{min-width:0;padding:0 5px;gap:6px;font-size:11px}.inspect .sidebar nav svg{width:14px;height:14px}.inspect .photo-strip{gap:6px}.inspect .thumb{width:59px}.inspect .photo-source{font-size:9px}.inspect .tabs{gap:15px}}