/* Case studies use the homepage's outer column; media and motion stay intact. */
body.payrentz-page{--case-width:1000px;--case-gutter:120px;--case-inset:32px}
body.payrentz-page .cover{width:calc(100% - 2 * var(--case-gutter));max-width:var(--case-width);margin-inline:auto}
/* The overlay spans the page; padding contains the reading columns inside it. */
body.payrentz-page .layout{width:100%;max-width:none;margin-inline:0;padding-inline:max(var(--case-gutter),calc((100% - var(--case-width)) / 2));background:#fff}
body.payrentz-page .layout{grid-template-columns:168px minmax(0,1fr);column-gap:48px;box-shadow:none}
body.payrentz-page .sidebar{padding:48px 16px 28px 0;border-right:0;box-shadow:none}
body.payrentz-page .sidebar nav a{font-size:13px;line-height:1.45;padding-block:8px;white-space:normal}
body.payrentz-page .section{padding:72px 0;border-bottom:0}
body.payrentz-page .inner{max-width:100%;min-width:0}
body.payrentz-page .section h2,
body.payrentz-page .overview h2{font-size:clamp(30px,2.6vw,38px);line-height:1.22;letter-spacing:-.025em;margin-bottom:24px}
body.payrentz-page .copy{max-width:70ch;font-size:16px;line-height:1.65}
body.payrentz-page .impact{margin-top:40px;padding:28px}
body.payrentz-page .impact p{font-size:clamp(24px,2.2vw,30px);line-height:1.35;letter-spacing:0}
body.payrentz-page .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
body.payrentz-page .facts>div{min-width:0}
body.payrentz-page .facts span{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
body.payrentz-page .live-link{justify-self:start}
body.payrentz-page .constraints-grid{gap:28px 28px;margin-top:40px}
body.payrentz-page .subhead{font-size:clamp(23px,2vw,28px);line-height:1.3}
body.payrentz-page .results-list>div{gap:24px;padding:28px}
body.payrentz-page .results-list strong{font-size:38px}
body.payrentz-page .next-project{padding:48px 0}
body.payrentz-page .portfolio-footer .wrap{width:100%;max-width:1000px}
body.payrentz-page .portfolio-footer .footer-main{gap:24px;padding:64px 0 40px}
body.payrentz-page .portfolio-footer .footer-main h2{font-size:32px;line-height:1.22}
/* A top contents strip keeps the article comfortable on tablets and laptops. */
@media(max-width:1100px){
 body.payrentz-page .layout{display:block}
 body.payrentz-page .sidebar{height:auto;position:sticky;top:0;display:flex;align-items:center;gap:16px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:12px 16px;border-right:0;box-shadow:none;scrollbar-width:none;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%)}
 body.payrentz-page .sidebar::-webkit-scrollbar{display:none}
 body.payrentz-page .sidebar .back{margin:0;flex:none;font-size:13px}
 body.payrentz-page .sidebar nav{flex-direction:row;gap:18px;padding-right:24px}
 body.payrentz-page .sidebar nav a{flex:none;white-space:nowrap}
 body.payrentz-page .section{scroll-margin-top:84px}
}
@media(min-width:701px) and (max-width:1000px){
 body.payrentz-page{--case-gutter:55px}
}
@media(max-width:800px){
 body.payrentz-page{--case-inset:20px}
 body.payrentz-page .section{padding-block:56px}
 body.payrentz-page .portfolio-footer .footer-main{grid-template-columns:1fr;gap:30px}
}
@media(max-width:700px){
 body.payrentz-page{--case-gutter:20px}
}
@media(max-width:600px){
 body.payrentz-page{--case-inset:0px}
 body.payrentz-page .sidebar{padding-inline:0;gap:12px}
 body.payrentz-page .section h2,body.payrentz-page .overview h2{font-size:clamp(27px,7vw,32px);line-height:1.25}
 body.payrentz-page .copy{font-size:16px;line-height:1.65}
 body.payrentz-page .impact{padding:22px}
 body.payrentz-page .impact p{font-size:24px}
 body.payrentz-page .constraints-grid{grid-template-columns:1fr}
 body.payrentz-page .results-list>div{grid-template-columns:1fr;padding:24px;gap:12px}
 body.payrentz-page .portfolio-footer .footer-main h2{font-size:30px}
 body.payrentz-page .next-project>a{padding:24px}
}

/* Flat surfaces throughout both case studies, including hover states. */
body.payrentz-page .cover,body.payrentz-page .layout,body.payrentz-page .sidebar,body.payrentz-page .project-links img,body.payrentz-page .project-links a:hover img,body.payrentz-page .next-project>a,body.payrentz-page .portfolio-footer{box-shadow:none}

/* PayRentz opening image spans the viewport; article margins stay contained. */
body.payrentz-page:not(.novvel-page) .cover{width:100%;max-width:none;margin-inline:0}

/* Fit each complete PDP board into one viewport, including its embedded notes. */
body.payrentz-page:not(.novvel-page) .pdp-carousel .board-window{display:flex;justify-content:center;align-items:flex-start;overflow:visible}
body.payrentz-page:not(.novvel-page) .pdp-carousel .board-window img{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100svh - 150px);object-fit:contain;transform:none}

/* Keep the gray board at the image size rather than filling the carousel track. */
body.payrentz-page:not(.novvel-page) .pdp-carousel .pdp-panels>.pdp-slide{background:transparent;padding:8px 0}
body.payrentz-page:not(.novvel-page) .pdp-carousel .pdp-slide>a{width:min(100%,680px,calc((100vh - 150px) * .8065));width:min(100%,680px,calc((100svh - 150px) * .8065));background:transparent}