.studio .register-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid #cbdaf5;border-radius:9px;white-space:nowrap;color:#1555f5}
.studio .nav-actions{gap:15px}.studio .desktop-nav{gap:25px}
.animation-control{position:fixed;right:22px;bottom:20px;z-index:80;padding:5px;border:1px solid #d5e1f5;border-radius:13px;background:#fffffff2;box-shadow:0 8px 24px #1a41701a;backdrop-filter:blur(12px)}
.animation-control .motion-toggle{width:36px;height:34px;border:0;border-radius:8px;background:#eff5ff;color:#1555f5;cursor:pointer;font:600 15px Arial,sans-serif}
.platform-replacement{scroll-margin-top:100px}.school-feature-diagram{margin-top:28px}.studio .sfm-hint{font-size:11px;line-height:1.7;color:#607593}.studio .sfm-map-shell{border-radius:20px;background:#fff}.studio .sfm-topbar{margin-bottom:15px}.studio .sfm-svg{max-width:100%;font-family:Arial,Helvetica,sans-serif}.studio .sfm-list button{font-family:inherit}.studio .complete-feature-section>.fm-detail{scroll-margin-top:110px}.sfm [hidden]{display:none!important}
@media(max-width:1250px){.studio .desktop-nav{gap:17px}.studio .nav-actions{gap:11px}.studio .register-link{padding:9px 11px}.studio .desktop-nav a{font-size:11px}}
@media(max-width:680px){.studio .nav-actions .register-link{display:none}.animation-control{right:12px;bottom:14px}.studio .sfm-svg{max-width:none}.studio .sfm-hint{font-size:10px}.studio .sfm-topbar{gap:8px}.platform-replacement{scroll-margin-top:80px}.studio .sfm-list button{font-size:11px}.studio .sfm-list button>span{flex-shrink:0}}
@media(max-width:380px){.studio .nav-actions{gap:6px}}
.studio .surface-explorer .feature-menu>button:hover{background:#edf4ff;color:var(--blue)}

/* Keep the complete map compact without changing its artwork. */
.studio .school-feature-diagram {
    max-width: 940px;
    margin: 28px auto 0;
}
.studio .sfm-map-shell { padding: 14px; }
.studio .sfm-svg {
    width: min(100%, 880px);
    min-width: 0;
    max-width: 880px;
}

/* Product previews keep their own dimensions, including portrait app screens. */
.studio .browser-frame .screen-button img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
}
.studio .browser-frame.is-portrait {
    width: min(100%, 260px);
    margin-inline: auto;
    border-radius: 18px;
}
.studio .browser-frame.is-portrait .frame-bar { display: none; }
.studio .fm-detail-preview { min-width: 0; }
.studio .finance-preview .browser-frame,
.studio .reports-visual .browser-frame { transform: none; }

/* Footer navigation follows the same destinations as the original project. */
.studio .school-footer {
    color: #fff;
    background: radial-gradient(ellipse at 0 0, #16417b 0, #102d54 50%, #0c2242 100%);
    padding: 70px 0 35px;
    border-top: 4px solid #1555f5;
}
.school-footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
    gap: 42px;
    align-items: start;
}
.studio .school-footer-logo {
    display: inline-block;
    width: 133px;
    border-radius: 15px;
    background: #fff;
    margin-bottom: 25px;
    overflow: hidden;
    line-height: 0;
}
.studio .school-footer-logo .brand-logo-crop {
    width: 133px;
    height: 112px;
}
.studio .school-footer-logo .brand-logo-crop img {
    width: 133px;
    height: 133px;
    top: -10px;
}
.school-footer-brand h2 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.04em;
}
.school-footer-brand h2 span { color: #92bdff; }
.school-footer-brand p,
.school-footer-contact p {
    color: #b6c8e1;
    font-size: 12px;
    line-height: 1.85;
    margin-top: 17px;
    max-width: 290px;
}
.school-footer-demo {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 13px 18px;
    margin-top: 22px;
    border-radius: 9px;
    background: #fff;
    color: #143b73;
    font-size: 12px;
    font-weight: 750;
}
.school-footer h3 {
    margin: 5px 0 24px;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0;
    color: #fff;
}
.school-footer-links { display: flex; flex-direction: column; align-items: start; }
.school-footer-links a {
    display: inline-block;
    color: #c8d7eb;
    font-size: 12px;
    line-height: 1.6;
    padding: 6px 0;
    margin-bottom: 5px;
}
.school-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.school-footer .school-footer-logo:hover { text-decoration: none; }
.school-footer-contact p { margin: 0 0 23px; }
.school-footer-phone { display: block; font-size: 16px; font-weight: 700; margin-bottom: 12px; white-space: nowrap; }
.school-footer-phone.secondary { font-size: 13px; font-weight: 500; color: #c8d7eb; }
.school-footer-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 23px;
    margin-top: 12px;
    border: 1px solid #6184b7;
    border-radius: 9px;
    padding: 12px 16px;
    font-size: 12px;
}
.school-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-top: 1px solid #ffffff24;
    margin-top: 50px;
    padding-top: 24px;
    padding-right: 65px;
    color: #a3b9d7;
    font-size: 10px;
    line-height: 1.8;
}
.school-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }

@media (max-width: 1100px) {
    .school-footer-grid { grid-template-columns: 1.2fr 1fr; gap: 38px 60px; }
    .school-footer-contact { grid-column: 2; grid-row: 2; }
}
@media (max-width: 800px) {
    .studio .browser-frame.is-portrait { max-width: 240px; }
}
@media (max-width: 640px) {
    .studio .school-feature-diagram { margin-top: 20px; }
    .studio .sfm-map-shell { padding: 10px; }
    .studio .sfm-svg { min-width: 640px; width: 640px; max-width: none; }
    .studio .school-footer { padding: 45px 0 80px; }
    .school-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
    .school-footer-brand { grid-column: 1 / -1; }
    .school-footer-brand p { max-width: 360px; }
    .school-footer-brand h2 { font-size: 29px; }
    .school-footer-contact { grid-column: 1 / -1; grid-row: auto; padding-top: 27px; border-top: 1px solid #ffffff24; }
    .school-footer-contact p { max-width: 350px; }
    .school-footer h3 { font-size: 11px; margin-bottom: 18px; }
    .school-footer-links a { font-size: 11px; }
    .school-footer-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 32px; padding-top: 22px; padding-right: 0; }
    .school-footer-bottom nav { gap: 10px 20px; }
}

/* Feature labels stay readable inside the compact diagram. */
.studio .sfm-node > .sfm-label {
    font-size: 36px;
    font-weight: 700;
}
.studio .sfm-node[data-school-feature="feature-07"] > .sfm-label,
.studio .sfm-node[data-school-feature="feature-20"] > .sfm-label,
.studio .sfm-node[data-school-feature="feature-22"] > .sfm-label,
.studio .sfm-node[data-school-feature="feature-23"] > .sfm-label {
    font-size: 34px;
}
.studio .sfm-node[data-school-feature="feature-13"] > .sfm-label {
    font-size: 35px;
}
.studio .sfm-node[data-school-feature="feature-17"] > .sfm-label {
    font-size: 33px;
}