.app-promo-section {margin-top:40px;}

.app-promo-hero {position:relative; display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(310px, .9fr); gap:34px; align-items:center; overflow:hidden; min-height:430px; padding:30px; border:1px solid #e5e5e5; border-radius:4px;}
.app-promo-hero:after {content:""; position:absolute; inset:0; opacity:.45; background-image:linear-gradient(135deg, rgba(0, 0, 0, .07) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .07) 50%, rgba(0, 0, 0, .07) 75%, transparent 75%, transparent); background-size:8px 8px; pointer-events:none; mask-image:linear-gradient(90deg, transparent 0%, #000 58%);}
.app-promo-hero-content, .app-promo-hero-media {position:relative; z-index:1;}

.app-promo-title {margin:0 0 18px; font-size:52px; line-height:1.03; font-weight:700; text-transform:uppercase;}

.app-promo-lead {max-width:620px; margin:0 0 28px; color:#555; font-size:20px; line-height:1.42; font-weight:300;}

.app-promo-actions {display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;}

.app-promo-meta {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; max-width:560px; margin:0; padding:0; list-style:none;}
.app-promo-meta li {padding:14px; border:1px solid #e5e5e5; border-radius:4px; background:#fff;}
.app-promo-meta b {display:block; margin-bottom:5px; text-transform:uppercase;}
.app-promo-meta span {color:#666; font-size:13px; line-height:1.35;}

.app-promo-hero-phone-img {display:block; width:min(320px, 100%); height:auto; margin:0 auto; filter:drop-shadow(0 22px 38px rgba(0, 0, 0, .22));}

.app-promo-shot-fallback {display:flex; flex-direction:column; justify-content:space-between; min-height:610px; padding:20px 16px 14px; color:#fff;}

.app-promo-head {margin-bottom:30px; text-align:center;}
.app-promo-head h2 {margin:0 0 8px; font-size:35px; line-height:1.2; font-weight:700; text-transform:uppercase;}
.app-promo-head p {margin:0 auto; color:#666; font-size:16px; line-height:1.5;}

.app-promo-screens {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px;}

.app-promo-screen-card,
.app-promo-feature,
.app-promo-info,
.app-promo-download,
.app-promo-faq details {border:1px solid #e5e5e5; border-radius:4px; background:#fff;}

.app-promo-screen-card {overflow:hidden;}

.app-promo-screen-img {display:block; width:100%;}

.app-promo-screen-body {padding:14px;}
.app-promo-screen-body h3,
.app-promo-feature h3 {margin:0 0 6px; font-size:17px; line-height:1.3; font-weight:700; text-transform:uppercase;}
.app-promo-screen-body p,
.app-promo-feature p {margin:0; color:#666; line-height:1.45; font-weight:300;}

.app-promo-band {padding:42px 15px; background:#f5f5f5;}

.app-promo-features {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:0 auto;}
.app-promo-feature {display:flex; gap:15px; padding:18px;}

.app-promo-icon {flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; color:#fff; background:#111;}
.app-promo-icon svg {width:28px; height:28px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;}

.app-promo-info {overflow:hidden;}

.app-promo-tags {display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.app-promo-tag {display:inline-block; padding:3px 7px; border-radius:2px; color:#fff; background:#b65f2b; font-size:12px; line-height:1.2;}

.app-promo-download {display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:20px; align-items:center; padding:24px; background:#111; color:#fff;}
.app-promo-download h2 {margin:0 0 7px; font-size:27px; line-height:1.2; font-weight:700; text-transform:uppercase;}
.app-promo-download p {margin:0; color:#bdbdbd; line-height:1.45;}
.app-promo-download small {display:block; margin-top:8px; color:#999; text-align:center;}

.app-promo-faq {display:grid; gap:8px; margin:0 auto;}
.app-promo-faq details {padding:0;}
.app-promo-faq summary {position:relative; display:block; padding:15px 46px 15px 15px; font-weight:700; cursor:pointer; text-transform:uppercase; list-style:none;}
.app-promo-faq summary::-webkit-details-marker {display:none;}
.app-promo-faq summary:after {content:"+"; position:absolute; top:50%; right:16px; width:20px; height:20px; margin-top:-10px; color:#b65f2b; font-size:22px; line-height:18px; text-align:center;}
.app-promo-faq details[open] summary:after {content:"-";}
.app-promo-faq p {margin:0; padding:0 15px 15px; color:#555; line-height:1.55;}

@media screen and (max-width:1000px) {
	.app-promo-hero {grid-template-columns:1fr; padding:36px 28px;}
	.app-promo-title {font-size:43px;}
	.app-promo-screens {grid-template-columns:repeat(2, minmax(0, 1fr));}
	.app-promo-features {grid-template-columns:repeat(2, minmax(0, 1fr));}
}

@media screen and (max-width:740px) {
	.app-promo-hero {padding:28px 20px;}
	.app-promo-title {font-size:36px;}
	.app-promo-lead {font-size:18px;}
	.app-promo-meta,
	.app-promo-features,
	.app-promo-download {grid-template-columns:1fr;}
	.app-promo-head h2 {font-size:28px;}
	.app-promo-download {text-align:center;}
}