/* Shared branding and the full-width, responsive classic video template. */
.app-icon-image{display:inline-block;width:36px;height:36px;min-width:36px;flex-shrink:0;object-fit:cover;border-radius:10px;vertical-align:middle;background:#fff}
.app-brand-with-icon{display:inline-flex!important;align-items:center;gap:10px}
.hero-header .brand-icon.app-icon-image{display:block;padding:0;width:36px;height:36px;border-radius:10px;overflow:hidden}
.app-icon-setting{display:flex;align-items:center;gap:20px;max-width:100%}
.app-icon-setting>img{width:80px;height:80px;object-fit:cover;border-radius:19px;background:#f7f4f8;box-shadow:0 0 0 1px #e7e1e9;flex-shrink:0}
.app-icon-setting>div{min-width:0;flex:1}
#app-icon-file{min-height:0;width:100%;max-width:340px;padding:9px;font-size:12px}
#app-icon-file::file-selector-button{border:0;background:#f9e9f0;color:#9e2e59;padding:9px 12px;border-radius:6px;margin-right:9px;font:inherit;cursor:pointer}
#reset-app-icon{font-size:12px;margin-top:10px}
.icon-upload-status{font-size:12px;color:#99607e;line-height:1.7;margin:0}
.icon-upload-status:empty{display:none}
body[data-template="classic"]{background:#fff8fa;--accent:#d81765;--accent-rgb:216,23,101;--on-accent:#fff;--accent-text:#bd1458;--pink:#d81765}
body[data-template="classic"] .desktop-note{display:none}
body[data-template="classic"] .landing{width:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:#fff8fa}
body[data-template="classic"] .hero{height:clamp(540px,78svh,880px);width:100%}
body[data-template="classic"] .hero-shade{background:linear-gradient(180deg,#30132255 0%,#3013220a 30%,#30132226 50%,#421629bd 100%)}
body[data-template="classic"] .hero-header{left:clamp(20px,5vw,88px);right:clamp(20px,5vw,88px);top:clamp(22px,4vh,42px)}
body[data-template="classic"] .hero-copy{left:clamp(24px,6vw,104px);right:clamp(24px,6vw,104px);bottom:clamp(52px,8vh,96px)}
body[data-template="classic"] .hero h1{font-size:clamp(44px,5.5vw,80px);max-width:900px}
body[data-template="classic"] .hero-copy p{font-size:clamp(14px,1.5vw,19px)}
body[data-template="classic"] .page-content{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
body[data-template="classic"] .first-download{width:100%;max-width:620px;margin:0 auto;padding-top:28px}
body[data-template="classic"] .closing{width:100%;max-width:620px;margin:0 auto}
body[data-template="classic"] .footer{padding-bottom:120px}
body[data-template="classic"] .download-button{background:#d81765;color:#fff;border:2px solid #fff;box-shadow:0 4px 0 #b8155124,0 10px 24px #d8176529;font-weight:800}
body[data-template="classic"] .download-button:hover{background:#bc1054;box-shadow:0 5px 0 #b8155124,0 14px 28px #d8176533}
body[data-template="classic"] .download-button small{color:#fff;opacity:.92}
body[data-template="classic"] .sticky-download a{background:#d81765;color:#fff;box-shadow:0 3px 10px #d8176524}
body[data-template="classic"] .sticky-download a:hover{background:#bc1054}
body[data-template="classic"] #download-modal .modal-download{background:#d81765;color:#fff;box-shadow:0 5px 16px #d8176530}
body[data-template="classic"] #download-modal .modal-download:hover{background:#bc1054}
body[data-template="classic"] #download-modal .modal-download[aria-disabled="true"]{background:#a7617d;box-shadow:none}
@media(min-width:900px){
  body[data-template="classic"] .intro{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;padding:40px}
  body[data-template="classic"] .intro .section-label{grid-column:1/-1}
  body[data-template="classic"] .intro h2{grid-column:1;grid-row:2/4;font-size:36px;align-self:center}
  body[data-template="classic"] .intro p{grid-column:2;margin:10px 0}
  body[data-template="classic"] .intro .text-link{grid-column:1/-1}
  body[data-template="classic"] .features{padding:48px 0}
  body[data-template="classic"] .feature-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  body[data-template="classic"] .feature-grid article{padding:30px 14px}
  body[data-template="classic"] .rules{padding:36px 40px}
  body[data-template="classic"] .rules ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  body[data-template="classic"] .rules li{border:0;padding:16px 0 0;gap:12px}
}
@media(max-width:540px){
  body[data-template="classic"] .hero{height:clamp(510px,76svh,680px)}
  body[data-template="classic"] .first-download{padding-top:22px}
}
@media(max-width:370px){
  body[data-template="classic"] .hero h1{font-size:40px}
  body[data-template="classic"] .hero-header{left:16px;right:16px}
  body[data-template="classic"] .hero-header .brand-icon.app-icon-image{width:30px;height:30px;min-width:30px}
}