/* Navbar identity: fixed footprint while name and official phoenix alternate. */
.nav{padding-top:18px;padding-bottom:18px}
:is(.nav,footer) .brand-cycle{display:grid;grid-template-areas:'identity';align-items:center;justify-items:start;position:relative;isolation:isolate;flex:0 0 220px;width:220px;height:66px}
:is(.nav,footer) .brand-cycle .brand-name{grid-area:identity;display:block;color:var(--white);white-space:nowrap;animation:phoenix-name 12s ease-in-out infinite}
:is(.nav,footer) .brand-cycle .brand-name>span{color:var(--gold)}
:is(.nav,footer) .brand-cycle .brand-name small{color:var(--muted)}
:is(.nav,footer) .brand-cycle .brand-phoenix{grid-area:identity;position:absolute;left:0;top:-13px;display:block;width:220px;height:92px;object-fit:contain;object-position:center;opacity:0;filter:drop-shadow(0 0 8px #f37a2444);animation:phoenix-emblem 12s ease-in-out infinite;pointer-events:none}
:is(.nav,footer) .brand-cycle::after{content:'';position:absolute;left:14%;right:14%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#f6b86f,transparent);box-shadow:0 0 12px #ec762955;opacity:0;animation:phoenix-ember 12s ease-in-out infinite;pointer-events:none}
@keyframes phoenix-name{0%,32%,100%{opacity:1;transform:translateY(0)}40%,90%{opacity:0;transform:translateY(-7px)}98%{opacity:1;transform:translateY(0)}}
@keyframes phoenix-emblem{0%,33%,100%{opacity:0;transform:translateY(6px) scale(.94)}44%,82%{opacity:1;transform:translateY(0) scale(1)}94%{opacity:0;transform:translateY(-5px) scale(.97)}}
@keyframes phoenix-ember{0%,35%,95%,100%{opacity:0;transform:scaleX(.5)}48%,79%{opacity:.8;transform:scaleX(1)}}
/* Only the requested resource column of the FREE/VIP comparison. */
.vip-comparison th:first-child{font-family:Arial,sans-serif;font-size:15px;line-height:1.55;letter-spacing:.15px;font-weight:600;color:#e9d4b2;white-space:normal;min-width:230px;text-align:left}
.vip-comparison thead th:first-child{font-size:15px;color:#f4eee3}
@media(max-width:1100px){:is(.nav,footer) .brand-cycle{flex-basis:205px;width:205px}:is(.nav,footer) .brand-cycle .brand-phoenix{width:205px}}
@media(max-width:600px){:is(.nav,footer) .brand-cycle{flex-basis:190px;width:190px;height:58px}:is(.nav,footer) .brand-cycle .brand-phoenix{width:190px;height:80px;top:-11px}.vip-comparison th:first-child{min-width:200px;font-size:15px}}
@media(prefers-reduced-motion:reduce){:is(.nav,footer) .brand-cycle .brand-name{animation:none;opacity:1;transform:none}:is(.nav,footer) .brand-cycle .brand-phoenix,:is(.nav,footer) .brand-cycle::after{animation:none;display:none}}

/* Keep the footer identity centered when its layout stacks. */
@media(max-width:700px){footer .brand-cycle{margin:0 auto 18px}}