.screenshot-page{background:#f3f6f7;color:#1b2b35}
.screenshot-page .screenshot-hero{background:radial-gradient(circle at 83% 18%,rgba(33,136,153,.2),transparent 28%),linear-gradient(145deg,#fff 0%,#f5f9fb 55%,#e8f3f2 100%)}
.screenshot-page .top-nav-links a[aria-current="page"]{color:#9f315d;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.screenshot-hero-inner{max-width:1480px;margin:0 auto;padding:70px 42px 100px;display:grid;grid-template-columns:minmax(410px,.76fr) minmax(620px,1.24fr);gap:52px;align-items:center}
.screenshot-hero-copy{position:relative;z-index:2}
.screenshot-hero-copy h1{margin:12px 0 22px;color:#172033;font-size:clamp(42px,4vw,64px);line-height:1.08;letter-spacing:-.025em}
.screenshot-hero-copy h1 span{color:#087bc7}
.screenshot-hero-copy .lead{color:#516476;font-size:21px;line-height:1.72}
.screenshot-page .order-button{color:#142d33;background:#e4b650;box-shadow:0 10px 24px rgba(180,127,33,.25)}
.screenshot-page .order-button:hover{color:#142d33;background:#d9a43b;transform:translateY(-2px)}
.hero-screen{position:relative;margin:0;min-width:0}
.hero-screen.shot button{border:1px solid #c9d8e1;border-radius:18px;background:#fff;box-shadow:0 30px 75px rgba(34,65,95,.24)}
.hero-screen .window-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;color:#415b6b;background:#f5f8fa;border-bottom:1px solid #d7e2e8;font-size:12px;text-align:left}
.hero-screen .window-bar i{width:9px;height:9px;border-radius:50%;background:#df665d}
.hero-screen .window-bar i:nth-child(2){background:#e0ac46}
.hero-screen .window-bar i:nth-child(3){background:#50b483}
.hero-screen .window-bar b{margin-left:7px;font-weight:700}
.hero-screen figcaption{max-width:760px;margin:14px auto 0;color:#3c626b;font-size:16px;font-weight:700}
.screenshot-hero-copy .hero-meta{color:#536675}
.screenshot-main{max-width:1480px;margin:-44px auto 0;padding:0 28px 88px;position:relative;z-index:3}
.gallery-nav{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:15px;border:1px solid #d5e4e6;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 14px 36px rgba(24,72,79,.1)}
.gallery-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 20px;border-radius:9px;color:#0c6b74;background:#eef7f6;text-decoration:none;font-weight:800}
.gallery-nav a:hover{color:#fff;background:#0b7b86}
.intro-band{display:grid;grid-template-columns:repeat(3,1fr);margin:22px 0 28px;border:1px solid #dce7e8;border-radius:14px;background:#fff;overflow:hidden}
.intro-band div{display:flex;align-items:baseline;justify-content:center;gap:12px;padding:22px;border-right:1px solid #e2ebec}
.intro-band div:last-child{border-right:0}
.intro-band strong{color:#087bc7;font-size:28px}
.intro-band span{color:#61737d;font-weight:700}
.gallery-section{scroll-margin-top:20px;margin:0 0 28px;padding:52px 48px 48px;border:1px solid #dce7e8;border-radius:18px;background:#fff;box-shadow:0 10px 34px rgba(23,66,70,.055)}
.feature-section{border-top:6px solid #c08b31}
.section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;margin-bottom:30px}
.section-title-row>div{max-width:920px}
.section-title-row h2,.closing-cta h2{margin:4px 0 12px;color:#173e47;font-size:clamp(34px,3.2vw,50px);line-height:1.16}
.section-title-row p:not(.kicker){margin:0;color:#5a6e76;font-size:19px;line-height:1.7}
.section-number{display:grid;place-items:center;flex:0 0 68px;height:68px;border-radius:18px;color:#0b7882;background:#e5f3f1;font-size:25px;font-weight:900}
.selling-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 30px}
.selling-points article{display:flex;flex-direction:column;gap:4px;padding:19px 20px;border:1px solid #d3e7e3;border-radius:12px;background:#f3faf8}
.selling-points b{color:#0b6670;font-size:19px}
.selling-points span{color:#60747b;font-size:15px;line-height:1.55}
.screenshot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.gallery-card{display:flex;flex-direction:column;margin:0!important;min-width:0;border:1px solid #d9e5e7;border-radius:14px;background:#fdfefe;overflow:hidden;box-shadow:0 9px 26px rgba(30,73,80,.08)}
.gallery-card-wide{grid-column:1/-1}
.gallery-card.shot button{border-radius:0;box-shadow:none;background:#eaf1f3}
.gallery-card.shot img{aspect-ratio:3439/1440;object-fit:cover}
.gallery-card figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:92px;margin:0;padding:18px 20px;text-align:left}
.gallery-card figcaption b{color:#0b6872;font-size:20px}
.gallery-card figcaption span{color:#62757d;font-size:15px;line-height:1.5}
.gallery-card-wide figcaption{min-height:auto}
.section-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:30px;padding:24px 26px;border:1px solid #d7e5df;border-radius:14px;background:linear-gradient(135deg,#eaf8f3,#fff7e8)}
.section-cta>div{display:flex;flex-direction:column;gap:3px}
.section-cta strong{color:#14545c;font-size:23px}
.section-cta span{color:#5d7177}
.section-cta .button{flex:0 0 auto}
.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.compact-grid .gallery-card figcaption{min-height:100px}
.closing-cta{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:44px 48px;border-radius:18px;color:#dcebea;background:radial-gradient(circle at 90% 20%,rgba(45,135,146,.3),transparent 32%),linear-gradient(135deg,#082c32,#0d4850)}
.closing-cta>div:first-child{max-width:760px}
.closing-cta h2{color:#fff}
.closing-cta p:not(.kicker){margin:0;color:#bfd6d3;font-size:18px}
.closing-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:250px}
.closing-actions .button{text-align:center}
.screenshot-page footer nav{justify-content:flex-end}
.screenshot-page dialog img{background:#fff}
.screenshot-page .zoom:focus-visible{outline:4px solid #d39b39;outline-offset:3px}

@media(max-width:1180px){
  .screenshot-page .top-nav-links a:nth-child(4),.screenshot-page .top-nav-links a:nth-child(5){display:inline-flex}
  .screenshot-hero-inner{grid-template-columns:1fr;padding-top:58px}
  .screenshot-hero-copy{max-width:900px}
  .hero-screen{max-width:1100px}
  .compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .screenshot-page .top-nav-links a:not(.nav-cta){display:inline-flex}
  .screenshot-page .topbar{align-items:center;flex-wrap:wrap}
  .screenshot-page .top-nav-links{width:100%;justify-content:flex-start}
  .screenshot-main{margin-top:-30px;padding-inline:16px}
  .gallery-section{padding:40px 28px}
  .selling-points{grid-template-columns:1fr}
  .closing-cta{align-items:stretch;flex-direction:column}
  .closing-actions{flex-direction:row;flex-wrap:wrap}
  .closing-actions .button{flex:1 1 190px}
}
@media(max-width:720px){
  .screenshot-hero-inner{padding:42px 18px 72px}
  .screenshot-hero-copy h1{font-size:38px}
  .screenshot-hero-copy .lead{font-size:18px}
  .hero-screen figcaption{font-size:14px}
  .intro-band{grid-template-columns:1fr}
  .intro-band div{justify-content:flex-start;border-right:0;border-bottom:1px solid #e2ebec}
  .intro-band div:last-child{border-bottom:0}
  .gallery-section{padding:34px 18px}
  .section-title-row{flex-direction:column-reverse}
  .section-number{width:56px;flex-basis:56px;height:56px}
  .screenshot-grid,.compact-grid{grid-template-columns:1fr}
  .gallery-card-wide{grid-column:auto}
  .section-cta{align-items:stretch;flex-direction:column}
  .section-cta .button{width:100%}
  .closing-cta{padding:36px 22px}
  .screenshot-page footer nav{align-items:flex-start;justify-content:flex-start}
}
@media(max-width:500px){
  .gallery-nav{align-items:stretch;flex-direction:column}
  .gallery-nav a{width:100%}
  .screenshot-page .top-nav-links .nav-cta{flex:1 1 135px}
  .screenshot-page .top-nav-links a:not(.nav-cta){flex:1 1 auto}
  .hero-screen .window-bar b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}