*{box-sizing:border-box}body{margin:0;background:#f7f8fb;color:#172238;font:16px system-ui,sans-serif;isolation:isolate}.brand-background{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:-1}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 4vw;background:#fffffff2;border-bottom:1px solid #dfe5ee;flex-wrap:wrap}.brand{font-size:22px;font-weight:750;overflow-wrap:anywhere}.brand img{max-width:220px;height:48px;object-fit:contain}nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap}main{max-width:1440px;margin:auto;padding:32px 4vw}h1{font-size:clamp(28px,4vw,44px);margin:10px 0;overflow-wrap:anywhere}h2{font-size:22px}p{line-height:1.6;overflow-wrap:anywhere}.eyebrow{color:#536582;font-weight:600}.welcome{padding:12px 0 24px}.search{display:flex;gap:8px;max-width:640px}.search input{flex:1;min-width:0}.search input,button,select,.button{font:inherit;min-height:44px;border:1px solid #ccd5e2;border-radius:8px;padding:10px 14px}.button,button{background:#2457d6;color:white;cursor:pointer}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:16px;max-height:280px;overflow:auto}.playlist-card{display:flex;flex-direction:column;gap:14px;background:#eaf0fc;padding:20px;border-radius:12px;overflow-wrap:anywhere}.playlist-card span{font-size:14px;color:#45608a}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));align-content:start;gap:24px;height:65vh;overflow:auto;padding:4px}.thumbnail{aspect-ratio:16/9;background:#dfe7f5;border-radius:12px;overflow:hidden;display:grid;place-items:center;font-size:36px;color:#526888}.thumbnail img{width:100%;height:100%;object-fit:cover}.video-card h3{font-size:16px;margin:10px 0;overflow-wrap:anywhere}.empty{grid-column:1/-1;border:1px dashed #bac8dc;border-radius:12px;padding:28px;color:#536582}.pages{padding:20px 0}.watch{max-width:1100px;margin:auto}.watch video{width:100%;max-height:75vh;aspect-ratio:16/9;background:#111;border-radius:12px}.watch select{margin:16px 0 16px 12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}:focus-visible{outline:3px solid #84a9ff;outline-offset:3px}@media(max-width:600px){header{gap:16px;padding:16px}nav{gap:14px;font-size:14px}main{padding:16px}.brand img{max-width:180px;height:40px}.video-grid{height:65vh}.search button{padding:10px}.watch select{display:block;margin-left:0}}

.watch-details{background:rgba(255,255,255,.96);color:#172033;padding:20px;border-radius:12px;margin-top:12px;overflow-wrap:anywhere}.watch video:fullscreen{max-height:none;border-radius:0;background:#000}

/* Readable dashboard copy over tenant photography. */
.welcome{background:rgba(247,249,252,.8);border:1px solid #d9e1ed;border-radius:14px;padding:24px;margin-bottom:24px;box-shadow:0 6px 22px #17223814}
.empty{background:rgba(247,249,252,.8);color:#24334b;border:1px solid #cbd6e5;border-left:5px solid #2457d6;box-shadow:0 6px 22px #1722381a}
.empty h3{color:#12213a;font-size:clamp(22px,2.4vw,28px);font-weight:750;margin:0 0 12px}
.empty p{margin:0;max-width:70ch;font-size:17px}
main>section>h2{display:table;background:rgba(247,249,252,.8);color:#172238;border-radius:8px;padding:10px 16px}
.pages{background:rgba(247,249,252,.8);color:#172238;border-radius:8px;padding:12px 16px;margin-top:16px;width:fit-content;max-width:100%}
@media(max-width:600px){.welcome,.empty{padding:20px}.empty p{font-size:16px}}
.approval-pending{background:#fff0c2!important;color:#654600!important;border:1px solid #d49a17;border-radius:8px;padding:10px 14px;box-shadow:0 0 16px #e9b94988;font-weight:700}

/* Size the visible artwork, including attribution, rather than PNG padding. */
header{padding-top:8px;padding-bottom:8px;gap:12px 24px}
.brand{display:inline-flex;align-items:center;min-width:0;max-width:100%}
.brand>img{display:block;height:72px;max-width:min(420px,calc(100vw - 32px));object-fit:contain}
.brand-logo{display:block;position:relative;overflow:hidden;width:min(calc(72px * var(--brand-ratio)),420px,calc(100vw - 32px));max-width:100%;aspect-ratio:var(--brand-ratio);flex:none}
.brand .brand-logo img{display:block;position:absolute;width:var(--brand-image-width);height:auto;max-width:none;left:var(--brand-image-left);top:var(--brand-image-top);object-fit:initial}
@media(max-width:600px){header{padding-top:8px;padding-bottom:8px}.brand>img{height:56px;max-width:calc(100vw - 32px)}.brand-logo{width:min(calc(56px * var(--brand-ratio)),calc(100vw - 32px))}}