/* CaseGuardian pre-launch states (Areas 81 and 82).
 * The switch is APP_STORES_LIVE in config.js; prelaunch.js turns it into the
 * class cg-stores-live on <html>. Without that class (flag false, or
 * JavaScript off) the page shows its pre-launch state.
 */

/* -------- store buttons: coming soon vs live (Area 81) -------- */
html:not(.cg-stores-live) .cg-live { display: none !important; }
html.cg-stores-live .cg-soon { display: none !important; }

.cg-soon-store {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

/* -------- site-wide pre-launch banner (Area 82) --------
 * In the normal flow at the top of the page, so it never sits over content.
 * Colors: #14110A on #F6E7B8 is about 15.6:1 (WCAG AA needs 4.5:1).
 * Uses the page's own font; no fonts, images or scripts of its own.
 */
html.cg-stores-live .cg-prelaunch { display: none !important; }

.cg-prelaunch {
  position: relative;
  z-index: 150; /* under the 200 fixed nav, over the first section's background */
  background: #F6E7B8;
  color: #14110A;
  border-bottom: 1px solid #C9A85A;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
/* Pages whose nav is position:fixed (60px tall). The banner starts below the
 * nav, and the negative bottom margin uses the 60px the first section already
 * reserves for the nav, so content moves down by exactly the banner's height
 * and nothing is covered. */
.cg-prelaunch.cg-prelaunch--fixed-nav { margin-top: 60px; margin-bottom: -60px; }

.cg-prelaunch .cg-prelaunch-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.cg-prelaunch .cg-prelaunch-text {
  flex: 1 1 420px;
  margin: 0;
  color: #14110A;
  font-size: 14px;
  line-height: 1.5;
}
.cg-prelaunch .cg-prelaunch-short { display: none; }
.cg-prelaunch .cg-prelaunch-btn {
  flex: 0 0 auto;
  display: inline-block;
  padding: 9px 16px;
  border-radius: 6px;
  background: #14110A;
  color: #F6E7B8;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.cg-prelaunch .cg-prelaunch-btn:hover { background: #2E2716; color: #FFF8E4; }
.cg-prelaunch a:focus-visible {
  outline: 2px solid #14110A;
  outline-offset: 2px;
}
.cg-prelaunch .cg-prelaunch-btn:focus-visible { outline-offset: 3px; }

@media (max-width: 640px) {
  .cg-prelaunch .cg-prelaunch-inner { padding: 10px 16px; }
  .cg-prelaunch .cg-prelaunch-long { display: none; }
  .cg-prelaunch .cg-prelaunch-short { display: inline; }
  .cg-prelaunch .cg-prelaunch-text { flex-basis: 100%; font-size: 13px; }
}

/* -------- contact line and subscribe note (Area 83) -------- */
.cg-prelaunch .cg-prelaunch-contact {
  flex: 1 1 100%;
  margin: 0;
  color: #14110A;
  font-size: 13px;
  line-height: 1.5;
}
.cg-prelaunch .cg-prelaunch-contact a { color: #14110A; text-decoration: underline; }

.cg-plans-note {
  max-width: 720px;
  margin: 16px auto 28px;
  padding: 14px 20px;
  border: 1px solid #C9A85A;
  border-radius: 10px;
  background: rgba(246, 231, 184, 0.08);
  color: #F3EBD6;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 640px) {
  .cg-plans-note { margin: 16px 16px 24px; }
}