/* CodalFlow's brand over each page's own styles (loaded after them): the logo's navy for the header and footer,
   its orange for the buttons. Orange carries navy text, not white: white on this orange is too faint to read. */
:root {
  --navy: #06214a; --navy-2: #0b2f66; --orange: #f7931e; --orange-2: #fb5a0b;
  --accent: var(--orange); --accent-ink: #0b3d91; --on-accent: var(--navy);
}

/* hidden means hidden, whatever display a class gives (.btn, .packages, .launch) */
[hidden] { display: none !important; }

header.nav { background: linear-gradient(90deg, var(--navy), var(--navy-2)); border-bottom: 0; }
header.nav .wrap { height: 68px; }
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand img { height: 44px; width: auto; display: block; }
header.nav .nav-links, header.nav .nav-links a, header.nav #who { color: #d5deec; }
header.nav .nav-links a:hover { color: #fff; }

.btn-primary, header.nav .nav-links .btn-primary {
  background: linear-gradient(180deg, #ffa62b, var(--orange)); border-color: var(--orange); color: var(--on-accent);
  font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:disabled { filter: grayscale(0.6); }
.plan.best .tag { color: var(--on-accent); font-weight: 700; }

footer { background: var(--navy); color: #b8c4d8; border-top: 0; }
footer a { color: #fff; }

@media (max-width: 640px) {
  header.nav .wrap { height: 60px; gap: 12px; }
  .brand img { height: 34px; }
}