html, body { margin: 0; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { display: flex; flex-direction: column; }
.ribbon { flex: none; background: linear-gradient(120deg, #ff5a1f, #e8115b); color: #fff; font-size: 13px; padding: 7px 44px 7px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; position: relative; line-height: 1.4; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.ribbon .links { display: flex; gap: 8px; flex-wrap: wrap; }
.ribbon a { color: #fff; font-weight: 600; background: rgba(255,255,255,.16); padding: 4px 11px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.ribbon a:hover { background: rgba(255,255,255,.28); }
.ribbon a.call { background: #fff; color: #b80d4a; text-shadow: none; }
.ribbon .x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; opacity: .85; }
iframe { flex: 1; width: 100%; border: 0; display: block; }
.fallback { flex: 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0b6fa4, #0d3557); color: #fff; text-align: center; padding: 24px; }
.fallback[hidden] { display: none; }
.fallback .card { max-width: 560px; }
.fallback h1 { font-size: 26px; margin: 0 0 10px; }
.fallback p { opacity: .92; line-height: 1.6; }
.fallback a { color: #ffd23f; }
@media (max-width: 640px) { .ribbon { font-size: 11.5px; padding-right: 36px; } .ribbon .hide-sm { display: none; } }