@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&display=swap');
:root{--ink:#263035;--muted:#56656e;--teal:#347d83;--teal-light:#579fa5;--gutter:clamp(24px,5vw,76px);--space:55px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#121615;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:15px;line-height:1.7}a{color:inherit;text-decoration:none}a:focus-visible,summary:focus-visible{outline:2px solid var(--teal-light);outline-offset:6px}img{display:block;max-width:100%}.wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:var(--gutter)}.dark,.case-hero{color:#eef0eb;background:radial-gradient(ellipse at 80% 24%,#343c3d65,transparent 65%),linear-gradient(120deg,#1a1f1e,#0e1211 80%)}.silver{background:radial-gradient(ellipse at 75% 15%,#edf0f166,transparent 75%),linear-gradient(120deg,#cdd4d8,#dfe4e6 55%,#ccd3d7)}.case-nav{display:flex;align-items:center;justify-content:space-between;height:82px;gap:24px;color:#e9ede7}.case-brand{display:block;width:270px}.case-brand img{width:100%;height:auto}.case-nav nav{display:flex;align-items:center;gap:30px;font-size:10px;text-transform:uppercase;letter-spacing:.14em}.outline-link{border:1px solid #b1bbb070;border-radius:5px;padding:8px 15px}.outline-link:hover{background:#ffffff09}.eyebrow{font-size:11px;font-weight:400;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;margin:0 0 32px;color:var(--teal)}.dark .eyebrow,.case-hero .eyebrow{color:#a9bbb9}h1,h2,h3{font-family:'Manrope',Arial,sans-serif;font-weight:400;letter-spacing:-.055em;line-height:1.15}h1{font-size:clamp(52px,6.5vw,94px);margin:0 0 24px}h1 em,h2 em,.next-title em{font-family:Georgia,serif;font-weight:400;color:var(--teal-light);letter-spacing:-.06em}h2{font-size:clamp(33px,3.5vw,50px);margin:0 0 24px}h3{font-size:23px;line-height:1.3;margin:0 0 15px}p{margin:0 0 20px}.case-hero{padding:35px 0 0;text-align:center}.case-hero .eyebrow{margin-bottom:24px}.hero-intro{max-width:650px;margin:0 auto 32px;font-size:19px;line-height:1.5;color:#bdc8c4}.project-meta{display:grid;grid-template-columns:repeat(3,1fr);max-width:960px;margin:0 auto 30px;padding-top:21px;border-top:1px solid #ffffff25;text-align:left;gap:25px}.project-meta dt{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:#9faeaa;margin-bottom:5px}.project-meta dd{margin:0;font-size:13px;color:#e0e6e1}.hero-visual{height:515px;margin:0;position:relative;overflow:hidden;border-radius:6px 6px 0 0;background:radial-gradient(ellipse at 70% 5%,#a9b4bd,#64737f 60%,#43525d);padding-top:32px}.hero-desktop{display:block;position:relative;width:78%;margin-left:6%;height:100%;overflow:hidden;border-radius:3px;box-shadow:0 24px 55px #18242e60}.hero-desktop img{width:100%;height:auto}.hero-mobile{position:absolute;right:5%;top:110px;width:16%;max-width:180px;height:380px;overflow:hidden;border-radius:4px;box-shadow:0 17px 35px #14202b66}.hero-mobile img{width:100%;height:auto}.hero-visual figcaption{position:absolute;bottom:0;left:0;right:0;background:#17232de8;color:#e1e8eb;font-size:10px;letter-spacing:.025em;padding:10px 18px;text-align:left;display:flex;justify-content:space-between;gap:15px}.hero-visual figcaption span{color:#c2d0d6}.case-section{padding-block:var(--space)}.overview-grid,.validation-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:8%}.lead{font-size:19px;line-height:1.6;color:#394950}.overview-copy{padding-top:4px}.overview-copy>p{color:var(--muted)}.overview-copy h3{font-size:19px;margin-top:26px}.responsibilities{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.responsibilities span{border:1px solid #74818b50;padding:6px 11px;border-radius:4px;color:#4b606a;font-size:10px}.section-intro{max-width:710px;margin-bottom:32px}.section-intro>p:last-child{color:var(--muted);max-width:640px}.research{padding-top:0}.insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.insight-grid article{padding:25px;border:1px solid #76889440;border-radius:5px;background:#f6f8f833}.small-number{display:block;font-size:11px;color:var(--teal);margin-bottom:22px}.insight-grid h3{font-size:20px}.insight-grid p{font-size:13px;color:var(--muted);margin-bottom:0}.customer-quote{margin:25px 0 0;padding:25px 30px;border-radius:5px;background:radial-gradient(ellipse at 72% 8%,#9aa9a066 0%,#778c8240 32%,transparent 78%),linear-gradient(120deg,#344143,#2e3a3c);color:#e2e8e4}.customer-quote p{font:italic 30px/1.3 Georgia,serif;margin:0 0 12px;letter-spacing:-.025em}.customer-quote footer{font-size:10px;color:#b6c5c2}.solution{padding-top:0}.feature-row{display:grid;grid-template-columns:.8fr 1.4fr;gap:7%;align-items:center;margin:0 0 46px}.feature-row:last-child{margin-bottom:0}.feature-copy p{color:var(--muted);font-size:14px}.feature-copy p:last-child{margin-bottom:0}.detail-tag{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--teal);margin-bottom:17px}.feature-copy h3{font-size:clamp(25px,2.2vw,32px)}.detail-visual{margin:0;padding:28px;background:radial-gradient(ellipse at 70% 10%,#a0aeb7,#71818d 60%,#526572);border-radius:5px;overflow:hidden}.detail-visual img{width:100%;box-shadow:0 12px 28px #263b4d35}.billing-visual{padding:35px 25px}.benefit-signals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:20px}.benefit-signals strong{display:block;font:400 33px/1.2 'Manrope',sans-serif;color:var(--teal);letter-spacing:-.06em}.benefit-signals span{display:block;font-size:11px;margin-top:6px;color:#50636d}.caption{font-size:10px;color:#60737c;line-height:1.6;margin:12px 0 0}.role-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:24px 28px 0;border-radius:5px;background:linear-gradient(130deg,#8999a4,#576d7b);overflow:hidden}.role-comparison figure{margin:0;min-width:0}.role-comparison figcaption{font-size:10px;letter-spacing:.08em;color:#eef2f5;margin-bottom:15px}.role-comparison a{display:block;height:350px;overflow:hidden;box-shadow:0 15px 25px #233d4c35}.role-comparison img{width:100%;height:auto;max-width:none}.device-visual{height:335px;padding:0;position:relative}.device-visual a{display:block;position:absolute;inset:0;overflow:hidden}.device-visual img{position:absolute;width:135%;max-width:none;left:-18%;top:0;transform:translateY(-16.4%)}.evolution-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start}.evolution p{color:#b7c4bf}.evolution h2{max-width:540px}.evolution-list{padding:0;list-style:none;margin:0}.evolution-list li{border-top:1px solid #ffffff29;padding:18px 0;display:grid;grid-template-columns:75px 1fr;gap:0 15px}.evolution-list li:first-child{padding-top:0;border-top:0}.evolution-list li>span{grid-row:1/3;color:#78afb2;font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding-top:5px}.evolution-list h3{font-size:19px;margin-bottom:8px}.evolution-list p{font-size:13px;margin:0}.plan-note{font-size:10px;color:#8fa5a0!important;margin-top:22px;margin-bottom:0}.validation-grid>div:last-child>p:not(.lead){color:var(--muted);font-size:14px}.research-context{border-top:1px solid #76899455;margin-top:25px;padding-top:15px}.research-context summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;font-size:11px;letter-spacing:.05em;list-style:none}.research-context summary::-webkit-details-marker{display:none}.research-context p{font-size:11px;color:var(--muted);margin:15px 0 0}.research-context[open] summary span{transform:rotate(45deg)}.case-footer{padding:38px 0 24px}.next-project{display:block}.next-project .eyebrow{display:block;margin-bottom:12px;font-size:10px}.next-title{display:flex;align-items:center;gap:30px;font:400 clamp(32px,4vw,52px)/1.2 'Manrope',sans-serif;letter-spacing:-.05em}.arrow-circle{display:grid;place-items:center;border:1px solid #9aaea477;border-radius:50%;width:43px;height:43px;font:22px Arial;transition:transform .2s}.next-project:hover .arrow-circle{transform:translate(3px,-3px)}.footer-links{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff22;margin-top:32px;padding-top:20px;font-size:10px;color:#b7c6bf}.footer-links a:hover{color:white}.skip-link{position:absolute;top:-100px;left:20px;background:#fff;padding:12px;z-index:20}.skip-link:focus{top:10px}
@media(max-width:1000px){.hero-visual{height:440px}.hero-mobile{height:320px;width:17%;right:4%}.overview-grid,.validation-grid{gap:5%}.feature-row{gap:5%}.insight-grid{gap:14px}.insight-grid article{padding:20px}.role-comparison{gap:17px;padding:20px 20px 0}.role-comparison a{height:300px}.feature-copy h3{font-size:26px}}
@media(max-width:750px){:root{--gutter:24px;--space:44px}.case-nav{height:72px}.case-brand{width:200px}.case-nav nav{gap:16px}.case-nav nav .outline-link{display:none}.case-hero{padding-top:24px}.case-hero .eyebrow{font-size:10px}h1{font-size:clamp(42px,9vw,62px)}.hero-intro{font-size:17px;max-width:500px}.project-meta{gap:14px;margin-bottom:25px}.project-meta dt{font-size:8px}.project-meta dd{font-size:11px}.hero-visual{height:310px;padding-top:22px;margin-inline:-6px}.hero-desktop{width:84%;margin-left:4%}.hero-mobile{top:85px;width:19%;right:3%;height:235px}.hero-visual figcaption{font-size:8px;padding:9px 12px}.hero-visual figcaption span{display:none}.overview-grid,.validation-grid,.evolution-grid{grid-template-columns:1fr;gap:25px}.eyebrow{font-size:10px;margin-bottom:24px}h2{font-size:34px}h3{font-size:21px}.lead{font-size:18px}.overview-copy{padding:0}.overview-copy h3{margin-top:20px}.insight-grid{grid-template-columns:1fr;gap:13px}.insight-grid article{display:grid;grid-template-columns:25px 1fr;gap:0 14px;padding:20px}.small-number{grid-row:1/3;margin:3px 0}.insight-grid h3{font-size:18px;margin-bottom:10px}.insight-grid p{font-size:13px}.customer-quote{padding:23px}.customer-quote p{font-size:26px}.customer-quote footer{font-size:9px}.feature-row{grid-template-columns:1fr;gap:22px;margin-bottom:38px}.feature-copy h3{font-size:28px}.billing-visual{padding:24px 16px}.benefit-signals{gap:12px}.benefit-signals strong{font-size:30px}.benefit-signals span{font-size:10px}.caption{font-size:10px}.role-comparison{padding:18px 18px 0;gap:18px}.role-comparison a{height:290px}.device-visual{height:310px}.evolution-list{margin-top:0}.evolution-list li{grid-template-columns:68px 1fr;gap:0 12px}.evolution-list li:first-child{padding-top:18px;border-top:1px solid #ffffff29}.evolution-list h3{font-size:19px}.plan-note{margin-top:20px}.footer-links{flex-wrap:wrap;font-size:9px}.footer-links>span{display:none}.arrow-circle{width:37px;height:37px;flex-shrink:0}}
@media(max-width:650px){.case-brand{width:34px}.case-brand img{height:29px;width:34px}.case-nav nav{font-size:9px}.project-meta{grid-template-columns:1fr 1fr}.project-meta>div:last-child{grid-column:1/-1}.project-meta>div:last-child dt{display:inline-block;margin-right:10px}.project-meta>div:last-child dd{display:inline}.hero-visual{height:280px}.hero-mobile{height:215px}.role-comparison a{height:240px}.role-comparison figcaption{font-size:9px}.device-visual{height:270px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.arrow-circle{transition:none}}
/* Focused original destination-page crops, rather than a full-length page. */
.device-destination{margin:0;padding:22px;background:linear-gradient(130deg,#8999a4,#576d7b);border-radius:5px}
.device-destination a{display:block;overflow:hidden;border-radius:3px;box-shadow:0 12px 24px #233b4d35}
.device-destination img{display:block;width:100%;height:auto}
.device-destination .device-actions{width:75%;margin:18px 0 0 auto}
.next-title>span:first-child{min-width:0}
.next-title .arrow-circle{flex-shrink:0}
@media(max-width:750px){.device-destination{padding:16px}.device-destination .device-actions{width:88%;margin-top:14px}.next-title{gap:18px;font-size:30px}}

/* Device selector and usage, composed from original source pixels. */
.device-usage-composition{margin:0;padding:26px;background:linear-gradient(130deg,#8999a4,#576d7b);border-radius:5px}
.device-usage-stage{position:relative;width:100%;aspect-ratio:1.12}
.device-usage-stage a{display:block;position:absolute;overflow:hidden;border-radius:5px;box-shadow:0 15px 28px #233b4d35}
.device-usage-stage img{display:block;width:100%;height:auto}
.device-usage-stage .selector-screen{width:66%;left:0;top:0}
.device-usage-stage .usage-screen{width:38%;right:0;bottom:0;z-index:1}
@media(max-width:750px){.device-usage-composition{padding:18px}.device-usage-stage{aspect-ratio:1.08}}

/* Equal-scale, separately labeled dashboard details. */
.device-usage-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:24px;background:linear-gradient(130deg,#8999a4,#576d7b);border-radius:6px}
.device-usage-pair figure{margin:0;min-width:0}
.device-usage-pair figcaption{font-size:10px;letter-spacing:.08em;color:#eef2f5;margin-bottom:15px}
.device-usage-pair .detail-screen{display:block;aspect-ratio:.49;background:#f8f7f5;border-radius:9px;overflow:hidden;box-shadow:0 12px 24px #233b4d35}
.device-usage-pair img{width:100%;height:100%;object-fit:contain;object-position:top}
@media(max-width:750px){.device-usage-pair{padding:16px;gap:14px}.device-usage-pair figcaption{font-size:9px;letter-spacing:.04em;margin-bottom:11px}.device-usage-pair .detail-screen{border-radius:6px}}

.shortcuts-visual{padding:32px 22px}.shortcuts-visual a{display:block;border-radius:7px;overflow:hidden}.shortcuts-visual img{box-shadow:none}.shortcut-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:22px}.shortcut-metrics strong{display:block;font:400 33px/1.2 'Manrope',sans-serif;letter-spacing:-.06em;color:var(--teal)}.shortcut-metrics span{display:block;font-size:11px;color:#50636d;margin-top:7px}@media(max-width:750px){.shortcuts-visual{padding:24px 14px}.shortcut-metrics{gap:16px}.shortcut-metrics strong{font-size:30px}}

/* More comfortable billing/savings framing, matching the rounded detail cards. */
.billing-visual{padding:35px 25px}
.billing-visual a{display:block;border-radius:9px;overflow:hidden}
.billing-visual img{border-radius:9px}
@media(max-width:750px){.billing-visual{padding:24px 16px}.billing-visual a,.billing-visual img{border-radius:6px}}

.overview-copy>h3:first-child{margin-top:0}

/* Desktop: feature eyebrows align with the top of each gray image panel. */
@media(min-width:751px){.solution .feature-row{align-items:start}.solution .feature-copy{padding-top:0}.solution .feature-copy .detail-tag{margin-top:0}}

/* Equal visible top and bottom insets in the evolution module. */
.evolution-list li:last-child{padding-bottom:0}
.evolution-grid>div>p:last-child{margin-bottom:0}

/* Reveal original screens in place, excluding footer/navigation content. */
.hero-visual{height:auto;padding-top:0}
.hero-reveal{position:relative;height:471px;overflow:hidden;transition:height .65s cubic-bezier(.22,.61,.36,1)}
.hero-desktop{position:absolute;left:6%;top:32px;margin:0;height:auto;aspect-ratio:1680/4000}
.hero-mobile{height:auto;aspect-ratio:195/2265}
.hero-visual figcaption{position:relative;inset:auto;display:flex;justify-content:center;align-items:center;padding:0;min-height:44px;background:#17232de8}
.design-toggle{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;min-height:44px;border:0;background:transparent;color:#d9e4e8;font:inherit;font-size:11px;letter-spacing:.025em;cursor:pointer;padding:8px 18px}
.design-toggle:hover{color:white;background:#ffffff06}
.design-toggle:focus-visible{outline:2px solid var(--teal-light);outline-offset:-4px}
.hero-visual figcaption .design-toggle-icon{display:grid;place-items:center;width:27px;height:27px;border:1px solid #a9bec077;border-radius:50%;color:inherit;transition:transform .35s;flex-shrink:0}
.design-toggle[aria-expanded="true"] .design-toggle-icon{transform:rotate(180deg)}
@media(max-width:1000px){.hero-reveal{height:396px}}
@media(max-width:750px){.hero-reveal{height:266px}.hero-desktop{left:4%;top:22px}.design-toggle{font-size:10px}}
@media(max-width:650px){.hero-reveal{height:236px}}
@media(prefers-reduced-motion:reduce){.hero-reveal,.design-toggle-icon{transition:none}}
.hero-visual figcaption .design-toggle>span:first-child{display:block;color:inherit}

/* Individual payment-state crops, not the source overview sheet. */
.device-state-board{padding:24px;background:linear-gradient(130deg,#8999a4,#576d7b);border-radius:6px}
.device-state-board figure{margin:0;min-width:0}
.device-state-board figcaption{font-size:10px;letter-spacing:.04em;color:#eef2f5;margin-bottom:12px}
.device-state-board img{display:block;width:100%;height:auto;border-radius:8px}
.device-state-alternates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:23px}
@media(max-width:750px){.device-state-board{padding:16px}.device-state-alternates{grid-template-columns:1fr;gap:19px;margin-top:20px}.device-state-board figcaption{font-size:9px}.device-state-board img{border-radius:6px}}

/* Keep the project title on one line across screen sizes. */
.case-hero h1{white-space:nowrap;font-size:clamp(30px,6.05vw,86px)}
@media(max-width:750px){.case-hero h1{font-size:clamp(22px,6.65vw,49px)}}
/* A quieter full-design control, retaining its comfortable click area. */
.design-toggle{font-size:10px;gap:10px}
.hero-visual figcaption .design-toggle-icon{width:23px;height:23px}
.design-toggle-icon svg{width:15px;height:15px}
@media(max-width:750px){.design-toggle{font-size:9px;gap:9px}.hero-visual figcaption .design-toggle-icon{width:22px;height:22px}.design-toggle-icon svg{width:14px;height:14px}}
/* Restore original full-design label size; retain the smaller arrow. */
.design-toggle{font-size:11px}
@media(max-width:750px){.design-toggle{font-size:10px}}

/* Softer quote callouts: quiet silver-green surface, restrained type, subtle edge. */
.uad-case .customer-quote{padding:24px 28px;border:1px solid #8da2a32e;border-left:2px solid #8da5a3;border-radius:5px;background:linear-gradient(120deg,#b8c3c8,#a5b4bc);color:#30494e;box-shadow:none}
.uad-case .customer-quote p{font:italic 25px/1.4 Georgia,serif;letter-spacing:-.02em;margin:0 0 12px}
.uad-case .customer-quote footer{color:#3f555c;font-size:10px}
.uad-case .customer-quote-compact{margin:25px 0 0;padding:20px 22px}
.uad-case .customer-quote-compact p{font-size:20px;line-height:1.5;margin:0;letter-spacing:-.015em}
@media(max-width:750px){.uad-case .customer-quote{padding:21px 22px}.uad-case .customer-quote p{font-size:23px}.uad-case .customer-quote-compact{padding:18px 20px}.uad-case .customer-quote-compact p{font-size:19px}}

.uad-case .customer-quote-compact footer{margin-top:12px}

/* Compact, quieter callouts and framed account previews. */
.uad-case .customer-quote{padding:16px 22px;margin-top:24px;background:linear-gradient(120deg,#bac5ca,#aebcc3)}
.uad-case .customer-quote p{font:italic 19px/1.5 Georgia,serif;margin:0 0 6px;letter-spacing:-.01em}
.uad-case .customer-quote footer{font-size:9px;margin:0}
.uad-case .customer-quote-wide{grid-column:1/-1;margin-top:0}
.uad-case .device-usage-pair .device-phone{width:100%}
.uad-case .device-usage-pair .device-phone-screen img{height:auto;width:100%;object-fit:initial;max-width:100%}
.uad-case .device-usage-pair .static-device{overflow:hidden;background:#f8f7f5}
.uad-case .device-usage-pair .static-device img{height:100%;object-fit:contain}
@media(max-width:750px){.uad-case .customer-quote{padding:15px 18px}.uad-case .customer-quote p{font-size:18px}}

/* Account-role overlays scale to the browser width; their cropped artwork scrolls vertically. */

.role-comparison .member-role-static{height:350px;overflow:hidden;box-shadow:0 15px 25px #233d4c35}
@media(max-width:1000px){.role-comparison .member-role-static{height:300px}}
@media(max-width:750px){.role-comparison .member-role-static{height:290px}}
@media(max-width:420px){.role-comparison .member-role-static{height:240px}}

/* Match static and expandable role images without reserving a hidden expand control. */
.uad-case .role-comparison{--role-screen-height:350px;padding-bottom:24px;align-items:start}
.uad-case .role-comparison figure{display:grid;grid-template-rows:26px var(--role-screen-height);row-gap:15px}
.uad-case .role-comparison figcaption{display:flex;align-items:center;height:26px;margin:0}
.uad-case .role-comparison .preview-image-button,.uad-case .role-comparison .member-role-static{height:var(--role-screen-height);overflow:hidden;border-radius:7px}
@media(max-width:1000px){.uad-case .role-comparison{--role-screen-height:300px;padding-bottom:20px}}
@media(max-width:750px){.uad-case .role-comparison{--role-screen-height:290px;padding-bottom:18px}.uad-case .role-comparison figure{grid-template-rows:22px var(--role-screen-height);row-gap:12px}.uad-case .role-comparison figcaption{height:22px}}
@media(max-width:420px){.uad-case .role-comparison{--role-screen-height:240px}}