.nav-logo { gap: 5px; flex-shrink: 0; }
.nav-logo .viva-logo-icon { display: block; width: 34px; height: 34px; overflow: hidden; flex-shrink: 0; }
.nav-logo img { width: auto; height: 34px; max-width: none; display: block; }
.nav-logo .viva-wordmark {
  font-family: "Instagram Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 23px; font-weight: 400; letter-spacing: -.7px; white-space: nowrap; line-height: 1.1;
}
.viva-wordmark strong { font-weight: 700; }
.count-up { display: inline-block; font-variant-numeric: tabular-nums; min-width: 2ch; }
.hero-headline .hero-creators, .hero-headline .count-up {
  font-family: "Instagram Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.04em;
}
.instagram-accent {
  display: inline-block;
  background: linear-gradient(100deg, #a67bff 0%, #dc70dc 48%, #ff9e87 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.animate-in, .ai-hero-word { animation: none; opacity: 1; }
.motion-ready .reveal-pending { opacity: 0; transform: translateY(16px); }
.motion-ready .reveal-visible { animation: viva-reveal 550ms cubic-bezier(.2,.65,.3,1) both; }
@keyframes viva-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.hero-cta, .nav-cta, .bottom-cta-btn, .peek-arrow { transition: transform 180ms ease, box-shadow 180ms ease; }
.hero-cta:hover, .nav-cta:hover, .bottom-cta-btn:hover { transform: translateY(-2px); }
.hero-cta:active, .nav-cta:active, .bottom-cta-btn:active, .peek-arrow:active { transform: translateY(0) scale(.98); }
.academy-system { max-width: 1328px; }
.tier-ladder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tier-card {
  display: flex; flex-direction: column; padding: 34px;
  background: #222e3a; border: 1px solid #344351; border-radius: 24px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.tier-card::before { display: none; }
.tier-card:hover { transform: none; border-color: #46596b; box-shadow: none; }
.tier-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 28px; }
.tier-icon { grid-column: 1; grid-row: 1; width: 112px; height: 112px; margin-bottom: 12px; filter: none; }
.tier-card:hover .tier-icon { filter: none; }
.tier-icon svg { width: 112px; height: 112px; }
.tier-step-label {
  grid-column: 2; grid-row: 1; align-self: center; color: #b7c8da;
  font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.tier-title-col { grid-column: 1 / -1; grid-row: 2; }
.tier-name { font-size: 32px; line-height: 1.15; color: #edf3fa; letter-spacing: -.6px; }
.tier-milestone {
  grid-column: 1 / -1; grid-row: 3; order: initial; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; text-shadow: none;
  color: #b8d2ee; font-size: 22px; font-weight: 400; letter-spacing: -.3px;
  white-space: normal; line-height: 1.4;
}
.tier-bullets { flex: 1; gap: 18px; }
.tier-bullets li { gap: 11px; color: #bbcadb; font-size: 16px; line-height: 1.65; }
.tier-bullet-check {
  width: 24px; height: 24px; padding: 4px; margin-top: 1px;
  color: #afcce9; background: #334d65; border: 1px solid #4c6981; border-radius: 8px;
}
.tier-divider { background: #3c5062; margin: 30px 0 22px; }
.tier-mino { min-height: 88px; color: #bbcadb; font-size: 15px; line-height: 1.8; font-style: normal; }
.tier-mino-label { color: #cfdeef; letter-spacing: 0; margin-right: 0; }
@media (max-width: 760px) {
  .tier-ladder { grid-template-columns: 1fr; gap: 20px; }
  .tier-card { padding: 26px; border-radius: 22px; }
  .tier-name { font-size: 28px; }
  .tier-milestone { font-size: 20px; }
  .tier-mino { min-height: 0; }
}
@media (max-width: 768px) {
  .nav-logo .viva-logo-icon { width: 22px; height: 22px; }
  .nav-logo img { height: 22px; }
  .nav-logo .viva-wordmark { font-size: 14px; letter-spacing: -.5px; }
}
@media (max-width: 480px) { .stats-bar .stat-value { font-size: clamp(22px, 6.6vw, 30px); } }
@media (max-width: 380px) {
  .nav-logo .viva-logo-icon { width: 20px; height: 20px; }
  .nav-logo img { height: 20px; }
  .nav-logo .viva-wordmark { font-size: 13px; }
  .nav-cta { padding: 8px 10px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .reveal-pending, .animate-in, .ai-hero-word { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* Booking follows the introductory media. */
.hero .hero-preview + .hero-cta-wrap{margin-top:32px;margin-bottom:0}
.hero .hero-cta-micro{margin-top:24px}
.hero-cta:disabled, .nav-cta:disabled, .bottom-cta-btn:disabled {
  cursor: default;
  opacity: 1;
}
.hero-cta:disabled:hover, .nav-cta:disabled:hover, .bottom-cta-btn:disabled:hover {
  transform: none;
}

/* Almost Night: the reference sky fades into a continuous slate background. */
html, body { background: #19222c; }
body { position: relative; isolation: isolate; }
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: max(1060px, 100svh);
  background: url("./cloud-almost-night.webp") center top / cover no-repeat;
  opacity: .65;
  -webkit-mask-image: linear-gradient(#000 20%, transparent);
  mask-image: linear-gradient(#000 20%, transparent);
  pointer-events: none;
  z-index: -1;
}
.hero-sub, .hero-cta-micro { color: #a3b2ca; }
.peek-arrow:disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}
.career-highlight {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: #111714;
  padding: .02em .12em .06em;
  margin-inline: -.04em;
}
.career-highlight::before {
  content: "";
  position: absolute;
  inset: -.035em -.02em -.025em;
  z-index: -1;
  background: #ffe568;
  clip-path: polygon(0 9%, 7% 3%, 22% 5%, 40% 0, 59% 4%, 78% 1%, 98% 0, 100% 88%, 97% 98%, 77% 94%, 58% 100%, 39% 94%, 23% 100%, 9% 94%, 0 98%);
  transform-origin: left center;
  animation: career-marker 800ms cubic-bezier(.22,1,.36,1) 250ms both;
}
@keyframes career-marker {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .career-highlight::before { animation: none; }
}
html { color-scheme: dark; background: #19222d; }
/* Paint the iPhone status-bar safe area instead of relying only on Safari's
   theme-color tint. Keep navigation and the title below the notch. */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #19222d;
  pointer-events: none;
  z-index: 101;
}
.nav { top: env(safe-area-inset-top, 0px); }
.hero { padding-top: calc(120px + env(safe-area-inset-top, 0px)); }
@media (max-width: 768px) {
  .hero { padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
}
.hero-sub { line-height: 1.65; max-width: 760px; margin-bottom: 32px; }
@media (max-width: 768px) {
  .hero-headline { font-size: clamp(24px, 7.4vw, 32px); line-height: 1.12; }
  .hero-mobile-line { display: inline; }
  .hero-headline .instagram-accent { display: block; }
  .hero-preview, .stat-box, .card-base, .qual-col, .faq-item {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.nav-links{display:flex;align-items:center;gap:14px}.nav-home{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;color:rgba(255,255,255,.58);border-radius:50%;transition:color 180ms ease,background 180ms ease}.nav-home:hover,.nav-home:focus-visible{color:#fff;background:rgba(255,255,255,.07)}.nav-home:focus-visible{outline:2px solid #9caaff;outline-offset:3px}@media(max-width:480px){.nav-links{gap:5px}.nav-home{width:28px;height:28px}.nav-home svg{width:16px;height:16px}}