/* Composition matched to the approved 1586 x 992 hero concept. */
@media(min-width:901px){
.header{position:absolute;top:0;left:0;right:0;height:80px;padding:0 4.3%;background:transparent;backdrop-filter:none}.header .brand{font-size:24px}.header nav{font-size:14px;gap:35px}.header .button{font-size:13px;padding:11px 26px}
.hero{height:55.5vw;min-height:610px;max-height:1080px;max-width:none;padding:0;overflow:hidden}.hero-architecture{top:0;left:0;width:100%;height:auto;object-fit:contain;object-position:center top;inset:0 auto auto 0;animation:none;mask-image:none}.hero-copy{position:relative;width:40%;padding:12.5vw 0 0 3.8%;margin:0;max-width:none;animation:none}.hero-copy:before{display:none}.hero .eyebrow{font-size:clamp(8px,.76vw,12px);letter-spacing:2.7px;font-weight:500;margin-bottom:1.7vw;white-space:nowrap}.hero .eyebrow .signal{width:8px;height:8px}.hero h1{font-size:8.1vw;line-height:.97;font-weight:750;letter-spacing:-.07em;margin:0 0 1.9vw}.hero-description{font-size:clamp(15px,1.38vw,24px);line-height:1.42;font-weight:400;letter-spacing:-.35px;width:89%;max-width:none;margin:0 0 2.7vw;color:#3f435b}.hero-actions{gap:2vw;flex-wrap:nowrap}.hero .button{font-size:clamp(11px,.95vw,16px);padding:1.25vw 1.9vw;border-radius:11px;gap:2.1vw;white-space:nowrap}.hero .text-link{font-size:clamp(11px,1.02vw,17px);font-weight:650;gap:14px;white-space:nowrap}.hero-caption{display:none}
.product-stage{position:absolute;left:auto;right:2.6%;top:21.4vw;width:50%;padding:0;margin:0;min-height:0;display:block;animation:none}.desktop-app{width:80%;aspect-ratio:1.42;container-type:inline-size;min-width:0;max-width:none;height:auto;position:relative;display:flex;flex-direction:column;border:7px solid #202b41;border-radius:17px;transform:none;box-shadow:0 16px 24px #1a2a4c40;background:#f6f8ff;overflow:hidden}.app-bar{height:10%;flex-shrink:0;padding:1.8cqw 2.7cqw;gap:1.6cqw;background:#f4f7ff;line-height:1;font-size:2.2cqw;border-color:#e0e7f6}.app-bar .app-logo{font-size:3.4cqw;height:4cqw;width:4cqw;letter-spacing:-.8cqw;flex-shrink:0}.app-bar .sample{font-size:1.1cqw;padding:.6cqw;letter-spacing:0}.app-bar .avatar{width:3.5cqw;height:3.5cqw;font-size:1.4cqw}.app-body{flex:1;min-height:0;height:90%;grid-template-columns:21% minmax(0,1fr);display:grid}.app-sidebar{display:block;padding:3.5cqw 1.7cqw;background:#f3f6ff}.workspace{font-size:1.2cqw;line-height:1.5;margin-bottom:3.2cqw}.sidebar-link{font-size:1.5cqw;gap:1cqw;padding:1.5cqw .8cqw;margin-bottom:.8cqw;white-space:normal}.sidebar-link svg{width:2.3cqw;height:2.3cqw}.sidebar-link b{font-size:1.1cqw}.sidebar-bottom{font-size:1cqw;left:1.7cqw;bottom:2cqw}.app-content{padding:3.5cqw 3.5cqw 1.7cqw;min-height:0;overflow:hidden}.breadcrumbs{font-size:1.25cqw;line-height:1.2;letter-spacing:.08cqw}.breadcrumbs span{padding:0 1cqw}.app-heading{display:flex;align-items:center;gap:1.2cqw;margin:2.4cqw 0 3cqw}.app-heading h2{font-size:3.35cqw;line-height:1.2;letter-spacing:-.13cqw;margin:0;font-weight:700}.badge{font-size:1.35cqw;padding:.9cqw 1.1cqw;white-space:nowrap;border-radius:20px}.app-subtitle{display:none}.record-summary{display:flex;align-items:start;justify-content:space-between;gap:2cqw;border:0;padding:2.5cqw 2.7cqw 1.7cqw;margin:0;background:#fff;border-radius:6px 6px 0 0;border:1px solid #e2e8f6;border-bottom:0}.record-summary strong{font-size:2.9cqw;line-height:1.2;letter-spacing:-.1cqw;font-weight:700;display:block}.record-summary>div>span{display:block;font-size:1.6cqw;letter-spacing:0;margin:1cqw 0 0;color:#7383ad}.record-summary>div:last-child strong{font-size:3.5cqw}.activity-header,.app-foot{display:none}.activities{padding:.5cqw 2.7cqw 2.1cqw;background:#fff;border:1px solid #e2e8f6;border-top:0;border-radius:0 0 6px 6px}.activity{padding:1.7cqw 0;gap:1.8cqw;border-top:1px solid #edf0f8;min-height:10.3cqw;opacity:.35;align-items:center}.activity.active{opacity:1}.activity:nth-child(4){display:none}.activity-icon{position:relative;width:8cqw;height:8cqw;border-radius:5px;background-image:url('assets/architecture-hero.webp');background-size:270%;background-position:75% 30%;border:0;flex-shrink:0}.activity:nth-child(2) .activity-icon{background-position:70% 60%}.activity:nth-child(3) .activity-icon{background-position:90% 45%}.activity-icon:after{content:'✓';position:absolute;left:-1.5cqw;top:1cqw;display:grid;place-items:center;width:2.8cqw;height:2.8cqw;background:var(--blue);color:white;border-radius:50%;font-size:1.7cqw;border:2px solid white}.activity-icon svg{display:none}.activity strong{font-size:1.9cqw;line-height:1.3;font-weight:650}.activity small{font-size:1.45cqw;line-height:1.45;margin-top:.7cqw;max-width:26cqw;color:#7889b1}.activity-tick{font-size:1.5cqw;color:#6d82b1}
.hero-phone{position:absolute;right:0;left:auto;top:6.8vw;bottom:auto;width:26%;aspect-ratio:.51;container-type:inline-size;display:flex;flex-direction:column;padding:6% 5% 10%;border:5px solid #202b41;border-radius:25px;background:#fff;transform:none;box-shadow:4px 14px 22px #182e5145}.hero-phone-top{font-size:4cqw;padding-bottom:10cqw;flex-shrink:0}.hero-phone-brand{gap:3cqw;line-height:1}.hero-phone-brand b{display:none}.hero-phone-brand strong{font-size:8cqw;letter-spacing:-.4cqw;font-weight:700}.hero-phone-kicker{font-size:4cqw;letter-spacing:.5cqw;margin:9cqw 0 4cqw;color:#8491b2}.hero-phone h3{font-size:10cqw;letter-spacing:-.5cqw;margin:0 0 4cqw;line-height:1.1;font-weight:700}.hero-phone h3 span{font-size:7cqw;color:#8a9bc4}.hero-phone-job{padding:0;gap:0;border:0;display:block}.hero-phone-job>span,.hero-phone-job strong{display:none}.hero-phone-job small{font-size:4.4cqw;color:#8491b2;line-height:1.4;display:block}.hero-phone ul{font-size:5cqw;line-height:1.4;gap:7cqw;margin:12cqw 0 8cqw;list-style:none}.hero-phone li{position:relative;padding-left:16cqw;min-height:12cqw;display:flex;align-items:center;font-weight:550}.hero-phone li:before{position:absolute;left:0;top:1cqw;width:11cqw;height:11cqw;border-radius:50%;font-size:6cqw;background:var(--blue);color:white;margin:0}.hero-phone-state{margin-top:auto;font-size:5cqw;padding:7cqw 2cqw;line-height:1.25;border-radius:5px;flex-shrink:0}.hero-phone-sample{font-size:2.8cqw;letter-spacing:0;margin-top:5cqw;line-height:1.2}.hero-phone-home{width:35%;height:3px;bottom:6px;left:32.5%}.stage-controls{left:8px;right:27%;bottom:-34px;font-size:7px;gap:9px}.stage-controls button{width:20px;height:20px;background:#ffffff80}.scene-progress{max-width:100px}
.workflow{max-width:none;margin:0 3.8%;padding:12px 0 0;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid #e7ebf5}.workflow button{display:grid;grid-template-columns:25px 1fr;gap:5px 14px;padding:17px 20px 20px;font-size:14px;background:none;border-bottom-color:transparent;text-align:left}.workflow button:first-child{padding-left:0}.workflow button>span{font-size:12px;grid-column:1;grid-row:1;color:var(--blue)}.workflow button>strong{font-size:14px;font-weight:650;grid-column:2;grid-row:1;line-height:1.3}.workflow button>small{display:block;font-size:11px;line-height:1.5;font-weight:400;color:#68718b;grid-column:2;grid-row:2}.workflow button.active{background:none;border-bottom-color:var(--blue)}.workflow button+button:before{top:20%;height:47%;background:#b3bbcc}.workflow-explanation{max-width:none;margin:0 3.8%;padding-top:30px}
}
@media(min-width:901px){.hero-phone{padding:11px 12px 24px}}
@media(min-width:1800px){.hero-copy{padding-top:225px}.hero{height:1030px}.hero h1{font-size:150px}.hero-description{font-size:25px;max-width:510px}.product-stage{top:395px}}
@media(min-width:901px) and (max-width:1150px){.header{height:72px}.header .brand{font-size:21px}.header nav{font-size:11px;gap:22px}.header .button{font-size:11px;padding:10px 18px}.hero{height:58vw;min-height:0}.hero-copy{padding-top:14vw}.hero .eyebrow{font-size:8px;letter-spacing:1.8px}.hero h1{font-size:8.1vw}.hero-description{font-size:1.4vw;width:91%;margin-bottom:2.7vw}.hero-actions{gap:15px}.hero .button{font-size:11px;padding:15px 18px;gap:15px}.hero .text-link{font-size:11px;gap:10px}.product-stage{top:24vw}.desktop-app{border-width:6px;border-radius:14px}.hero-phone{border-width:4px;border-radius:21px}.workflow button{padding:16px 12px;gap:5px 9px;grid-template-columns:20px 1fr}.workflow button>strong{font-size:12px}.workflow button>small{font-size:9px}}
@media(max-width:900px){.workflow button{display:grid;grid-template-columns:20px 1fr;gap:6px 8px}.workflow button>strong{font-size:12px;grid-column:2;grid-row:1}.workflow button>span{grid-column:1;grid-row:1}.workflow button>small{font-size:10px;line-height:1.5;font-weight:400;color:#68718b;grid-column:2}.hero-phone h3 span{font-size:.65em;color:#8a9bc4}.hero-phone h3{margin-bottom:14px}.hero-phone-job>span{display:none}.hero-phone-job{border-top:0;padding-top:0}.hero-phone-kicker{margin-top:18px}.hero-phone ul{margin-top:24px}.hero-phone-brand strong{font-size:14px}.hero-phone-brand b{display:none}.hero-phone-job strong{font-size:11px}.hero-phone-job small{font-size:9px}.record-summary>div>span{margin:5px 0 0}.record-summary>div>strong{font-size:16px}.app-heading h2{font-size:19px}.activity:nth-child(4){display:none}.desktop-app .app-subtitle{display:none}}
@media(max-width:540px){.hero-phone-brand strong{font-size:17px}.hero-phone h3{font-size:32px}.hero-phone-job strong{font-size:12px}.hero-phone-job small{font-size:10px}.workflow button>strong{font-size:12px}.workflow button>small{font-size:9px}.workflow button{padding:17px 8px;gap:5px 8px}.hero-phone h3 span{font-size:20px}}
@media(min-width:901px){.hero-description{width:92%;max-width:440px}.desktop-app{transform:perspective(1400px) rotateY(5deg) rotateZ(-1.3deg);transform-origin:50% 65%}.hero-phone{transform:perspective(1000px) rotateY(-7deg) rotateZ(-3deg);transform-origin:50% 70%}.hero-phone li{flex-wrap:wrap;gap:1cqw;align-content:center;min-height:17cqw}.hero-phone li:after{content:'Checked on site';display:block;flex-basis:100%;font-size:4cqw;color:#8a98b8;font-weight:400}.hero-phone ul{gap:5cqw;margin-top:10cqw}.hero-phone li:before{top:4cqw}}
@media(max-width:900px){.product-stage .desktop-app{transform:perspective(1200px) rotateY(4deg) rotateZ(-1deg)}.hero-phone{transform:perspective(1000px) rotateY(-5deg) rotateZ(-3deg)}}
