.showcase-automation{padding:52px 0 66px;background:radial-gradient(ellipse at 95% 90%,#08476b 0,transparent 50%),linear-gradient(110deg,#031927,#05283f 65%,#031927);color:#fff}
.showcase-automation-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:64px;align-items:center}
.showcase-automation h2,.app-showcase h2{font-size:clamp(28px,2.2vw,40px);line-height:1.18;margin:0 0 14px;font-weight:750}
.showcase-automation p{font-size:17px;line-height:1.5;max-width:470px;color:#dbe9f0;margin:0 0 20px}
.showcase-checks{list-style:none;margin:20px 0;padding:0;display:grid;gap:12px}
.showcase-checks li{display:flex;align-items:center;gap:11px;font-size:16px;line-height:1.4}
.showcase-checks svg{width:20px;height:20px;flex:0 0 20px;color:#00bacd}
.showcase-development{color:#a9c4d4;font-size:13px}
.showcase-rules{display:grid;gap:14px}
.showcase-rule{display:grid;grid-template-columns:1fr 24px 1fr;align-items:center}
.showcase-rule-box{display:flex;align-items:center;gap:15px;min-height:82px;padding:14px 18px;background:linear-gradient(110deg,#ffffff0d,#ffffff09);border:1px solid #ffffff06;border-radius:10px}
.showcase-icon{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:9px;background:#f4fdff;color:#08758c;box-shadow:0 3px 9px #00101b33}
.showcase-icon svg{width:29px;height:29px}
.showcase-rule-box p{font-size:16px;margin:0;line-height:1.35;color:#fff}
.showcase-rule-box small{display:block;font-size:13px;color:#b9d2df;margin-bottom:3px}
.showcase-arrow{font-size:25px;color:#b0d9e5;text-align:center}
.app-showcase{background:linear-gradient(110deg,#fff,#f4f9fb);border-top:1px solid #dce9ef}
.app-showcase-grid{display:grid;grid-template-columns:1.12fr .9fr 1fr;gap:18px;align-items:center}
.app-showcase-copy{padding:46px 0}
.app-showcase-copy>p{font-size:17px;line-height:1.5;max-width:430px}
.app-showcase-copy .app-status{font-size:13px;color:#667e8e;max-width:400px}
.app-showcase .button-row{gap:12px;flex-wrap:wrap}
.app-showcase .button{gap:10px;font-size:15px;padding:13px 17px}
.app-showcase .button svg{width:19px;height:19px}
.supplied-phone{position:relative;z-index:2;margin:-50px -40px 10px;text-align:center;align-self:center}
.supplied-phone>img{display:block;width:100%;height:auto;max-height:640px;object-fit:contain;filter:drop-shadow(0 12px 14px #0a30421c)}
.supplied-phone figcaption{font-size:11px;color:#6b8294;margin-top:7px}
.app-qr-wall{align-self:stretch;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:35px 20px;background:linear-gradient(110deg,#637781ca,#203946bb),url('/media/hero-building.png') center/cover;overflow:hidden}
.app-qr-sign{width:240px;max-width:100%;padding:22px 22px 28px;border:1px solid #c6d1d5;border-radius:7px;background:linear-gradient(135deg,#fff,#edf1f3);box-shadow:5px 9px 12px #001c3255;transform:rotate(-5deg);text-align:center;color:#092539}
.sign-logo{display:block;width:155px;height:57px;position:relative;overflow:hidden;margin:0 auto}
.sign-logo img{position:absolute;width:169px;max-width:none;left:-4px;top:-22px}
.real-qr{display:block;width:180px;height:auto;margin:8px auto 12px}
.app-qr-sign strong,.app-qr-sign>span:last-child{display:block;font-size:16px;line-height:1.4}
.app-qr-wall .handwritten{position:static;color:#fff;font-size:23px;align-self:flex-end;line-height:1.35;transform:rotate(-8deg);margin:0 12px}
.app-qr-wall>small{color:#e1eaf0;font-size:11px;text-align:center}
#preview-image[src$="handy-app.png"]{width:auto;max-width:100%;max-height:65vh;margin:0 auto;object-fit:contain}
#preview-image[src$="objexa-qr.png"]{width:260px;max-width:100%;margin:0 auto}
@media(max-width:1100px){.showcase-automation-grid{gap:30px;grid-template-columns:1fr 1.3fr}.showcase-rule-box{padding:12px;gap:9px}.showcase-icon{width:37px;height:37px;flex-basis:37px}.showcase-rule-box p{font-size:14px}.app-showcase-grid{grid-template-columns:1.1fr .9fr}.app-qr-wall{grid-column:1/-1;flex-direction:row;padding:25px;gap:45px}.app-qr-sign{width:210px}.app-qr-wall .handwritten{align-self:center}.supplied-phone{margin:-30px -25px 10px}}
@media(max-width:700px){.showcase-automation{padding:36px 0 55px}.showcase-automation-grid{grid-template-columns:1fr;gap:24px}.showcase-rule-box{min-height:78px;flex-direction:column;align-items:flex-start;padding:12px}.showcase-rule-box p{font-size:14px}.showcase-checks li{font-size:15px}.app-showcase-grid{grid-template-columns:1fr;gap:0}.app-showcase-copy{padding:34px 0 20px}.supplied-phone{margin:0 auto 20px;width:100%;max-width:420px}.supplied-phone>img{max-height:540px}.app-qr-wall{grid-column:auto;flex-wrap:wrap;gap:25px;margin:0 -5.5%;padding:30px 20px}.app-qr-wall>small{flex-basis:100%}.app-qr-wall .handwritten{font-size:20px}}
@media(max-width:700px){.app-qr-wall{margin-left:0;margin-right:0}}

.app-qr-photo{margin:0;align-self:stretch;display:flex;align-items:center;overflow:hidden;background:#edf2f4}
.app-qr-photo img{display:block;width:100%;height:auto}
@media(max-width:1100px){.app-qr-photo{grid-column:1/-1;max-width:760px;justify-self:center}}
@media(max-width:700px){.app-qr-photo{grid-column:auto;margin:10px 0 24px}}
/* Align the photo with both section edges, as in the supplied layout. */
@media(min-width:1101px){
  .app-showcase{overflow-x:clip}
  .app-showcase-grid{container-type:inline-size}
  .app-qr-photo{position:relative;margin-right:calc((100cqw - 100vw)/2);min-width:0;background:transparent}
  .app-qr-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% center}
}
/* Close the hairline seam between the automation strip and the photo. */
.app-showcase{border-top:0}
@media(min-width:1101px){.app-qr-photo{margin-top:0}}
/* Improve readability of the employee app introduction. */
.app-showcase-copy h2{font-size:clamp(34px,2.6vw,44px);font-weight:750;line-height:1.2}
.app-showcase-copy>p{font-size:20px;line-height:1.6;color:#314f64}
.app-showcase-copy .showcase-checks{gap:15px;margin:24px 0}
.app-showcase-copy .showcase-checks li{font-size:19px;line-height:1.5;font-weight:500;gap:12px}
.app-showcase-copy .showcase-checks svg{width:23px;height:23px;flex-basis:23px}
.app-showcase-copy .app-status{font-size:15px;line-height:1.55;color:#506879;margin-bottom:18px}
.app-showcase-copy .button{font-size:17px;min-height:50px;padding:14px 18px}
@media(max-width:700px){.app-showcase-copy h2{font-size:32px}.app-showcase-copy>p{font-size:18px}.app-showcase-copy .showcase-checks li{font-size:17px}.app-showcase-copy .button{font-size:16px}}

/* Give the app introduction a clear visual anchor beside the phone. */
.app-showcase-copy{position:relative;justify-self:end;width:100%;max-width:530px;padding:30px 28px;margin:28px 0;background:linear-gradient(135deg,#ffffff 15%,#edf9fc);border:1px solid #dceef3;border-radius:18px;box-shadow:0 10px 32px #0a49630a}
.app-showcase-copy::before{content:"";display:block;width:48px;height:4px;border-radius:4px;background:linear-gradient(90deg,#007aff,#00bdca);margin-bottom:18px}
.app-showcase-copy h2{font-size:clamp(32px,2.3vw,40px)}
.app-showcase-copy .showcase-checks{gap:12px}
@media(min-width:1101px){.app-showcase-grid{grid-template-columns:1.14fr .88fr 1fr}.app-showcase-copy{margin-right:8px}}
@media(max-width:700px){.app-showcase-copy{padding:24px 20px;margin:26px 0 20px;max-width:none}.app-showcase-copy h2{font-size:30px}}
/* Keep the copy on the shared text axis and use the full left column. */
.app-showcase-copy{justify-self:start;max-width:none;margin-right:0;padding:32px 20px 32px 0;border:0;background:none;box-shadow:none;isolation:isolate}
.app-showcase-copy::after{content:"";position:absolute;inset:0 0 0 -24px;z-index:-1;border:1px solid #dceef3;border-radius:18px;background:linear-gradient(135deg,#fff 15%,#edf9fc);box-shadow:0 10px 32px #0a49630a;pointer-events:none}
.app-showcase-copy h2{font-size:clamp(38px,2.8vw,48px);line-height:1.18;font-weight:750}
.app-showcase-copy>p{font-size:22px;line-height:1.55;max-width:none}
.app-showcase-copy .showcase-checks{gap:16px;margin:26px 0}
.app-showcase-copy .showcase-checks li{font-size:22px;line-height:1.45}
.app-showcase-copy .app-status{font-size:17px;line-height:1.5;max-width:none}
.app-showcase-copy .button{font-size:19px;min-height:54px}
@media(min-width:1101px){.app-showcase-grid{grid-template-columns:1.2fr .82fr 1fr}.supplied-phone{align-self:start}}
@media(max-width:700px){.app-showcase-copy{padding:26px 12px 26px 0}.app-showcase-copy::after{left:-12px}.app-showcase-copy h2{font-size:34px}.app-showcase-copy>p,.app-showcase-copy .showcase-checks li{font-size:19px}.app-showcase-copy .app-status{font-size:16px}.app-showcase-copy .button{font-size:17px}}
@media(min-width:1101px){.supplied-phone{margin-top:-62px}}
/* Present the app copy without a surrounding card. */
.app-showcase-copy::after{content:none}
/* Match the compact three-column proportions of the supplied reference. */
.app-showcase-copy::before{content:none}
@media(min-width:1101px){
 .app-showcase-grid{grid-template-columns:1.08fr .9fr 1fr;gap:20px;align-items:center}
 .app-showcase-copy{padding:26px 18px 26px 0;margin:0;align-self:center}
 .app-showcase-copy h2{font-size:clamp(30px,2.2vw,40px);line-height:1.18;margin-bottom:14px}
 .app-showcase-copy>p{font-size:18px;line-height:1.5}
 .app-showcase-copy .showcase-checks{gap:9px;margin:20px 0}
 .app-showcase-copy .showcase-checks li{font-size:18px;line-height:1.4;gap:10px}
 .app-showcase-copy .showcase-checks svg{width:20px;height:20px;flex-basis:20px}
 .app-showcase-copy .app-status{font-size:13px;line-height:1.4;margin-bottom:14px}
 .app-showcase-copy .button{font-size:16px;min-height:46px;padding:12px 16px}
 .supplied-phone{align-self:start;margin:-36px -28px -12px}
 .supplied-phone>img{width:100%;height:clamp(528px,36vw,628px);max-height:none;object-fit:contain}
 .app-qr-photo img{object-position:40% center}
}
/* Slightly larger, clearer app introduction and actions. */
.app-showcase-copy h2{font-size:clamp(34px,2.5vw,44px);font-weight:800;line-height:1.18}
.app-showcase-copy>p{font-size:20px;line-height:1.5}
.app-showcase-copy .showcase-checks li{font-size:20px;line-height:1.45}
.app-showcase-copy .button{font-size:18px;font-weight:700;min-height:52px;padding:14px 19px}
.app-showcase-copy .button svg{width:21px;height:21px}
.app-showcase-copy .button-row{margin-top:24px}
@media(max-width:700px){.app-showcase-copy h2{font-size:34px}.app-showcase-copy>p,.app-showcase-copy .showcase-checks li{font-size:18px}.app-showcase-copy .button{font-size:17px}}
/* Larger app copy, with the requested explicit line break. */
.app-showcase-copy h2{font-size:clamp(40px,3.1vw,56px);line-height:1.15}
.app-showcase-copy>p{font-size:26px;line-height:1.5}
.app-showcase-copy .showcase-checks li{font-size:24px;line-height:1.45}
.app-showcase-copy .showcase-checks{gap:12px}
.app-showcase-copy .button{font-size:21px;min-height:58px;padding:16px 20px}
@media(max-width:700px){.app-showcase-copy h2{font-size:38px}.app-showcase-copy>p{font-size:23px}.app-showcase-copy .showcase-checks li{font-size:21px}.app-showcase-copy .button{font-size:19px}}
/* Balanced typography between the two previous sizes. */
.app-showcase-copy h2{font-size:clamp(37px,2.8vw,50px)}
.app-showcase-copy>p{font-size:23px}
.app-showcase-copy .showcase-checks li{font-size:22px}
.app-showcase-copy .button{font-size:19px;min-height:54px;padding:14px 19px}
@media(max-width:700px){.app-showcase-copy h2{font-size:36px}.app-showcase-copy>p{font-size:21px}.app-showcase-copy .showcase-checks li{font-size:20px}.app-showcase-copy .button{font-size:18px}}