*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#333;font-family:CaseStudy,Arial,sans-serif;font-size:18px;line-height:1.4}a{color:inherit}img{display:block;max-width:100%}h1,h2,h3,p,figure,dl,dd{margin:0}h2{font-family:HeroNavigation,Arial,sans-serif;font-size:28px;line-height:1.2;letter-spacing:-.56px;font-weight:600;color:#111}h3{font-size:18px;line-height:1.4;font-weight:600}p+p{margin-top:20px}.wrap{width:min(1200px,calc(100% - 80px));margin:auto}.skip-link{position:absolute;top:-100px}.skip-link:focus{top:10px;background:white;padding:10px;z-index:10}.hero{display:grid;grid-template-columns:1fr 1.07fr;gap:48px;padding-top:96px;align-items:start}.project-category{font-family:HeroNavigation,Arial,sans-serif;font-size:18px;text-transform:uppercase;letter-spacing:.36px;color:#000;margin-bottom:8px}h1{font-family:Archivo,Arial,sans-serif;font-size:clamp(36px,3.4vw,60px);line-height:1.2;color:#000;letter-spacing:-1px;font-weight:700}.product-link{display:inline-block;margin-top:20px;font-size:14px;color:#540acb;text-underline-offset:3px}.project-facts{margin-top:36px;display:grid;gap:20px}.project-facts dt{font:800 14px/1.2 HeroNavigation,Arial,sans-serif;color:#999;margin-bottom:8px}.project-facts dd{font-size:18px;color:#000}.project-facts dd span{color:#ccc}.design-slot{position:relative;aspect-ratio:var(--w)/var(--h);overflow:hidden;border-radius:8px;width:100%;align-self:start}.design-slot img{position:absolute;max-width:none}.hero-screen{margin-top:44px;border-radius:13px}.wrap>section:not(.hero){margin-top:116px}.section-label{font:400 18px/28px HeroNavigation,Arial,sans-serif;color:#999;margin-bottom:8px}.section-heading{margin-bottom:28px}.lead{font-size:22px;font-weight:300;line-height:1.4}.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:72px}.benefits{display:grid;gap:24px;margin-top:28px}.benefits dt,.accent-label{font-size:16px;font-weight:500;color:#840acb}.benefits dd{font-size:18px;font-weight:300;margin-top:4px}.note{font-size:14px;color:#999;margin-top:20px}.phone-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:12px}.mobile-screen{border:4px solid #000;border-radius:28px}.experience-grid{display:grid;grid-template-columns:.75fr 1fr;gap:60px;margin-top:36px;max-width:960px}.accent-label{margin-bottom:12px}.fragmented{display:flex;gap:12px;align-items:center;font-size:16px;color:#666;font-weight:700}.experience-arrow{width:23px;flex-shrink:0}.experience-arrow img{max-width:none}.second-line{margin-top:16px}.to-be{padding:24px;border:1px solid #dcdcdc;border-radius:8px}.to-be p{font-size:18px;font-weight:500}.rate-cards{display:grid;grid-template-columns:1fr 1fr;margin-top:20px;gap:0}.rate-cards .design-slot{border-radius:0}.needs-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:60px;margin-top:44px}.step-label{font-size:14px;line-height:1.2;letter-spacing:.56px;color:#840acb;margin-bottom:10px}.needs-grid h3{font-size:22px;font-weight:400;line-height:1.2;margin-bottom:16px}.needs-grid article{display:flex;flex-direction:column;align-items:start}.needs-grid article>p:not(.step-label){font-size:18px;font-weight:300;flex:1}.question-pill{display:inline-block;border-radius:30px;background:#181616;color:#fff;font-size:18px;font-weight:600;padding:10px 20px;margin-top:28px}.process-row{display:grid;grid-template-columns:.9fr 1.3fr;gap:60px;margin-top:64px}.process-row h3,.connect h3{margin-bottom:12px}.process-row p:not(.step-label),.connect>p:not(.step-label){font-size:16px;font-weight:300;line-height:1.4}.define .design-slot{max-width:443px;margin-left:60px}.scope-note{margin-top:34px}.settings-images{display:grid;grid-template-columns:272fr 284fr 258fr;gap:12px}.control{grid-template-columns:.7fr 1.4fr;margin-top:60px}.connect{margin-top:80px}.connect>p:not(.step-label){max-width:820px}.connection-images{display:grid;grid-template-columns:629fr 602fr;gap:22px;margin:32px 16px 0}.outcome-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;margin-top:48px}.outcome-grid h3{margin-bottom:20px}.outcome-grid h3 span{font-weight:300}.target-images{display:grid;grid-template-columns:291fr 351fr;gap:10px}.notification-images{display:grid;grid-template-columns:217fr 357fr;gap:15px}.reflections{padding-bottom:48px}.reflections>p{font-size:18px;font-weight:300;max-width:1100px}.project-nav{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:48px 80px;margin:40px 0 80px}.project-nav a{text-decoration:none;display:grid;gap:8px}.project-nav a:first-child{color:#999}.project-nav a:last-child{text-align:right}.project-nav strong{font-size:18px}.project-nav span{font-size:16px}.site-footer{margin-top:0}
@media(max-width:1023px){.hero{gap:28px;grid-template-columns:1fr 1fr}.two-col{gap:36px}.needs-grid{gap:28px}.experience-grid{gap:24px}.process-row{gap:32px;grid-template-columns:1fr 1fr}.define .design-slot{margin-left:0}.control{grid-template-columns:1fr}.settings-images{max-width:850px}.outcome-grid{gap:32px}.fragmented{flex-wrap:wrap}.desktop-break{display:none}}
@media(max-width:760px){body{font-size:16px}.wrap{width:calc(100% - 40px)}.hero{grid-template-columns:1fr;padding-top:60px;gap:32px}h1{font-size:38px}.hero-screen{margin-top:0}.project-category{font-size:14px}.project-facts dd{font-size:16px}.wrap>section:not(.hero){margin-top:72px}.two-col,.experience-grid,.needs-grid,.process-row,.outcome-grid{grid-template-columns:1fr;gap:32px}h2{font-size:25px}.section-label{font-size:16px}.lead{font-size:19px}.phone-pair{max-width:500px}.needs-grid{gap:40px}.question-pill{margin-top:20px}.connection-images{grid-template-columns:1fr;margin-inline:0}.settings-images{grid-template-columns:1fr 1fr}.settings-images .design-slot:last-child{max-width:260px}.connect{margin-top:56px}.target-images,.notification-images{gap:12px}.outcome-grid{gap:48px}.reflections>p{font-size:16px}.project-nav{padding:32px 0;margin-bottom:48px;gap:24px}.project-nav span{font-size:14px}.hero .project-facts{margin-top:28px}}
@media(min-width:761px){.outcome-grid h3{min-height:50px}}
/* Match the desktop hero line breaks in the supplied reference. */
@media(min-width:1280px){
 .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.07fr);gap:48px}
 .hero h1{font-size:clamp(40px,3.4vw,60px);white-space:nowrap}
 .hero .project-facts dd{font-size:16px;line-height:1.5}
 .hero .project-facts>div:first-child dd,.hero .project-facts>div:nth-child(3) dd{white-space:nowrap}
}
@media(max-width:760px){.hero-reference-break{display:none}}
.hero-screen:has(video){aspect-ratio:auto}
.hero-screen video{display:block;width:100%;height:auto;max-width:100%}
/* Give the dashboard and supporting mockups more space. */
@media(min-width:1024px){
 .hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);column-gap:48px}
 .hero-screen{margin-right:-60px;width:calc(100% + 60px)}
 .two-col.impact{grid-template-columns:1.1fr 1.2fr;gap:48px}
 .phone-pair{gap:24px}
 .process-row.define{grid-template-columns:.85fr 1.4fr;gap:48px}
 .define .design-slot{max-width:550px;margin-left:24px}
 .process-row.control{grid-template-columns:.6fr 1.5fr;gap:40px}
 .connection-images{margin-inline:0;column-gap:24px}
 .outcome-grid{gap:40px}
}
@media(min-width:761px) and (max-width:1279px){.hero-screen{margin-right:0;width:100%}}
/* Crop the video's outer gray padding to the black dashboard frame. */
.hero-screen:has(video){position:relative;aspect-ratio:3584/2048;overflow:hidden;border-radius:8px}
.hero-screen video{position:absolute;left:-3.57143%;top:-2.73438%;width:107.14286%;height:105.46875%;max-width:none;object-fit:fill}
/* Slightly reduce the hero title to leave more space beside the mockup. */
@media(min-width:1280px){.hero h1{font-size:clamp(38px,3.05vw,54px)}}
@media(min-width:761px) and (max-width:1279px){.hero h1{font-size:40px}}
/* Reduce the impact overview's mobile mockups without changing their ratios. */
.impact .phone-pair{width:77.44%;justify-self:center}