/* Content gallery: preserve each format's proportions inside a consistent card. */
.catalog-preview{display:flex;align-items:center;justify-content:center;height:350px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:20px;overflow:hidden}
.catalog-preview canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;box-shadow:0 6px 22px #0f172a24}
.template-catalog .catalog-card{display:flex;flex-direction:column;padding:22px;min-width:0}
.template-catalog .catalog-card h2{font-size:1.45rem;line-height:1.3;margin:0 0 10px}
.template-catalog .catalog-card p{margin:0 0 9px;line-height:1.7;font-size:.9rem;color:var(--muted)}
.template-catalog .catalog-card .catalog-output{font-size:.78rem;margin-bottom:20px}
.template-catalog .catalog-card .button{margin-top:auto;white-space:normal;text-align:center}
.template-status{font-size:.87rem;line-height:1.7;color:var(--muted);min-height:28px;margin:12px 0 24px}
/* The footer uses the exact horizontal header logo and shared brand sizing. */
.experience-footer{width:100%;max-width:1240px;margin-inline:auto;padding:24px 40px;align-items:center;gap:24px 36px}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:0 0 auto;line-height:0}
.footer-brand>.carozel-brand-link{vertical-align:top}
.experience-footer nav{max-width:600px;justify-content:flex-end;line-height:1.8}
.experience-footer .footer-social{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px 14px;line-height:1.6}
.experience-footer .footer-social a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-size:.8rem;white-space:nowrap;text-decoration:none}
.experience-footer .footer-social a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-social svg{flex:0 0 18px}
.editor-page .experience-footer .carozel-brand-link,.dashboard-page .experience-footer .carozel-brand-link{--carozel-logo-header-width:176px}
/* Match the content container used by each page, including the home closing strip. */
.dashboard-page .experience-footer{max-width:1200px;padding-inline:28px}
.experience-page .experience-footer{width:min(1120px,calc(100% - 48px));max-width:none;padding-inline:0}
.account-page .experience-footer{max-width:1100px;padding-inline:30px}
.admin-page .experience-footer{width:min(1180px,calc(100% - 64px));max-width:none;padding-inline:0}
.editor-page .experience-footer{max-width:1800px;padding-inline:26px}
/* Tutorial images remain the unedited screenshots; captions explain each action. */
.tutorial-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:32px 0}
.tutorial-figure{margin:28px 0;border:1px solid var(--line);border-radius:16px;background:var(--raised);overflow:hidden}
.tutorial-figure a{display:block;background:var(--panel);padding:14px}
.tutorial-figure img{width:100%;height:auto;display:block;border-radius:8px}
.tutorial-figure figcaption{padding:18px 20px;font-size:.9rem;line-height:1.8;color:var(--muted)}
.tutorial-figure figcaption strong{display:block;color:var(--ink);margin-bottom:4px}
.tutorial-overview .tutorial-figure{margin:0}
.tutorial-open{font-size:.8rem;color:var(--link)}
.tutorial-steps{margin:24px 0;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.tutorial-steps h2{font-size:1.25rem;margin:0 0 12px}.tutorial-steps ol{padding-left:22px;margin:0}
@media(max-width:760px){.tutorial-overview{grid-template-columns:1fr}.catalog-preview{height:310px}}
@media(max-width:420px){.experience-footer{gap:24px}.template-catalog .catalog-card{padding:18px}}

@media(max-width:850px){.home-page .experience-footer,.account-page .experience-footer{padding-inline:24px}}
@media(max-width:800px){.admin-page .experience-footer{width:calc(100% - 32px);padding-inline:0}}
@media(max-width:650px){.account-page .experience-footer{padding-inline:20px}.admin-page .experience-footer{padding-inline:0}}
/* Center the logo and its navigation below it on phones. Brand CSS also sizes the header at 640px. */
@media(max-width:640px){
 .experience-footer{flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
 .experience-footer nav{width:100%;justify-content:center;gap:12px 18px}
 .experience-footer .footer-brand{align-items:center;max-width:100%}
 .experience-footer .footer-social{width:auto;justify-content:center}
 .editor-page .experience-footer{padding-inline:20px}
}
@media(max-width:600px){.experience-page .experience-footer{width:calc(100% - 32px)}}
@media(max-width:590px){.home-page .experience-footer,.dashboard-page .experience-footer{padding-inline:20px}}