/* ============================================================
   Per-ratio composition overrides.
   Master layout (slides.css) is authored for 4:5; here we adapt
   the proportions for the square and vertical formats.
   ============================================================ */

/* ================= 1:1 — 1080×1080 (vertical is tight) ========= */
.stage.r-1-1 .a-band { min-height: 33%; gap: 22px; }

.stage.r-1-1 .b-title { padding-top: 44px; }
.stage.r-1-1 .b-sheet { height: 224px; margin-block: 16px; }

.stage.r-1-1 .c-title { font-size: calc(var(--h1) * .82); padding-top: 36px; }
.stage.r-1-1 .c-transform { padding-top: 14px; gap: 6px; }
.stage.r-1-1 .c-sheet { flex-basis: 34%; }
.stage.r-1-1 .c-band { padding-top: 30px; padding-bottom: 30px; gap: 10px; }

.stage.r-1-1 .d-app { flex-basis: 47%; }
.stage.r-1-1 .d-band { gap: 22px; }

/* ================= 9:16 — 1080×1920 (lots of height) ===========
   Fill the canvas and keep the CTA / logo clear of the bottom
   Reels/Stories UI (~bottom 300px) and top UI (~240px). */
.stage.r-9-16 .slide { /* nothing global */ }

.stage.r-9-16 .a-sheet { margin-top: calc(var(--pad) + var(--safe-top) * .35); }
.stage.r-9-16 .a-band { min-height: 28%; gap: 34px; padding-bottom: calc(var(--pad) + 90px); }

.stage.r-9-16 .b-title { padding-top: calc(var(--pad) + var(--safe-top) * .3); }
.stage.r-9-16 .b-sheet { height: 360px; }

.stage.r-9-16 .c-title { padding-top: calc(var(--pad) + var(--safe-top) * .25); }
.stage.r-9-16 .c-sheet { flex-basis: 34%; }
.stage.r-9-16 .c-band { padding-top: calc(var(--pad) * .8); padding-bottom: calc(var(--pad) + 80px); }

.stage.r-9-16 .d-app { flex-basis: 48%; margin-top: calc(var(--pad) + var(--safe-top) * .3); }
.stage.r-9-16 .d-band { gap: 52px; padding-bottom: calc(var(--pad) + 150px); }
.stage.r-9-16 .d-band .band-title.big { font-size: calc(var(--h1) * 1.32); }
.stage.r-9-16 .cta { padding: 26px 40px; font-size: 30px; border-radius: 18px; }
.stage.r-9-16 .brand-lockup.lg .brand-mark { width: 84px; height: 84px; font-size: 42px; }
.stage.r-9-16 .brand-lockup.lg .brand-word { font-size: 46px; }